Eight rooms. One kit.

Why it's here

The concept round has to open with Charles's own language executed at the level he is paying for, so that every departure after it reads as a decision rather than a misread. This is the $50k polish on the $10k build: nothing new, everything tuned. It is also the answer to the brief's actual ask, which was to extend v9 into a system, not to invent one.

What moves

Gold hairlines draw themselves in on load. The stat cards carry the top-edge light-source border, and a specular highlight travels along that edge every few seconds, one card after another. The member count rolls up to the live figure. A single glow trace falls from the headline into the CTA on a loop, and the button breathes once each time it lands. That trace is the v7/v9 motif, kept exactly.

Keeps

The entire kit. The centered v9 stack. The VSL slot untouched, directly below. One red element. The nav carries the live door price.

Bends

Nothing.

Breaks

Nothing.

Build

Pure CSS. The counter is a registered custom property animating an integer, so there is no script on the page. LCP is untouched. Under reduced motion everything sits at rest and the count shows its final value.

Cost: the cheapest study in the set. Every animation here becomes a token in the component library the brief lists.

Wins the system round, not the wow round. Ship this as the baseline whatever else gets picked.

Why it's here

The brief's one-line aesthetic is "a private members' club crossed with a trading terminal", and the terminal half is the part nobody in this niche has built. It also solves the proof-density rule structurally instead of decoratively: the feed is the receipt, and it renews itself.

What moves

Events tick onto the tape the way a terminal prints: joins, citations, test-day updates, call archives, each timestamped, each arriving with a gold flash that fades. A cursor blinks in the header. The ladder draws itself as steps, because the ladder steps. Numbers are set in Archivo with tabular figures, which is what a terminal looks like when a third typeface is off the table.

Keeps

Palette, Archivo, one red element, honest numbers only. The green live dot you would expect is gold, because green is reserved for Level 7 contexts.

Bends

A step chart lives one door down from the "graphs-go-up hero art" reject. It is the price ladder, not revenue, and it steps rather than soars. Put it next to the reject and let Charles rule.

Breaks

It needs a real feed. Fed by the Skool webhook it is the most honest element on the site; faked, it is exactly the urgency furniture Section 08 bans. And it is a JavaScript island on the homepage.

Build

One script of roughly 2 KB, no framework. The first rows render server-side at build so crawlers see them; the script only prepends. Under reduced motion the rows sit still and the cursor stops.

Cost: one island plus the webhook contract. The ladder engine already exists; the tape reads from the same source.

Strongest candidate for the community page and the homepage proof band. As a hero, only if the feed is truly live.

Why it's here

The kit already contains one motif that begs for motion: glow traces falling toward CTAs. Scaled from one trace to a field of them, the hero gets a signature that no competing course page can copy without looking like they copied it. It is the only study in the set where the brand's metaphor and the page's conversion mechanic are the same object: everything falls toward the button.

What moves

A field of thin gold light traces falls through the dot grid. In the lower half of the viewport they bend toward the CTA and pool into a glow beneath it. Move the cursor and the whole field leans with you, slightly. The proof strip pins to the bottom so a receipt stays in view under the weather.

Keeps

Palette, the v7/v9 trace motif, the centered stack, one red element, proof in view.

Bends

"Rain is the metaphor and it stays a metaphor." This is light, never water and never coins, but it is unmistakably weather. It sits directly on the line the brief drew.

Breaks

A canvas in the homepage hero. That is the one exception to zero-JS-by-default this build should spend its budget on: about 3 KB, requestAnimationFrame, paused off-screen, skipped under reduced motion, never the LCP element.

Build

2D canvas, about 130 traces, one gradient per trace per frame; comfortably under a millisecond a frame on a mid-range phone. The headline paints first and the canvas fades in behind it. A static poster replaces it under reduced motion.

Cost: roughly a day of build and QA beyond the comp, mostly spent on the mobile fallback and Lighthouse.

The signature move if Charles wants the site to feel like the brand's metaphor. Pair it with 01 everywhere else.

Why it's here

"Real screenshots and receipts are the visual language." Taken seriously, the receipt does not support the hero; it is the hero. This is the study for a crowd that has seen ten thousand VSL landers and trusts a dated number more than a promise. It also makes Section 11's credibility mechanic visible in the design: dated stamps, test dates, confidence levels, decay marked instead of hidden.

What moves

The lead figure rolls in digit by digit, odometer-style, each column a beat behind the last. Under it a rail of dated receipts scrolls sideways; cards brighten and settle as they enter, driven by the scroll position itself rather than a timer. One Caveat annotation, as the brief allows.

Keeps

Receipts first. Dated stamps with test date and confidence. Archivo. One red. One Caveat. The 7-day guarantee where the price is.

Bends

No VSL above the fold. The video moves one viewport down, which reorders the sequence v9 proved: headline, proof, video instead of headline, video, proof.

Breaks

No red line, but it is a conversion hypothesis wearing a design. It goes live behind a VWO test against the v9 hero or it does not go live.

Build

Scroll-driven animations (animation-timeline) and a CSS-only odometer. Zero script; browsers without scroll timelines get a plain rail. Every digit has a fixed box, so CLS stays under the 0.05 budget.

Cost: low. The rail and receipt card ship as library components regardless.

The right money-page structure: content above the fold, proof structural, cheap to build. As a homepage, test it; do not assume it.

Why it's here

The brief keeps saying "room": the room people pay to enter, what is shared in the room stays in the room. This gives the members' club half of the aesthetic a physical moment without a single dollar sign. Two heavy panels part along a gold seam, and what is behind them is a wall of receipts, not a promise. The door is the only piece of theatre in the set that is also an argument.

What moves

A seam of light opens. The panels slide apart on a heavy ease, the room settles from a slight zoom, and the wins wall fades up card by card. The plates on the doors carry the live count and door price, so the proof is visible before the room is. It plays once per session; scrolling skips it; a replay exists for the people who want to watch it again.

Keeps

Palette, dot grid on the panels, one red, proof behind the door and on it, brand assets untouched.

Bends

Theatre before proof. Roughly 1.8 seconds of it, once.

Breaks

An intro sequence on a CRO page is a real argument to have. The headline paints at t=0 under the panels so LCP holds, but Charles has to decide whether the site is allowed a moment of ceremony. If the answer is no, the same door motion works as the transition into /community.

Build

CSS transforms on one keyframe timeline, no script beyond a session flag. Under reduced motion the doors are already open.

Cost: low to build, one afternoon to tune. The expensive part is the conversation.

The signature move if Charles wants the site to feel like the room rather than the weather. Not both 03 and 05; pick one.

Why it's here

Archivo Black at poster scale is the most expensive-looking thing the kit can do for free. Fashion houses and watchmakers run this play with a serif; the brief bans serifs, so this is what luxury typography looks like in a grotesk: harder, more confident, and unmistakably not a guru lander. It also answers the one permission the brief grants that v9 never used, the mascot scaled big and cropped off the edge.

What moves

Letters rise out of blur one at a time. A slow sheen travels across the word like light across brushed metal, and keeps travelling after the load. Film grain breathes underneath. The mascot, the supplied render, stands enormous at the right edge, cropped off it: ghosted by default, so his black backdrop drops away and only his rim light, glasses and chain read through the type; the toggle on the stage shows him as supplied instead.

Keeps

Archivo only. The palette. One red. The mascot as supplied, scaled and cropped off-edge, which Section 08 explicitly allows; not redrawn, not recoloured.

Bends

The ghosted treatment: a screen blend at 82%, which is what makes his black backdrop vanish into the ground. The brief permits scale and crop and forbids restyling; whether a blend is a restyle is Charles's call, so both states are on the stage. His rim light is amber, not kit gold, and stays that way because he is not ours to recolour. Grain is a texture the kit does not list.

Breaks

The gold sheen on white type flirts with "gold means money" if it is pushed. It has to read as light on metal, never as bullion. The moment it glitters, it is wrong.

Build

CSS only: clipped gradients, filter transitions, an SVG noise tile. No script. Under reduced motion there is no rise and no sheen, and the grain holds still.

Cost: low. The risk is taste, not engineering.

Best as the About page and the OG image system. As a homepage it is the most polarising of the CSS-only set, which is a reason to show it, not to hide it.

Why it's here

"Royal purple, soft background glows only" is the quietest line in the kit, and this study finds its ceiling: slow volumetric colour moving behind frosted panels. Slow is the point. Expensive things move slowly. It is the atmosphere for the money page, where the reader should feel they have walked into a quieter room than the homepage.

What moves

Four soft masses of royal purple and gold drift on thirty-second loops and lean toward the pointer. The proof cards sit on frosted glass with the kit's top-edge light border, and a glint crosses each pane in turn. The colour behind the glass shifts the glass itself, which is what makes the material read as real.

Keeps

Palette, with purple used as glow only. One red. Proof cards with the hairline treatment. Archivo.

Bends

Frosted glass is a look the kit does not name and half the SaaS industry uses. Archivo and this palette keep it from turning into Stripe, but this is the study Charles is most likely to call "seen it".

Breaks

GPU cost. Backdrop blur over a moving background is the one effect in the set that can drop frames on a two-year-old Android. It ships with a static poster for reduced motion and low-power devices, or it does not ship.

Build

2D canvas rendered at quarter resolution and blurred up, about 4 KB. The glass is CSS. Falls back to a fixed gradient wherever backdrop-filter or the frame budget is missing.

Cost: a day, mostly device testing.

Money page and Courses hub atmosphere, if Charles wants those pages to feel different from the homepage. Not a homepage hero for this crowd.

Why it's here

Charles has not found a reference site he loves, which usually means he has not seen the ceiling yet. This is the ceiling. A field of gold signal points assembles the wordmark, breathes on a noise field, scatters from the cursor, and pours into the CTA when you hover it, which is the glow-trace motif taken to its logical end. The metaphor is the answer layer itself: a landscape that keeps reorganising, and a room that maps it.

What moves

Around two thousand points converge into RAINMAKERS on load, then drift. The cursor pushes through them. Hover the button and the whole field flows into it, then releases. The button leans toward the cursor. The sub-headline carries a hairline gold-and-lavender split instead of the usual red-and-cyan one, so the aberration stays inside the palette.

Keeps

Palette, Archivo, one red element, and the headline text in the DOM for crawlers and LCP. The particles are decoration over a real heading.

Bends

The hero is an interaction before it is a sentence. For a receipts-first crowd that is a risk on its own, so the proof moves into the sub-headline where it cannot be missed.

Breaks

Zero-JS-by-default (about 9 KB), a magnetic control that needs accessibility care, and sustained GPU work. Below tablet width it must collapse to a static poster. This is the study most likely to be called a tech demo, and the one most likely to get "I have never seen a course site do that". Both are true.

Build

2D canvas, the word sampled from an offscreen render, no library. Under reduced motion the word sits fully formed and still. The real version would also scrub the field into the price ladder on scroll, which is out of scope for a study.

Cost: two to three days including the poster fallback and device QA. The most expensive study by a distance.

Show it last, and say why: to find the ceiling of Charles's taste in one look. If he leans in, 03 becomes the safe version of this. If he flinches, 01 plus 05 is the answer.