The brief
A launch page for a made-up blood-orange apéritif, told as a short film you play with the scroll wheel. Nothing autoplays. Scroll down and the story runs forward, scroll up and it runs backwards, frame for frame. It had to look like one illustrator's hand from the first frame to the last, in cream, lacquer red, ink black and ochre, and it had to say plainly that nothing is for sale.
SECOND SUN is concept work. The brand, the drink and the woman in it are made up.
What we made
- Eight scenes on one scroll track. She walks in, lifts a slice of blood orange to the light, the slice grows into a red sun, she becomes a silhouette between columns, ink reeds drip into a veil, she sits at a bar while a bottle pours into her coupe, a brush stroke opens a colonnade, and she walks off in blue
- One locked character, generated from a single approved anchor image, plus a props sheet, a close-up and an eyes strip, all keyed out into separate layers
- Coded shapes for everything that moves or morphs: the sun, the portal, 36 ink reeds (22 on phones), four columns, 48 falling droplets and the pour stream
- Two original lounge tracks that start on your first tap, picked at random. A small sun on the final card breathes with the bass
- One resolved still for visitors who ask for reduced motion
How it works
One scroll position drives every layer. Each scene is worked out from that single number, so running it backwards is exact, not approximate. An early version let the animation library hand some fades to the browser's own scroll timeline, and those fades drifted out of step with everything else and left pink ghosts. Now every layer is set directly from the one scroll value.
Shapes are code and people are illustration. The sun, curtains, drips and brush wipes are vector geometry, so they stay sharp and morph cleanly in both directions. Illustration is used only for what code draws badly: her, her eyes, the bottles and the glass.
The cut from the walking figure to the close-up is a match cut on her hair. At the cut the crown lines up within 0.9 px, and the width within 1.4% on desktop and 2.2% on a phone. When the red sun grows out of the orange slice, the close-up swaps to a version with an empty hand hidden behind the disc, so the fruit never pops back. Outside the slice, 0.09% of pixels differ between the two versions.
The film is one React component using Framer Motion for the scroll clock, running at /demos/second-sun/.
What we threw away
The first builds. They looked like storybook engravings, mixed two drawing styles, and recropped one picture again and again to fake variety. We started over with six style boards, three art directions on two image models, and locked one.
AI video. Video models smear flat linework, and a scroll film has to reverse exactly, so all motion is code.
A walk cycle. Four generated frames drifted in scale, repeated a pose, changed her shoe colour and made the coat boil, so she rides in on a torn sheet of paper instead. Generated hands also failed the pour twice (bottle mouth-up, four fingers), so the pour has no hand. The bottle tilts in code and the stream is a drawn vector.
Limits
The 43 tests in the repo cover earlier versions of the page. There are no film-specific tests. The film itself was checked with frame sheets at desktop and phone size, a scroll probe that found no sideways overflow at 41 points on both, and recorded forward and reverse passes.
The build notes from 2026-10-29 list a strict review of the full film and a test on a real phone as still owed. This pass found no later record of either.
At a 4:3 window (1600x1200), the colonnade lines show through her blue coat in the last scene. We found it while capturing these stills on 2026-11-04 and it is not fixed yet.
Concept work. SECOND SUN, the drink and the woman are made up, and the final card says nothing here is for sale.
