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.6.0 — the skill can nowA newlearn.Learn mode([) distills sites you own or are authorized to study into original, reusable, IR-validated recipes on a pointer-first]learn-mode.md
learned shelf(references/learned/
) — turning a static knowledge base into a self-improving one, behind an enforced originality firewall (no copied code/assets/brand). It's the sibling toaudit mode: auditscoresa URL, learndistillsit — and both now share one detection pipeline. This release ships thecompiler core(Phase 1: Pattern-IR gate, four zero-dep tools, CI-enforced shelf integrity, tag-based dedup — no embeddings) — a freepreviewof the Motif Engine. The learned shelf shipsempty; the full self-learning engine is paid (seeUpgradebelow).
New —A reproducible, passive benchmark of scroll craft: 61 well-known sites scored 0–100 on Pacing / Performance / Accessibility / Motion Craft by a deterministic rubric ([CinematicBench].[methodology]). Score your own site:npx -p cinematic-scroll-skill cinematic-bench <url>
— same rubric family as the skill's[taste engine].
⬆ Upgrade — Cinematic Scroll Studio ($149, pay once).Your agent forgets.Every new project it re-derives your taste from scratch. Studio gives itmemory— every site you build teaches it your visual language, so build #10 starts where build #9 left off (the self-learning Motif Engine). This free skillbuilds and scores; Studioremembers and compounds— the one thing a template marketplace can't sell you: your own accumulated style.[·]Get Studio — $149[how it fits the stack].
New in v2.4.0 — a machine-readable design system under the hood.A DTCGtoken contract(design.md
+tokens/
),visual systemsas one-file themes (swap one, or author your own), and a9-component library(Mode A.html
- Mode B
.tsx
) make output deterministic and gated, not improvised — hardened by an adversarial self-review ([). See]REVIEW.md
below.[Design system]
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.
Built by Simone Leonelli · simone@w230.net
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.
scores any build
cinematic-doctor
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.
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
andevidence:
npm run proof -- examples/noir/index.html
The look is the user's, but it's no longer improvised. A machine-readable design contract now drives every build:
— W3C DTCG design tokens (color, type, spacing, radii, and first-class+design.md
tokens/
motion tokens: the signature easing curves and §3 pacing rules asdata). A zero-dependency pipeline emits CSS vars + typed TS; Mode A stays zero-build.Visual systems as one-file themes() — ready-made looks (Symmetric Monument, Clinical Noir, Storybook Geometry, Temporal Monument, Atmospheric Sublime, Warm Scrapbook, Naturalistic Drift, Brutalist Kinetic, Liquid Chrome, Botanical Editorial, Data Cinematic), each WCAG-AA contrast-checked — and any new look is one more theme file. Pick a look = swap one file.themes/
A named component library(·components/
) — HeroParallax, PinnedReveal, DepthFigure, TiltCard, MorphBackground, HorizontalGallery, ScrubVideo, KineticHeadline, MagneticCursor — token-driven, both modes (Mode Acomponent-grammar.md
.html
- Mode B
.tsx
), each doctor-verified.
npm run tokens:check && npm run themes:check # the contract is sound (tokens + 11 themes)
npm run verify -- components/mode-a/hero-parallax.html # one command: contract + doctor + runtime
npm test # every gate — the same set CI runs
The skill's most impactful builds, shown first: real-3D reference sites — scroll-driven three.js, no two sharing a technique (an asset-driven 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. Open any live:
🌿 Verdant — Into the bloom →
Scroll-scrubbed 3D walk— sterile concrete reclaimed by nature. A real rainforest sky lights the colonnade (image-based lighting), pollen drifts through god-rays, and instanced foliage streams past in layered 3D; move your cursor and the world leans with you.three.js
· image-based light
· drifting pollen
— source in examples/jungle-flythrough.△ AUREUS — Into the Vault →
Scroll-scrubbed raymarch— a flight down a liquid-chrome corridor that reflects arealstudio. Raymarched metaballs rendered every frame, sparks drifting past, the descent steered by your cursor and paced to your scroll.three.js
· raymarch
· real reflections
— source in examples/aureus-flythrough.🏛 Atelier Marne — A gallery you walk →
Scroll-scrubbed 3D walk— 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.js
· HDRI lighting
· hung art
— source in examples/gallery-flythrough.🎬 3D Flagship — Four Movements →
React Three Fiber + WebXR. A scroll-driven camera rail through four 3D modalities (Object · World · Field · Figure): a fal.ai-generated hero artifact on its stage ring → an instanced colonnade hall → a pure-GLSL field → a rigged dancer samba-ing under a concert spotlight. Velocity-reactive rail dust, aurora curtains, volumetric shafts, bloom.three.js
· R3F
· WebXR
· Draco/WebP
· fal.ai
— vanilla twin in examples/flagship.⚡ Nexus Immersive — Spatial Computing →
Tier C procedural shaders— no external model. A 15,000-particle galaxy field (custom GLSL), a 60×60 wave-equation displacement grid, and a Lorenz-inspired attractor. A WebXR gate showsEnter VRonly whennavigator.xr.isSessionSupported
returns true; context-loss handled, rAF gated on visibility. three.js
· GLSL
· WebXR
— source in examples/immersive.☁ Aether — Make Weather →
Tier C raymarched shader— a fullscreen volumetric cloudscape, zero assets. Every pixel marches an fbm density field with a second light-march toward the sun (self-shadowing + god-rays); scroll flies the cameradown throughthe weather as the palette morphs dawn → cosmic.three.js
· raymarching
· GLSL
· no assets
— source in examples/volumetric-aether.△ Obsidian — Refract It →
Tier B transmission glass— a faceted monolith of realMeshPhysicalMaterial
(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 keep the facets alive. three.js
· transmission
· PMREM
· bloom
— source in examples/crystalline-monolith.There is no fixed set of styles. Every site below is real and scrollable, built from the same motion grammar + token contract, then art-directed into a different world — hand-crafted looks and one-file themes side by side. Swap a theme file or describe a new brief, and the engine builds any aesthetic. These are starting points, not the limit.
Classic Touch · Renaissance editorial — "Oil-painting heroes, gold↔oxblood." | Maya Torres · Brutalist studio — "Giant grotesk, scroll-driven 3D." | Vantascope · Signal-clean sci-fi — "Warm-white canvas, crimson signal." | Maison Solenne · Quiet luxury — "Ivory + sand, vast negative space." | Bloom · Gen-Z pop — "Candy-pink + lime, fast parallax." | Atelier Nocturne · Awwwards techniques — "Shader distortion, kinetic type." | Meridian · Symmetric Monument — "The art of standing still." | Vanta Labs · Clinical Noir — "Clarity, in the dark." | Polly & Plot · Storybook Geometry — "Stories with edges." | Obsidian · Temporal Monument — "Time, made monumental." | Farsight · Atmospheric Sublime — "Distance is the point." | Keepsake · Warm Scrapbook — "Summers you can hold." | Drift · Naturalistic Drift — "Move at the pace of light." | Concrete / Orange · Brutalist Kinetic — "Built, not decorated." | Chroma · Liquid Chrome — "Premium, in motion." | Verdant Press · Botanical Editorial — "Printed, pressed, patient." | Signal · Data Cinematic — "Data with gravity." | Aureus · Fintech — "Digital wealth, a live liquid-chrome WebGL hero." |
This release went through an adversarial self-review — independent passes over every component, gate script, token, and doc. It surfaced 50 issues; all critical/high and every doc/data inaccuracy are fixed and re-verified, the rest tracked. Full ledger: .
REVIEW.md
The flagship in depth. examples/flagship/ is one cinematic scroll site, four chapters, four 3D modalities — vanilla Three.js (Mode A) plus React Three Fiber + WebXR (Mode B). The 3D stack decision tree lives in
references/3d-stack.md
references/webxr.md
ASSETS-3D.md
Both tiers now carry the full experience: the vanilla example ships the real Draco meshes (the generated chronometer, the colonnade hall, and the rigged dancer — samba out of the box) plus the FX layer (velocity-reactive rail dust, fake-volumetric shafts, breathing stage rings, FOV kick), degrading to designed procedural geometry offline. The Mode-B twin in the Next.js template (/flagship
— templates/nextjs/FLAGSHIP.md) adds on top:
Generate real 3D assets with one command.npm run generate:flagship
runs a two-stage fal.ai pipeline per chapter: an art-directed concept image (fal-ai/nano-banana-2
), then image→3D (fal-ai/trellis
by default,fal-ai/hyper3d/rodin
for high-detail heroes). Each mesh isauto-compressed in place(Draco geometry + WebP textures, ~10–13 MB raw → ~1–3 MB) and** auto-normalized**at load to chapter height with its base on the floor — arbitrary generated scales and offsets are safe, including rigged (skinned) models.The Figure dances out of the box. The template ships a Mixamo-rigged, animation-baked dancer (dancer.glb
, ~0.8 MB Draco'd) with root motion stripped so the samba stays planted on its stage ring — no Blender, no Mixamo account, no manual rigging step.An immersive FX layer. A scroll-velocity-reactive GPU dust field spans the whole camera rail (travelfeelslike travel — motes swell and stream, the lens FOV kicks, then everything settles at each dwell), aurora light curtains flow overhead, fake-volumetric shafts rake the colonnade and spotlight the dancer, the hero artifact levitates with an orbiting comet glint, and chapters materialize on arrival through damped presence gates. Atmosphere morphsboth fog color and density per chapter; a blurred mirror floor, bloom, chromatic aberration, and film grain finish the frame.The engineering contract holds. Every effect answersprefers-reduced-motion
with a composed still frame, the mobile path cuts particle counts and skips heavy passes, the scroll-camera freezes while a WebXR session presents, and the swap from procedural placeholder to generated.glb
isdata, not code(one manifest line).
Pick how you want to build:
Mode A: Single scroll section — one runnable .html
file, no build step, no keys. Perfect for a hero chapter or one-off section.
Mode B: Full release site — complete Next.js project, tested templates, optional AI image generation pipeline. Best for product launches and multi-chapter stories.
Pick whichever channel fits your client. All four install the same skill.
/plugin marketplace add MustBeSimo/cinematic-scroll-skill
/plugin install cinematic-scroll@mustbesimo
Installs as a namespaced plugin and stays updatable with /plugin marketplace update mustbesimo
.
npx cinematic-scroll-skill # copies the skill into ~/.claude/skills/cinematic-scroll
npx cinematic-scroll-skill --dir .cursor/skills # or a custom skills directory
git clone https://github.com/MustBeSimo/cinematic-scroll-skill ~/.claude/skills/cinematic-scroll
npx skills add MustBeSimo/cinematic-scroll-skill # skills.sh
Also listed on ** agentskills.io** (search "cinematic-scroll").
Paths vary by client — see COMPATIBILITY.md for step-by-step instructions:
Claude Desktop— Settings → Capabilities → Skills → Upload** Cursor**— drop into.cursor/skills/
(ornpx cinematic-scroll-skill --dir .cursor/skills
)Hermes Agent—hermes skills install MustBeSimo/cinematic-scroll-skill
(repo form — pulls the full multi-file skill, includingreferences/
,templates/
, andtools/
), orgit clone
to~/.hermes/skills/
OpenClaw— viaClawHub, the OpenClaw skill registry:clawhub install cinematic-scroll
(oropenclaw skills install git:MustBeSimo/cinematic-scroll-skill@main
)
After installing, describe what you want to build in chat — see examples/PROMPTS.md for 20+ copy-paste examples across aesthetic worlds.
A closer look at some of the worlds from the gallery above — single, build-free index.html files (GitHub-Pages-native) running the skill's
Mode A grammar: vanilla JS on
requestAnimationFrame
with optional GSAP/ScrollTrigger enhancements, dependency-free core, progressively enhanced showcase beats (deferred GSAP + ScrollTrigger from CDN with vanilla fallback). They render fully with zero image files(CSS-only placeholders that upgrade when you add stills). Proof the look is a variable, not a default — and not a fixed set.
| |
① Renaissance editorial → Warm, classical, ornate. Oil-painting heroes, gold↔oxblood morph, serif display. Mirrors the production edition atw230.net/reinassence.Source.② Brutalist creative-director → Cold, modern, severe. Giant grotesk type, monochrome + electric-blue accent, grey↔ink morph, scroll-driven 3D camera. A fictional CD portfolio in the spirit of spare Swiss-editorial sites.Source.| |
③ Signal clean → StudioVANTASCOPE, title** HOLLOW STAR**. Warm-white canvas, massive near-black Oswald type, single crimson signal accent — clean editorial sci-fi. 4 chapters, scroll-linked 3D camera, vertical mask-wipe title reveals.Source.④ Quiet luxury → MaisonSOLENNE. Warm ivory + sand, muted cognac accent, thin-serif display, vast negative space. 220vh pins, ~3% background drift, letter-spacing-scrub reveals.Source.⑤ Gen-Z pop → AppBLOOM. Candy-pink + electric-lime gradients, bold rounded type, fast parallax, floating CSS phone-UI.Source.| |
⑥ Awwwards techniques →****ATELIER NOCTURNE— the second-generation vocabulary, all five techniques in one build-free file:** shader-distorted imagery**(scroll-velocity ripple + RGB split + hover bulge, hand-rolled WebGL, DOM stays the source of truth),** kinetic typography**(per-char velocity skew), a** magnetic cursor**, a** pre→hero handoff**, and** page-transition wipes**— every one reduced-motion-safe. Pattern doc:·references/awwwards-techniques.md
Source. Doctor:100/100.** Same motion grammar; any aesthetic.** The worlds above are different visual directions the skill can art-direct — change the copy, palette, and references, and the same engine produces any world you describe. The styling is infinite; the cinematic motion is the constant, and the look is whatever you ask for. (See the full gallery and the ** real-3D flagships** — both above.)
python3 -m http.server 8099 # then open /examples/renaissance/ · /studio/ · /noir/ · /luxe/ · /pop/
Under the motion, every chapter ships with:
Cinematic depth | 5–7 parallax layers per chapter, perspective camera, dolly-back transitions | Editorial type | Oversized titles with word-stagger / clip-path mask / letter-spacing-scrub reveals | Atmosphere morphs | Backgrounds crossfade between chapter color-worlds as you scroll | Image pipeline | Optional: fal.ai-generated heroes (FLUX.2, Nano Banana, Imagen); required: bring your own images or render CSS-only visuals. Generated assets remain subject to your input rights and model-provider terms — review output before commercial deployment. | Bulletproof basics | Reduced-motion fallback, iOS video safety, mobile-stacked layout, transform/opacity-only core hot paths; optional GSAP showcase enhancements in selected examples; no WebGL required. Validate performance on target devices before production. |
A single ** scroll-choreography.json** now compiles to
the website— same beats, same easings, same depth choreography. Rebrand your site, and the video rebrands itself.
andits launch film
node compile-choreography.mjs scene.json --target web # → GSAP ScrollTrigger page
node compile-choreography.mjs scene.json --target video # → d timeline for HyperFrames / Remotion
node compile-choreography.mjs scene.json --harness --out preview.html # → watch it move, zero install
node compile-choreography.mjs scene.json --target hyperframes # → render-ready composition → MP4
The web target is scroll-driven and responsive; the video target is a deterministic 16:9 timeline for HTML-to-video renderers — directed by , the brand spec that translates this design system for the frame. The
FRAME.md
--harness
flag emits a self-contained preview HTML with
play/scrub controls so you can watch any choreography in a plain browser.Same DOM contract ([data-chapter]
/ [data-layer]
/ [data-title]
) serves both targets. Full mapping table + Remotion adapter: scroll-choreography-compilation.md · mixing strategy (HyperFrames × Remotion):
video/PIPELINE.md
Reference film projects — both stacks, ready to render:
| Film | Stack | Length | What it covers |
|---|---|---|---|
video/ship-in-5/ |
video/flagship-3d/
real captures of the live route(hero frame, virtual-time scroll-through, concept→mesh, the spotlit dancer)video/doctor/
"Scored"— the cinematic-doctor film: the scan, the 0–100 score landing, the CI gate blocking a 64 and stamping an 87 PASSPromo
-
TwoMedia -
Flagship3D -
Doctor
in video/
npm run render:flagship
), and the doctor quality-gate film (npm run render:doctor
)Every HyperFrames film has a Remotion twin (and vice versa) — two renderers, one art direction, so you can A/B the stacks or pick per platform.
"Use cinematic-scroll to build a self-contained HTML pinned hero chapter for [YOUR BRAND]. Include a progress HUD."
You get one runnable .html
file. Open it. Done.
"Use cinematic-scroll to scaffold a complete Shopify-Editions-tier release page for [YOUR PRODUCT IN ONE LINE]. Demo mode first — do not require my fal.ai key. Copy all bundled templates verbatim. 8 chapters. Finish with the exact commands to run."
Then, in the scaffolded project:
npm install
npm run dev
Open http://localhost:3000
— a full 8-chapter cinematic page, CSS-only visuals, zero AI setup.
Want real generated chapter art? Add your own fal.ai key and run the command below. Generation cost varies by model and resolution — see MODELS.md
and current fal.ai pricing before running a batch.
npm run setup # interactive key wizard → writes .env.local
npm run generate # generates all chapter heroes into public/generated/
Full walkthrough: examples/GETTING_STARTED.md. Model menu + costs:
MODELS.md
cinematic-scroll-skill/
├── SKILL.md # the agent contract (Mode A + Mode B). For Claude, not humans.
├── README.md # you are here
├── design.md # ✦ the design contract — token roles, motion, banned patterns
├── tokens/ # ✦ DTCG design tokens (core · motion · semantic) + build/ (emitted CSS/TS)
├── themes/ # ✦ visual systems as one-file theme overlays (author more)
├── components/ # ✦ named component library — Mode A .html + Mode B .tsx + manifest.json
├── evals/ # ✦ triggering set + golden-output evals + runner
├── REVIEW.md # ✦ adversarial self-review ledger (50 findings + status)
├── COMPATIBILITY.md # platform installation & verification (Claude, Cursor, Hermes, OpenClaw)
├── LICENSE # MIT
├── manifest.json # skill metadata (free)
├── MODELS.md # fal.ai model menu, costs, when-to-use
├── ASSETS-3D.md # 3D asset hand-off: generate → compress → normalize → manifest
├── compile-choreography.mjs # ✦ scroll-choreography.json → page / film / preview
├── scroll-choreography.json # the declarative choreography schema + example
├── FRAME.md # brand spec for video agents (the frame translation)
├── taste-guardrails.md # banned patterns, cinematic vocabulary, pacing rules
├── references/ # scroll patterns · film archetypes · component grammar · design tokens · perf · 3d · webxr
├── tools/cinematic-doctor/ # ✦ the 0–100 quality gate (taste·perf·a11y·mobile·tokens·3D, CI-blockable)
├── tools/ # ✦ check-tokens · check-themes · check-links · check-consistency · build-tokens · verify · skill-sync
├── video/ # PIPELINE.md (HyperFrames × Remotion) + the film projects
│ ├── src/ # Remotion: Promo · TwoMedia · Flagship3D · Doctor
│ ├── ship-in-5/ # HyperFrames: the 60s launch guide
│ ├── flagship-3d/ # HyperFrames: "Four Movements" (the 3D flagship film)
│ └── doctor/ # HyperFrames: "Scored" (the quality-gate film)
├── examples/
│ ├── PROMPTS.md # 20+ trigger prompts across aesthetic worlds
│ ├── GETTING_STARTED.md # fal.ai setup, troubleshooting, queue+webhook
│ ├── KNOWN_ISSUES.md # QA log of real failure modes + fixes
│ ├── renaissance/ # Mode A example — warm classical editorial
│ ├── studio/ # Mode A example — brutalist creative-director portfolio
│ ├── noir/ # Mode A example — signal clean / editorial sci-fi (VANTASCOPE)
│ ├── luxe/ # Mode A example — quiet luxury (Maison Solenne)
│ ├── pop/ # Mode A example — Gen-Z pop (BLOOM)
│ └── flagship/ # the 3D/WebXR flagship — four chapters, four 3D modalities
└── templates/nextjs/ # tested, copy-verbatim Next.js App Router project
├── app/ (+ /flagship route, api/fal/*, generate-edition-asset)
├── components/ (ChapterScene, EditionsPage, flagship/ — chapters + fx layer)
├── lib/ (editions-manifest, flagship-manifest, normalize-model, fal-*, use-lenis)
├── scripts/ (setup.mjs, generate-chapter-assets.mjs, generate-flagship-assets.mjs)
└── package.json, tailwind.config.ts, tsconfig.json, FLAGSHIP.md, …
npm install choreo-3d framer-motion gsap @gsap/react lenis @fal-ai/client @fal-ai/server-proxy
The motion primitives target the choreo-3d package, with a built-in
vanilla fallback(sticky + IntersectionObserver + rAF) for sandboxes where npm packages can't be installed — identical math, same keyframes.
On GSAP: as of the 2025 Webflow acquisition, GSAP is 100% free — every former Club plugin included (SplitText, ScrollSmoother, ScrollTrigger, MorphSVG…), commercial use too. The Next.js build (Mode B) uses ScrollTrigger + SplitText for pinning and title reveals; the standalone demos retain a vanilla rAF core with optional deferred GSAP enhancements in selected showcase beats (loaded from CDN with vanilla fallback). This means self-contained, single-file Mode A examples run from file://
with zero build, and gracefully fall back to CSS-only rendering if the CDN is unavailable. (A few examples load external files — flagship
and studio
keep their JS in a sibling .js
, and the 3D fly-throughs aureus
/gallery
/jungle
plus atelier
load image textures — so the browser's file://
cross-origin policy blocks them; serve those over a local server instead: python3 -m http.server
in the repo, then open http://localhost:8000/examples/<name>/
.) For low-level GSAP help, pair this with the official greensock/gsap-skills — that skill teaches the GSAP API; this one teaches the cinematic system on top.
The reference direction is Shopify Editions, used only as an art-direction benchmark — chaptered release storytelling. The skill never copies Shopify's assets, logos, copy, source, or exact compositions, and never bakes readable UI text into generated images or imitates a named living artist. Generated assets may be used subject to fal.ai, model-provider and input-rights terms. Review output before commercial deployment.
MIT © 2026 Simone Leonelli — see LICENSE.
Built something with it? I'd genuinely love to see it: simone@w230.net