The full chain

Every prompt

Solstice is built around one AI-generated film. A single still was generated, then animated, then cut into frames the page scrubs on scroll. Below is the whole chain, verbatim, so you can reproduce it.

Build a showcase website that demonstrates extreme capability in web design, taste and artistic flavour. Lead with a fundamentally distinct technical pillar. Use advanced visual techniques and, where it fits, generate imagery with AI and animate it (e.g. Higgsfield / Kling). Total creative freedom. It will be seen by many people and credited to the model. Add a /guide route explaining how it was made and a /prompts route storing every prompt. Do three full iteration passes before calling it done.

Pillar: the full AI-asset pipeline plus a scroll-scrub film with a dwell engine. Concept: "Solstice", a cinematic crossing of a lone figure over a mirror-smooth salt flat toward a low sun, at the hour between night and dawn. The whole site is a dark projection room; the film is scrubbed frame by frame as you scroll, slowing on each chapter. The palette is pulled entirely from the film: deep indigo, lavender-ice, rose, pale gold. Type: Fraunces (cinematic display serif), Hanken Grotesk (text), JetBrains Mono (timecodes).

A vast mirror-smooth salt flat at the blue hour between night and dawn, a thin sheet of standing water forming a perfect reflection of the sky. A single small, distant lone figure walks toward a low pale-gold sun resting exactly on the horizon. The sky is a smooth gradient from deep indigo at the top, through lavender, to a rose-gold band at the horizon; the mirror water doubles it below. Faint low mist drifts across the surface. Minimal, cinematic, otherworldly, vast negative space, ultra-wide anamorphic composition, subtle film grain, muted pastel palette of indigo, lavender-ice, rose and pale gold. Photographic, 35mm, serene and immense. No text.

Generated two candidates; chose the one with the sun sitting exactly on the horizon and the cleanest reflection.

Extremely slow, barely perceptible forward dolly across the mirror-smooth salt flat toward the distant sun on the horizon. The lone figure stays exactly the same size and position, the composition unchanged. Only the low mist drifts gently sideways and the shallow water shimmers faintly, its reflection rippling almost imperceptibly. Nothing morphs, nothing is added or removed; the sun and the figure remain static. Cinematic, serene, one continuous ultra-slow motion, no cuts, seamless loop feeling, the last frame matching the first.

The "nothing morphs / remains static" clause keeps the composition locked so the frames scrub cleanly. Generated two takes; chose the one whose end frame matched the first most closely.

ffmpeg -i take.mp4 -vf "fps=12,scale=1280:720:flags=lanczos" -c:v libwebp -quality 80 public/frames/f_%03d.webp
ffmpeg -i take.mp4 -vf "fps=12,scale=960:540:flags=lanczos"  -c:v libwebp -quality 72 public/frames-m/f_%03d.webp

61 WebP frames per set (desktop + a lighter mobile set), plus a JPG poster for the first paint and the reduced-motion still. Total imagery under 1 MB because the gradient content compresses beautifully.

Pin a canvas full-viewport inside a tall section; pull the chapter beats up over it. Preload critical frames first (spread across the range), decode off-thread with createImageBitmap, and fall back to the nearest loaded frame to avoid white flashes. A dwell engine builds a cumulative lookup table from Gaussian densities centred on each chapter (width 0.05, peak 3.2, 2000 samples), so scroll maps non-linearly onto film time and the film lingers on each beat. Reduced-motion shows the poster still with every caption legible. LCP is protected by the eager poster image and real DOM copy; the canvas fades in behind it. CSP-clean throughout: external hashed scripts, no inline styles or handlers.

Solstice is a fictional showcase. The film was generated with AI (Higgsfield). See themaker's guide for the build story.