# CinematicBench, a reproducible benchmark for scroll craft

> Source: <https://github.com/MustBeSimo/cinematic-scroll-skill>
> Published: 2026-07-22 05:19:32+00:00

Built *with the skill itself* · adapts to your GitHub theme: dark → **Petroleum Editorial**, light → **Swiss Museum**

[▶ Watch the 30-second demo](https://mustbesimo.github.io/cinematic-scroll-skill/#how) ·
[⚡ Four real-3D flagships, live ↓](#flagships)

**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](https://w230.net) · [simone@w230.net](mailto: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/](/MustBeSimo/cinematic-scroll-skill/blob/main/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
```

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 as*data*). 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 A`component-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](/MustBeSimo/cinematic-scroll-skill/blob/main/examples/jungle-flythrough).**△ AUREUS — Into the Vault →**

**Scroll-scrubbed raymarch**— a 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.js`

· `raymarch`

· `real reflections`

— source in [examples/aureus-flythrough](/MustBeSimo/cinematic-scroll-skill/blob/main/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](/MustBeSimo/cinematic-scroll-skill/blob/main/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](/MustBeSimo/cinematic-scroll-skill/blob/main/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 shows*Enter VR*only when`navigator.xr.isSessionSupported`

returns true; context-loss handled, rAF gated on visibility. `three.js`

· `GLSL`

· `WebXR`

— source in [examples/immersive](/MustBeSimo/cinematic-scroll-skill/blob/main/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 camera*down through*the weather as the palette morphs dawn → cosmic.`three.js`

· `raymarching`

· `GLSL`

· `no assets`

— source in [examples/volumetric-aether](/MustBeSimo/cinematic-scroll-skill/blob/main/examples/volumetric-aether).**△ Obsidian — Refract It →**

**Tier B transmission glass**— a faceted monolith of 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 keep the facets alive. `three.js`

· `transmission`

· `PMREM`

· `bloom`

— source in [examples/crystalline-monolith](/MustBeSimo/cinematic-scroll-skill/blob/main/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/](/MustBeSimo/cinematic-scroll-skill/blob/main/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

[(with](/MustBeSimo/cinematic-scroll-skill/blob/main/references/3d-stack.md)

`references/3d-stack.md`

[and asset hand-off in](/MustBeSimo/cinematic-scroll-skill/blob/main/references/webxr.md)

`references/webxr.md`

[).](/MustBeSimo/cinematic-scroll-skill/blob/main/ASSETS-3D.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](/MustBeSimo/cinematic-scroll-skill/blob/main/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 is**auto-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 (travel*feels*like 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 morphs**both** 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 answers`prefers-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`

is**data, 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](/MustBeSimo/cinematic-scroll-skill/blob/main/COMPATIBILITY.md) for step-by-step instructions:

**Claude Desktop**— Settings → Capabilities → Skills → Upload** Cursor**— drop into`.cursor/skills/`

(or`npx cinematic-scroll-skill --dir .cursor/skills`

)**Hermes Agent**—`hermes skills install MustBeSimo/cinematic-scroll-skill`

(repo form — pulls the full multi-file skill, including`references/`

,`templates/`

, and`tools/`

), or`git clone`

to`~/.hermes/skills/`

**OpenClaw**— via[ClawHub](https://clawhub.ai), the OpenClaw skill registry:`clawhub install cinematic-scroll`

(or`openclaw skills install git:MustBeSimo/cinematic-scroll-skill@main`

)

After installing, describe what you want to build in chat — see [ examples/PROMPTS.md](/MustBeSimo/cinematic-scroll-skill/blob/main/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 at[w230.net/reinassence](https://www.w230.net/reinassence).[Source](/MustBeSimo/cinematic-scroll-skill/blob/main/examples/renaissance).**② 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](/MustBeSimo/cinematic-scroll-skill/blob/main/examples/studio).|
|

**③ Signal clean →** Studio**VANTASCOPE**, 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](/MustBeSimo/cinematic-scroll-skill/blob/main/examples/noir).**④ Quiet luxury →** Maison**SOLENNE**. Warm ivory + sand, muted cognac accent, thin-serif display, vast negative space. 220vh pins, ~3% background drift, letter-spacing-scrub reveals.[Source](/MustBeSimo/cinematic-scroll-skill/blob/main/examples/luxe).**⑤ Gen-Z pop →** App**BLOOM**. Candy-pink + electric-lime gradients, bold rounded type, fast parallax, floating CSS phone-UI.[Source](/MustBeSimo/cinematic-scroll-skill/blob/main/examples/pop).|
|

**⑥ 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** preloader→hero handoff**, and** page-transition wipes**— every one reduced-motion-safe. Pattern doc:[·](/MustBeSimo/cinematic-scroll-skill/blob/main/references/awwwards-techniques.md)`references/awwwards-techniques.md`

[Source](/MustBeSimo/cinematic-scroll-skill/blob/main/examples/atelier). 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.

*and*its launch film

```
node compile-choreography.mjs scene.json --target web     # → GSAP ScrollTrigger page
node compile-choreography.mjs scene.json --target video   # → paused 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](/MustBeSimo/cinematic-scroll-skill/blob/main/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 PASS`Promo`

+ `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](https://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](/MustBeSimo/cinematic-scroll-skill/blob/main/examples/GETTING_STARTED.md). Model menu + costs:

[.](/MustBeSimo/cinematic-scroll-skill/blob/main/MODELS.md)

`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](https://www.npmjs.com/package/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](https://gsap.com/) — 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](https://github.com/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](/MustBeSimo/cinematic-scroll-skill/blob/main/LICENSE).

Built something with it? I'd genuinely love to see it: [simone@w230.net](mailto:simone@w230.net)