feat(sites): FRDM Circle landing page — a sunlit ring garden where the hero is the counter

[Gerstep]

Live: frdm-circle.vercel.app

Deployed to production from this branch with the Vercel CLI, so the page is up without waiting on a merge to main. Dashboard: gersteps-projects/frdm-circle.

A static, zero-build landing page for The Freedom Circle at sites/frdm-circle/. Serve the folder over HTTP and it runs — no bundler, no server, nothing external at runtime.

Deploying

vercel.json at the repository root configures the whole deploy: no install step, no framework, a build that stages index.html, assets/ and licenses/ into dist/, and cache headers. The acceptance harness is deliberately not published.

Vercel Git production still follows main. This production URL came from a CLI upload of this branch (npx vercel deploy --prod --yes). An ignore-build command skips Git deploys that lack sites/frdm-circle, so a push to main cannot overwrite the live page with an empty tree. After this merges, Git deploys to main will publish as usual.

Locally, one command:

cd sites/frdm-circle && ./serve.sh

It has to be served over HTTP rather than opened as a file: the scene is an ES module, and a file:// origin is opaque, so the browser refuses the import and the static fallback ring takes over. serve.sh handles that and waits for the port to answer before opening the browser.

The idea

The hero is not a picture of the product. It is the product's number.

Ten thousand stems stand planted in a circle of daylight around a reflecting pool. Every stem is planted and none has flowered, because the real membership count is zero and this fund is built on not pretending otherwise. Light travels around the inside of the ring rather than down through it — which is the argument the copy makes a few sections later: in charity money moves down; here it moves around. The pool in the middle is the fund, the one thing in the circle that belongs to nobody in particular.

When somebody joins, one stem flowers. That is the only way gold enters this garden.

Nothing in the scene is a photograph or a model file. The stems, the water, the sky, the ground and the light are grown from a fixed seed on load, so the same garden appears every time.

The same world, twice

One canvas serves the hero and the loop section. The camera holds two framings, each fitted to a measured DOM box rather than to viewport fractions, so the garden is the same size at 320 as it is at 1920. For the loop the ring turns to face the reader and its four stages are labelled from projected 3D coordinates.

What is here

• Content — every sentence of frdmcircle.org, verbatim. Layout and world are new.
• Scene — instanced grass with two-frequency wind and pointer parting scaled by each stem's own length; a Fresnel water surface with pointer ripples; billboarded procedural flowers; drifting pollen; a sky dome with a low sun; a plain that dissolves into its own haze.
• Motion — GSAP with ScrollTrigger, and Lenis as the single smooth-scroll engine, both bypassed entirely under prefers-reduced-motion.
• Theme — bone paper, deep leaf green, one gold reserved for members, on Fraunces and Outfit. The footer is the single dark surface so the page lands on solid ground.
• Layout — a ruled editorial system: a three-item ladder instead of three equal cards, a 2+3 matrix instead of a five-across grid, a six-step rail that draws itself.

Performance

Cost here is fill rate and vertex count, so three quality tiers trade pixel ratio, blade detail and the ambient extras. The stem count never moves — ten thousand is the argument, not a decoration. A weak GPU still counts every woman; it just draws her smaller.

A governor watches frame time and demotes one tier at a time, one-way. A single long frame is read as a main-thread stall rather than a slow GPU, so a layout or a collection cannot permanently downgrade the page. The render loop runs only while the hero or the loop is on screen, and data-animation-active on the canvas reports its state so that is checkable from outside.

Verification

verify/verify.mjs runs nineteen gates across nine viewports from 1920 down to 320. Eighteen pass, zero fail, one is blocked honestly.

Gate	Result
Load, console, network	pass — zero errors or warnings at any viewport
Horizontal overflow	pass
Touch targets ≥ 44×44	pass
axe, WCAG 2.1 AA	pass — zero violations
Scene paints; render loop parks offscreen	pass
Dock navigation, FAQ, form validation and submission	pass — the client's live Formspree endpoint is stubbed throughout
Reduced motion · no JavaScript · no WebGL 2	pass — each renders complete, readable content
Keyboard order and visible focus	pass
Copy fidelity vs frdmcircle.org	pass — 153 of 153 sentences
Originality vs Sylva	clear in checked scope
Sustained frame rate	blocked — headless Chromium here rasterises in software and no GPU is available, so the number says nothing about real hardware

That last row is the one thing this environment cannot answer, and it is reported as blocked rather than dressed up as a pass.

The configured Vercel build was also run and its output served: renders with all 10,000 stems, zero console issues, zero failed requests. Production (https://frdm-circle.vercel.app) returns 200 for the page, scene scripts, fonts, and brand marks.

Sylva, and why there is an audit

Sylva's README grants no licence for reuse of its code, design or artwork. So it informed technique and nothing else — and that claim is audited rather than asserted. verify/ORIGINALITY.md runs MengTo's own evidence-inventory script and reports the load-bearing result: the three files containing all of this page's authored markup, styling, shaders and behaviour share no eight-word sequence with any Sylva file. Every text lead is either the vendored Three.js runtime or licence boilerplate.

Built following MengTo/Skills (MIT). build-awwwards-quality-sites governs; editorial-tech, container-lines and number-details set the layout; threejs-landscape, globe-particles and build-interactive-particle-trail inform the garden; iterate-until-verified and audit-reference-originality shape the harness and the audit. Skills deliberately not combined are named in docs/frdm-circle-landing.md.

This page makes no claim to any award. "Awwwards quality" was an acceptance bar during the build, nothing more.

Bugs worth knowing about

Each was found by measurement, not inspection. Full list in docs/frdm-circle-landing.md.

• A point-size formula multiplied by screen height produced ~950px sprites and 0.2fps. One expression accounted for the entire performance problem.
• A percentage translate in a stylesheet reached GSAP as a resolved pixel offset, which it kept underneath the yPercent it was animating — so every headline finished its reveal still 112% low and the page had no visible headings at all.
• Percentage gradient stops on a taller-than-viewport element put the mobile scrim hundreds of pixels below the type it was meant to protect. Body copy sat on grass at 2.2:1.
• A background on the canvas parent paints after negative-z descendants and buried the whole scene.
• Playwright consults the most recently registered route first, so a catch-all abort swallowed the stubbed request and the form gate failed for a reason unrelated to the form.

Mobile

Designed rather than reflowed: a window onto the garden at the top of the frame with the dock floating over it, then the whole argument on paper.

Known gaps

• Frame rate is unmeasured on real hardware.
• Under prefers-reduced-motion the canvas is replaced entirely rather than rendering one static frame of the garden. This follows build-awwwards-quality-sites to the letter, but a static render would arguably serve those readers better and is the obvious next improvement.
• og:image still points at the client's existing og.jpg, which does not depict this design.

  

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
frdm-circle	Ready	Preview	Aug 19, 2026 10:49pm