Motion design and direction
Story, camera, motion, type, reduced motion
Claude Code, Next.js, GSAP, Lenis, WebGL, Figma
October 2026
THE WHY. I wanted to learn how to build full-page motion: one camera, one story, and the scroll moving both. Night Chart is what came out of it.
Night Chart is one unbroken camera move. A red line draws the coast, and the photo develops into a cyanotype chart behind it. The line takes a fix on the stars, runs off the edge of the chart, rules a meridian across a globe, then follows itself home to the lighthouse. The last frame is the first, so it loops in both directions.
The first version moved the camera on a schedule. It parked or crept for about half the scroll, so most frames were an empty blue field with a red line somewhere in it.
In the rebuild the camera follows the pen. It tilts into each turn, slows down to cross the edge of the chart, and saves its fastest move for the zoom out to the globe.
In the first version the chart faded in over the photo all at once. Now it spreads out from the shore the pen has just drawn, and at the end the lighthouse beam sweeps the color back in. Something on screen causes every change you see.
The first version ended with the line fading out. Now the camera pulls back until the whole route fits in one frame, then dives at the lighthouse while the readout counts down to its position: “Traverse closed, error nil.”
The beam sweeps the opening frame back in, and it starts again.
Your scroll sets the speed and the direction. Scroll back and it plays in reverse. Scroll fast and the stars streak.
The lighthouse flashes every 10 seconds even when you stop, and on desktop a lens at the cursor shows the photo under the chart. Phones get their own framing, and with reduced motion turned on you get 6 still frames.
Claude Code wrote the code. I set the direction, judged every frame and decided what shipped.
Before the rebuild I went through the first version frame by frame, ranked 12 fixes and picked 1 of 3 directions. The rebuild took one evening in 7 phases, and each phase ended with a filmstrip like this one that I checked before the next one started.
Click below to interact with the live page at your own pace.
An AI fitness coach my wife and I use to stay consistent.
A study app my wife and I use to learn Italian from our textbook. I designed and directed it, and Claude Code wrote the code.
The design function, the experimentation program, and the AI workflow across the full 20+ brand portfolio.
The other half of the BowFlex story: the connected fitness platform’s web experience, from 0 to 1.