Cinematic Scroll

You describe it. Your agent builds it.

No hand-built keyframes. A 5-phase pipeline — audit, storyboard, spec, build, polish — with taste guardrails and a transform/opacity performance budget, so what comes back is cinematic, not generic.

A section in seconds, or a whole release site.

One token contract. A living system. A component library.

The look is yours, but it's no longer improvised. A machine-readable contract — design.md + DTCG tokens — drives every build: color, type, spacing, and first-class motion tokens (the signature easing curves and pacing rules as data). Pick a look by swapping one theme file — or describe a new one.

Reviewed & hardened — an adversarial self-review found 50 issues; all critical/high fixed and re-verified (ledger: REVIEW.md). Every gate runs in CI via npm test.

Real-3D flagships.

The most impactful builds the skill ships — real-3D reference sites, scroll-driven three.js, no two sharing a technique: a WebXR colonnade, a procedural particle galaxy, a raymarched volumetric sky, a refractive glass monolith, and scroll-scrubbed camera flythroughs through a sculpture gallery, an overgrown atrium, and a liquid-chrome vault. Each handles context-loss, caps devicePixelRatio, gates its loop on visibility, and falls back to a permanent poster — never a blank canvas. Click any to scroll the real thing.

🎬 3D Flagship▶

React Three Fiber + WebXR

Four Movements.

A scroll-driven camera rail through four 3D chapters — a fal.ai-generated hero artifact on its stage ring, an instanced colonnade, a pure-GLSL field, and a rigged dancer samba-ing under a concert spotlight. Velocity-reactive rail dust, aurora curtains, bloom.

three.jsR3FWebXRDraco/WebPfal.ai

⚡ Nexus Immersive▶

Tier C procedural shaders

Spatial Computing.

A 15,000-particle galaxy field (custom GLSL), a 60×60 wave-equation displacement grid, and a Lorenz attractor — no external model. The WebXR gate shows Enter VR only when supported; context-loss handled, rAF gated on visibility.

three.jsGLSLWebXRno external model

☁ Aether · Volumetric▶

Tier C raymarched shader

Make Weather.

A fullscreen volumetric cloudscape — every pixel marches an fbm density field with a second light-march toward the sun for self-shadowing and god-rays. Scroll flies the camera down through the weather as the palette morphs dawn → cosmic. Zero assets — the cloud exists only while the GPU computes it.

three.jsraymarchingGLSLno assets

△ Obsidian · Refraction▶

Tier B transmission glass

Refract It.

A faceted glass monolith — real MeshPhysicalMaterial transmission (IOR 1.5, thickness, iridescence) lit by a procedural PMREM environment, ACES tone mapping and bloom. Scroll cranes the camera around it while 60 orbiting shards and sweeping lights keep the facets alive.

three.jstransmissionPMREMbloom

🏛 Gallery flythrough▶

Scroll-scrubbed 3D walk

Atelier Marne.

A museum you walk by scrolling. Image-based light from a generated atrium floods the hall, six AI-painted canvases hang in their frames, and dust drifts through the beams. Glassmorphic cards + a clickable chapter index fly the camera anywhere.

three.jsHDRI lightinghung artclickable index

🌿 Jungle flythrough▶

Scroll-scrubbed 3D walk

Verdant.

Sterile concrete reclaimed by nature. A real rainforest sky lights the colonnade, pollen drifts through god-rays, and instanced foliage streams past in layered 3D. Move your cursor — the world leans with you.

three.jsimage-based lightdrifting pollenscroll-camera

△ Vault flight▶

Scroll-scrubbed raymarch

Into the Vault.

A scroll-scrubbed flight down a liquid-chrome corridor that reflects a real studio — raymarched metaballs rendered every frame, sparks drifting past, the descent steered by your cursor and paced to your scroll.

three.jsraymarchreal reflectionsscroll-scrubbed

Infinite aesthetics. One grammar.

There is no menu of styles. Every site here is real and live — built from the same motion grammar and token contract, then art-directed into a different world. Describe any brief and you get a new one; the sites below are a glimpse, not a ceiling. Click any to scroll the real thing.

Eighteen shown — and that's not the limit. Every one is the same engine wearing a different face; the next world is one brief away.

Generate the meshes. Ride the rail.

The flagship's 3D assets aren't hand-modelled — one command runs a two-stage fal.ai pipeline per chapter (concept image → image-to-3D), auto-compresses each mesh in place (Draco + WebP, ~10–13 MB → ~1–3 MB) and auto-normalizes it onto its stage; the rigged dancer ships baked-in. Every effect answers prefers-reduced-motion, the mobile path sheds particle counts, and the scroll-camera freezes while a WebXR session presents.

Open /flagship in the Next.js template · vanilla twin in examples/flagship · stack notes in 3d-stack.md

One choreography. Two media.

A single scroll-choreography.json compiles to the website and its launch film — same beats, same easings, same depth choreography. Rebrand your site, and the video rebrands itself.

Docs: compilation pipeline · video pipeline · FRAME.md

Add it to your agent in one line.

Claude Code plugin: /plugin marketplace add MustBeSimo/cinematic-scroll-skill