Stats

Actions

Available In

Tags

Cinematic Scroll

One sentence in. A cinematic, scroll-driven website out.

Cinematic Scroll in motion — the launch reel flying through eleven aesthetic worlds from one engine

Built with the skill itself · adapts to your GitHub theme: dark → Petroleum Editorial, light → Swiss Museum
▶ Watch the 30-second demo · ⚡ Four real-3D flagships, live ↓

A free, MIT-licensed craft skill that gives any coding agent — Claude, Cursor, Hermes, OpenClaw — the taste to build cinematic, scroll-driven websites. Describe the aesthetic — palette, mood, references — and get a visual system, motion storyboard, pinned chapters, multi-depth parallax, 3D tilt, and full release pages art-directed to match. The motion is the constant · the look is yours · the agent is your choice. It's a skill, not a plugin — the craft travels with you across every agent.

New in v2.4.0 — a machine-readable design system under the hood. A DTCG token contract (design.md + tokens/), visual systems as one-file themes (swap one, or author your own), and a 9-component library (Mode A .html + Mode B .tsx) make output deterministic and gated, not improvised — hardened by an adversarial self-review (REVIEW.md). See Design system below.

Free for any use, personal or commercial (MIT). Actively developed — built from production work and shipped open source. Issues, PRs, and showcase submissions welcome — I collect what people build.

✦ Cinematic taste is now a number you can gate on

Cinematic Scroll isn't a prompt pack — it's a craft contract: plan the motion, build the scene, compile it to web and video, then run a doctor that catches cinematic slop before it ships. cinematic-doctor scores any build 0–100 across taste, performance, a11y, mobile, tokens, and 3D — and exits non-zero below threshold, so quality is CI-blockable, not a vibe.

npm run doctor -- examples/noir/index.html

It already scores the bundled examples (noir 87, luxe 88) and the 3D/WebXR flagship (100). The same scroll-choreography.json compiles to the website and its launch film — one choreography, two media.

Quality gate

node tools/cinematic-doctor/cli.mjs examples/luxe/index.html # → score + per-category breakdown npm run doctor -- examples/flagship/index.html # → 100

The doctor exits non-zero below 80, so you can wire it into CI and block builds that score under the bar. Its runtime twin, tools/page-proof/, opens the build in headless Chromium and returns console errors + scroll screenshots — contract and evidence:

npm run proof -- examples/noir/index.html

✦ Design system: one token contract → a living system → a component library

The look is the user's, but it's no longer improvised. A machine-readable design contract now drives every build: