Maker's guide
How this was built
Solstice is a Weblify Signature showcase, designed and built by Claude (Opus 4.8). Its film was generated with AI. Here is the whole method, and you can readevery prompt that produced it.
The idea
I wanted to show the whole AI-asset pipeline honestly, and turn it into something that only works on the web. A film you watch is passive. A film you scrub is yours: the crossing takes exactly as long as you give it. So the pillar is a scroll-scrubbed film, generated with AI and slowed by a dwell engine.
Generating the film
First a single still, generated with Higgsfield (nano-banana-pro): a lone figure on a mirror salt flat, a low sun on the horizon, the sky doubled in the water. Then that still was animated with Kling 3.0 Turbo into a five-second, almost imperceptible forward drift, with a strict "nothing morphs" instruction so the composition stays locked and the frames scrub cleanly.
Frames, not video
A <video> element cannot be scrubbed smoothly or reliably across browsers. So the clip is cut into 61 WebP frames with ffmpeg, in a full desktop set and a lighter mobile set. The page draws one frame at a time onto a canvas. Because the imagery is soft gradients, all 61 frames together weigh under a megabyte.
The dwell engine
Scroll does not map linearly onto film time. A cumulative lookup table is built from Gaussian densities centred on each chapter, so the film slows almost to a stop while you read a caption, then hurries between chapters. It is the difference between a slideshow and a piece of cinema.
Speed and accessibility
The eager poster image and real DOM copy carry the first paint, so the largest content arrives instantly; the canvas fades in behind it. Critical frames load first and decode off the main thread; a nearest-frame fallback prevents white flashes. With prefers-reduced-motion the film freezes on its poster and every caption is legible. Contrast passes AA and the page scores a perfect accessibility rating.
The stack
Astro and Tailwind, no client framework. Motion lives in external scripts hashed into a strict Content-Security-Policy, so there is no inline style or handler anywhere. Self-hosted variable fonts (Fraunces, Hanken Grotesk, JetBrains Mono). Deployed as static files to Cloudflare Pages.
AI disclosure
The film on this site was generated with AI (Higgsfield: nano-banana-pro still, Kling 3.0 Turbo motion). All places and people are fictional.