The brief
A scroll-controlled opening for a longevity physician's website: his portrait at the center, a world of cells and light around him, and four phases that play as you scroll. Introduction, emergence, immersion, then a hand-off into the rest of the site. It had to feel editorial and expensive, not look AI-made, and he had to stay recognisable in every frame.
We built it on spec with a made-up physician, so the whole thing could be shown working instead of as a mood board.
What we made
- One approved portrait, checked up close at full size
- Nineteen dark-field microscopy cell sprites, placed in 3D
- One eased camera push, with no seams to stitch
- A warm backlight that floods the frame into the page's own cream
- Separate desktop (16:9) and phone (9:16) compositions, 240 frames each
How it works
The sequence plays on a canvas tied to scroll with GSAP ScrollTrigger. Frames load coarse to fine: every sixteenth frame first, then the gaps fill in, so the hero can be scrubbed within a second and sharpens as the rest arrives. The canvas always draws the nearest frame it has, so a fast scroll never shows a blank.
Visitors who ask for reduced motion, or have data saver on, get a still poster and no frame downloads.
What we threw away
The obvious route was a generative video model. We tried it: six renders, none used. Every render redrew the face, the camera stepped forward in visible jumps, and on a scroll hero a visitor can stop on any frame and see the fault. So the rule became: the face is never regenerated.
Limits
The portrait is a still. He does not breathe or blink, because every model that animated him also changed him. For a real physician we would start from a photo shoot or a locked-off clip of the real person. The physician, his name and his practice are made up.
