Guided Growth Remotion build-out

01bSaid, heard, card, weekly

The data-flow story, built for the siri section whose headline is already "One sentence becomes part of a long arc". Four beats, 430 frames, scrubbed by scroll. One spoken sentence in the gym becomes a habit card, and that card takes its place in the week. Nothing cuts: the card physically travels into the grid and the cell it fills stays marked.

VoiceToWeek. Said, heard, card, weekly.

Scrubbed on the page, 0 / 25 / 50 / 75 / 100 percent scroll.

Copy is lifted verbatim from the live page's own beatstrip in that section, so this is an animated version of already-approved content rather than new copy. On the page the animation replaces those four static cards, but only once the player is actually live, so with JavaScript off or reduced motion the original cards stay and the section still reads.

One thing to decide: the card shows "4 x 8 @ 185 lb" because the live page already says that. The-source models a habit as name, days, time and status, with no quantity field anywhere, so the page is already ahead of the data model on sets and reps.

01Website animations

Three sections are pinned scroll-scrub driven by a Remotion Player through seekTo(). Six animate once on entry. One is deliberately left still. The whole integration is one stylesheet and one script added to the page, nothing else changed.

Section to treatment map

Three pinned sections is the ceiling before the page feels like it is fighting the reader. If it reads as too much, how-it-works is the one to drop first.

Scroll strips, captured from the live page

morning, "It sees how it all connects", at 0 / 25 / 50 / 75 / 100 percent scroll.

siri, "One sentence becomes part of a long arc", same five positions.

how-it-works, "Talk it through, or just tap", same five positions.

The product moments on their own

Also rendered as transparent WebM for overlay use: media/web/*.webm. The section transition exists as transparent WebM and as ProRes 4444 for Premiere (the ProRes is 34MB so it is kept local, not deployed).

Measured weight

The Player is 97 percent of the weight, so it is loaded conditionally: skipped under 900px wide, skipped on prefers-reduced-motion, skipped on Save-Data. Phones get the 4 kB path and the sections still scrub through CSS. The orb loop is also skipped on Save-Data.

Verification 18 of 18 passed

Run with node scripts/verify-site.mjs against a real headless browser.

03Orb pipeline

A real port into React Three Fiber, not a wrapper: the lab is plain three.js with no package.json. Every value is a pure function of the frame, particle seeds come from a fixed PRNG, so frame N is identical on every render pass.

Variant contact sheet

Eight variants, each at frames 0 / 6 / 12 / 18 / 24 across one breath cycle, because stills lie about motion. Rows top to bottom:

Talking curves, ported back as data

The lab bug is that all 16 voice-routing amounts default to 0, so the envelope drives almost nothing. These are the values the orb should see, derived from real audio through the locked mapping, written as plain JSON so they can go back into the app.

Source is coach_greeting.mp3, the only onboarding clip that exists as mp3. The other 27 declared clips are wav-only. Nothing was written back to the-source.

02Social clip factory

One parameterised composition, one config array, three aspect ratios, rendered in a single pass. 6 clips x 3 ratios = 18 files. Format is the locked one: mundane footage, no talking, one headline, message lives in the caption.

placeholder copy Every headline is marked [PLACEHOLDER] on purpose. No approved marketing, no claims, no numbers, no results.

Safe margins measured rather than eyeballed: on 9:16 the headline occupies y 0.129 to 0.258 of frame height, inside the 0.12 to 0.82 box. The bottom 18 percent is left clear because the platform UI covers it. All 18 files are in media/social/.

--Open items