{"slug": "cinematicbench-a-reproducible-benchmark-for-scroll-craft", "title": "CinematicBench, a reproducible benchmark for scroll craft", "summary": "Simone Leonelli released CinematicBench, a reproducible benchmark that scores scroll-driven websites 0–100 on Pacing, Performance, Accessibility, and Motion Craft using a deterministic rubric, alongside the free MIT-licensed Cinematic Scroll Skill v2.6.0 that gives coding agents like Claude and Cursor the ability to build cinematic scroll-driven websites. The skill now includes a Learn mode that distills authorized sites into original, IR-validated recipes, and a cinematic-doctor tool that exits non-zero below a score of 80 for CI-blockable quality enforcement.", "body_md": "Built *with the skill itself* · adapts to your GitHub theme: dark → **Petroleum Editorial**, light → **Swiss Museum**\n\n[▶ Watch the 30-second demo](https://mustbesimo.github.io/cinematic-scroll-skill/#how) ·\n[⚡ Four real-3D flagships, live ↓](#flagships)\n\n**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.\n\n**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.\n\nNew 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`\n\nlearned shelf(`references/learned/`\n\n) — 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).\n\nNew —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>`\n\n— same rubric family as the skill's[taste engine].\n\n⬆ 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].\n\nNew in v2.4.0 — a machine-readable design system under the hood.A DTCGtoken contract(`design.md`\n\n+`tokens/`\n\n),visual systemsas one-file themes (swap one, or author your own), and a9-component library(Mode A`.html`\n\n+ Mode B`.tsx`\n\n) make output deterministic and gated, not improvised — hardened by an adversarial self-review ([). See]`REVIEW.md`\n\nbelow.[Design system]\n\nFree 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.\n\nBuilt by [Simone Leonelli](https://w230.net) · [simone@w230.net](mailto:simone@w230.net)\n\nCinematic 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\n\n**doctor** that catches cinematic slop before it ships.\n\n**scores any build**\n\n`cinematic-doctor`\n\n**0–100** across taste, performance, a11y, mobile,\n\n**tokens**, and 3D — and exits non-zero below threshold, so quality is\n\n**CI-blockable**, not a vibe.\n\n```\nnpm run doctor -- examples/noir/index.html\n```\n\nIt already scores the bundled examples (noir **87**, luxe **88**) and the 3D/WebXR flagship (** 100**). The same `scroll-choreography.json`\n\ncompiles to the website *and* its launch film — one choreography, two media.\n\n```\nnode tools/cinematic-doctor/cli.mjs examples/luxe/index.html   # → score + per-category breakdown\nnpm run doctor -- examples/flagship/index.html                 # → 100\n```\n\nThe 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\n\n*and*evidence:\n\n```\nnpm run proof -- examples/noir/index.html\n```\n\nThe look is the user's, but it's no longer improvised. A machine-readable **design contract** now drives every build:\n\n— W3C DTCG design tokens (color, type, spacing, radii, and first-class+`design.md`\n\n`tokens/`\n\n**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/`\n\n**A named component library**(·`components/`\n\n) — HeroParallax, PinnedReveal, DepthFigure, TiltCard, MorphBackground, HorizontalGallery, ScrubVideo, KineticHeadline, MagneticCursor — token-driven, both modes (Mode A`component-grammar.md`\n\n`.html`\n\n+ Mode B`.tsx`\n\n), each doctor-verified.\n\n```\nnpm run tokens:check && npm run themes:check          # the contract is sound (tokens + 11 themes)\nnpm run verify -- components/mode-a/hero-parallax.html # one command: contract + doctor + runtime\nnpm test                                              # every gate — the same set CI runs\n```\n\nThe 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:\n\n**🌿 Verdant — Into the bloom →**\n\n**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`\n\n· `image-based light`\n\n· `drifting pollen`\n\n— source in [examples/jungle-flythrough](/MustBeSimo/cinematic-scroll-skill/blob/main/examples/jungle-flythrough).**△ AUREUS — Into the Vault →**\n\n**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`\n\n· `raymarch`\n\n· `real reflections`\n\n— source in [examples/aureus-flythrough](/MustBeSimo/cinematic-scroll-skill/blob/main/examples/aureus-flythrough).**🏛 Atelier Marne — A gallery you walk →**\n\n**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`\n\n· `HDRI lighting`\n\n· `hung art`\n\n— source in [examples/gallery-flythrough](/MustBeSimo/cinematic-scroll-skill/blob/main/examples/gallery-flythrough).**🎬 3D Flagship — Four Movements →**\n\n**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`\n\n· `R3F`\n\n· `WebXR`\n\n· `Draco/WebP`\n\n· `fal.ai`\n\n— vanilla twin in [examples/flagship](/MustBeSimo/cinematic-scroll-skill/blob/main/examples/flagship).**⚡ Nexus Immersive — Spatial Computing →**\n\n**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`\n\nreturns true; context-loss handled, rAF gated on visibility. `three.js`\n\n· `GLSL`\n\n· `WebXR`\n\n— source in [examples/immersive](/MustBeSimo/cinematic-scroll-skill/blob/main/examples/immersive).**☁ Aether — Make Weather →**\n\n**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`\n\n· `raymarching`\n\n· `GLSL`\n\n· `no assets`\n\n— source in [examples/volumetric-aether](/MustBeSimo/cinematic-scroll-skill/blob/main/examples/volumetric-aether).**△ Obsidian — Refract It →**\n\n**Tier B transmission glass**— a faceted monolith of real`MeshPhysicalMaterial`\n\n(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`\n\n· `transmission`\n\n· `PMREM`\n\n· `bloom`\n\n— 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.\n\nClassic Touch · Renaissance editorial — \"Oil-painting heroes, gold↔oxblood.\"\n|\nMaya Torres · Brutalist studio — \"Giant grotesk, scroll-driven 3D.\"\n|\nVantascope · Signal-clean sci-fi — \"Warm-white canvas, crimson signal.\"\n|\nMaison Solenne · Quiet luxury — \"Ivory + sand, vast negative space.\"\n|\nBloom · Gen-Z pop — \"Candy-pink + lime, fast parallax.\"\n|\nAtelier Nocturne · Awwwards techniques — \"Shader distortion, kinetic type.\"\n|\nMeridian · Symmetric Monument — \"The art of standing still.\"\n|\nVanta Labs · Clinical Noir — \"Clarity, in the dark.\"\n|\nPolly & Plot · Storybook Geometry — \"Stories with edges.\"\n|\nObsidian · Temporal Monument — \"Time, made monumental.\"\n|\nFarsight · Atmospheric Sublime — \"Distance is the point.\"\n|\nKeepsake · Warm Scrapbook — \"Summers you can hold.\"\n|\nDrift · Naturalistic Drift — \"Move at the pace of light.\"\n|\nConcrete / Orange · Brutalist Kinetic — \"Built, not decorated.\"\n|\nChroma · Liquid Chrome — \"Premium, in motion.\"\n|\nVerdant Press · Botanical Editorial — \"Printed, pressed, patient.\"\n|\nSignal · Data Cinematic — \"Data with gravity.\"\n|\nAureus · Fintech — \"Digital wealth, a live liquid-chrome WebGL hero.\"\n|\n\nThis 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: .\n\n`REVIEW.md`\n\n**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\n\n[(with](/MustBeSimo/cinematic-scroll-skill/blob/main/references/3d-stack.md)\n\n`references/3d-stack.md`\n\n[and asset hand-off in](/MustBeSimo/cinematic-scroll-skill/blob/main/references/webxr.md)\n\n`references/webxr.md`\n\n[).](/MustBeSimo/cinematic-scroll-skill/blob/main/ASSETS-3D.md)\n\n`ASSETS-3D.md`\n\nBoth 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`\n\n— [ templates/nextjs/FLAGSHIP.md](/MustBeSimo/cinematic-scroll-skill/blob/main/templates/nextjs/FLAGSHIP.md)) adds on top:\n\n**Generate real 3D assets with one command.**`npm run generate:flagship`\n\nruns a two-stage fal.ai pipeline per chapter: an art-directed concept image (`fal-ai/nano-banana-2`\n\n), then image→3D (`fal-ai/trellis`\n\nby default,`fal-ai/hyper3d/rodin`\n\nfor 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`\n\n, ~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`\n\nwith 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`\n\nis**data, not code**(one manifest line).\n\nPick how you want to build:\n\n**Mode A: Single scroll section** — one runnable `.html`\n\nfile, no build step, no keys. Perfect for a hero chapter or one-off section.\n\n**Mode B: Full release site** — complete Next.js project, tested templates, optional AI image generation pipeline. Best for product launches and multi-chapter stories.\n\nPick whichever channel fits your client. All four install the same skill.\n\n```\n/plugin marketplace add MustBeSimo/cinematic-scroll-skill\n/plugin install cinematic-scroll@mustbesimo\n```\n\nInstalls as a namespaced plugin and stays updatable with `/plugin marketplace update mustbesimo`\n\n.\n\n```\nnpx cinematic-scroll-skill          # copies the skill into ~/.claude/skills/cinematic-scroll\nnpx cinematic-scroll-skill --dir .cursor/skills   # or a custom skills directory\ngit clone https://github.com/MustBeSimo/cinematic-scroll-skill ~/.claude/skills/cinematic-scroll\nnpx skills add MustBeSimo/cinematic-scroll-skill   # skills.sh\n```\n\nAlso listed on ** agentskills.io** (search \"cinematic-scroll\").\n\nPaths vary by client — see [ COMPATIBILITY.md](/MustBeSimo/cinematic-scroll-skill/blob/main/COMPATIBILITY.md) for step-by-step instructions:\n\n**Claude Desktop**— Settings → Capabilities → Skills → Upload** Cursor**— drop into`.cursor/skills/`\n\n(or`npx cinematic-scroll-skill --dir .cursor/skills`\n\n)**Hermes Agent**—`hermes skills install MustBeSimo/cinematic-scroll-skill`\n\n(repo form — pulls the full multi-file skill, including`references/`\n\n,`templates/`\n\n, and`tools/`\n\n), or`git clone`\n\nto`~/.hermes/skills/`\n\n**OpenClaw**— via[ClawHub](https://clawhub.ai), the OpenClaw skill registry:`clawhub install cinematic-scroll`\n\n(or`openclaw skills install git:MustBeSimo/cinematic-scroll-skill@main`\n\n)\n\nAfter 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.\n\nA closer look at some of the worlds from the gallery above — **single, build-free index.html files** (GitHub-Pages-native) running the skill's\n\n**Mode A** grammar: vanilla JS on\n\n`requestAnimationFrame`\n\nwith 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.\n\n|\n|\n\n**① 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).|\n|\n\n**③ 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).|\n|\n\n**⑥ 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`\n\n[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.)\n\n```\npython3 -m http.server 8099   # then open /examples/renaissance/ · /studio/ · /noir/ · /luxe/ · /pop/\n```\n\n**Under the motion, every chapter ships with:**\n\nCinematic depth |\n5–7 parallax layers per chapter, perspective camera, dolly-back transitions |\nEditorial type |\nOversized titles with word-stagger / clip-path mask / letter-spacing-scrub reveals |\nAtmosphere morphs |\nBackgrounds crossfade between chapter color-worlds as you scroll |\nImage pipeline |\nOptional: 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. |\nBulletproof basics |\nReduced-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. |\n\nA single ** scroll-choreography.json** now compiles to\n\n**the website**— same beats, same easings, same depth choreography. Rebrand your site, and the video rebrands itself.\n\n*and*its launch film\n\n```\nnode compile-choreography.mjs scene.json --target web     # → GSAP ScrollTrigger page\nnode compile-choreography.mjs scene.json --target video   # → paused timeline for HyperFrames / Remotion\nnode compile-choreography.mjs scene.json --harness --out preview.html   # → watch it move, zero install\nnode compile-choreography.mjs scene.json --target hyperframes           # → render-ready composition → MP4\n```\n\nThe web target is scroll-driven and responsive; the video target is a\ndeterministic 16:9 timeline for HTML-to-video renderers — directed by\n, the brand spec that translates this design system\nfor the frame. The\n\n`FRAME.md`\n\n`--harness`\n\nflag emits a self-contained preview HTML with\nplay/scrub controls so you can watch any choreography in a plain browser.Same DOM contract (`[data-chapter]`\n\n/ `[data-layer]`\n\n/ `[data-title]`\n\n) serves\nboth targets. Full mapping table + Remotion adapter:\n[ scroll-choreography-compilation.md](/MustBeSimo/cinematic-scroll-skill/blob/main/scroll-choreography-compilation.md) ·\nmixing strategy (HyperFrames × Remotion):\n\n`video/PIPELINE.md`\n\nReference film projects — both stacks, ready to render:\n\n| Film | Stack | Length | What it covers |\n|---|---|---|---|\n`video/ship-in-5/` |\n\n`video/flagship-3d/`\n\n**real captures of the live route**(hero frame, virtual-time scroll-through, concept→mesh, the spotlit dancer)`video/doctor/`\n\n**\"Scored\"**— the cinematic-doctor film: the scan, the 0–100 score landing, the CI gate blocking a 64 and stamping an 87 PASS`Promo`\n\n+ `TwoMedia`\n\n+ `Flagship3D`\n\n+ `Doctor`\n\nin `video/`\n\n`npm run render:flagship`\n\n), and the doctor quality-gate film (`npm run render:doctor`\n\n)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.\n\n\"Use cinematic-scroll to build a self-contained HTML pinned hero chapter for [YOUR BRAND]. Include a progress HUD.\"\n\nYou get one runnable `.html`\n\nfile. Open it. Done.\n\n\"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.\"\n\nThen, in the scaffolded project:\n\n```\nnpm install\nnpm run dev\n```\n\nOpen `http://localhost:3000`\n\n— a full 8-chapter cinematic page, CSS-only visuals, **zero AI setup**.\n\nWant 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`\n\nand current fal.ai pricing before running a batch.\n\n```\nnpm run setup        # interactive key wizard → writes .env.local\nnpm run generate     # generates all chapter heroes into public/generated/\n```\n\nFull walkthrough: [ examples/GETTING_STARTED.md](/MustBeSimo/cinematic-scroll-skill/blob/main/examples/GETTING_STARTED.md). Model menu + costs:\n\n[.](/MustBeSimo/cinematic-scroll-skill/blob/main/MODELS.md)\n\n`MODELS.md`\n\n```\ncinematic-scroll-skill/\n├── SKILL.md                  # the agent contract (Mode A + Mode B). For Claude, not humans.\n├── README.md                 # you are here\n├── design.md                 # ✦ the design contract — token roles, motion, banned patterns\n├── tokens/                   # ✦ DTCG design tokens (core · motion · semantic) + build/ (emitted CSS/TS)\n├── themes/                   # ✦ visual systems as one-file theme overlays (author more)\n├── components/               # ✦ named component library — Mode A .html + Mode B .tsx + manifest.json\n├── evals/                    # ✦ triggering set + golden-output evals + runner\n├── REVIEW.md                 # ✦ adversarial self-review ledger (50 findings + status)\n├── COMPATIBILITY.md          # platform installation & verification (Claude, Cursor, Hermes, OpenClaw)\n├── LICENSE                   # MIT\n├── manifest.json             # skill metadata (free)\n├── MODELS.md                 # fal.ai model menu, costs, when-to-use\n├── ASSETS-3D.md              # 3D asset hand-off: generate → compress → normalize → manifest\n├── compile-choreography.mjs  # ✦ scroll-choreography.json → page / film / preview\n├── scroll-choreography.json  # the declarative choreography schema + example\n├── FRAME.md                  # brand spec for video agents (the frame translation)\n├── taste-guardrails.md       # banned patterns, cinematic vocabulary, pacing rules\n├── references/               # scroll patterns · film archetypes · component grammar · design tokens · perf · 3d · webxr\n├── tools/cinematic-doctor/   # ✦ the 0–100 quality gate (taste·perf·a11y·mobile·tokens·3D, CI-blockable)\n├── tools/                    # ✦ check-tokens · check-themes · check-links · check-consistency · build-tokens · verify · skill-sync\n├── video/                    # PIPELINE.md (HyperFrames × Remotion) + the film projects\n│   ├── src/                  # Remotion: Promo · TwoMedia · Flagship3D · Doctor\n│   ├── ship-in-5/            # HyperFrames: the 60s launch guide\n│   ├── flagship-3d/          # HyperFrames: \"Four Movements\" (the 3D flagship film)\n│   └── doctor/               # HyperFrames: \"Scored\" (the quality-gate film)\n├── examples/\n│   ├── PROMPTS.md            # 20+ trigger prompts across aesthetic worlds\n│   ├── GETTING_STARTED.md    # fal.ai setup, troubleshooting, queue+webhook\n│   ├── KNOWN_ISSUES.md       # QA log of real failure modes + fixes\n│   ├── renaissance/          # Mode A example — warm classical editorial\n│   ├── studio/               # Mode A example — brutalist creative-director portfolio\n│   ├── noir/                 # Mode A example — signal clean / editorial sci-fi (VANTASCOPE)\n│   ├── luxe/                 # Mode A example — quiet luxury (Maison Solenne)\n│   ├── pop/                  # Mode A example — Gen-Z pop (BLOOM)\n│   └── flagship/             # the 3D/WebXR flagship — four chapters, four 3D modalities\n└── templates/nextjs/         # tested, copy-verbatim Next.js App Router project\n    ├── app/ (+ /flagship route, api/fal/*, generate-edition-asset)\n    ├── components/ (ChapterScene, EditionsPage, flagship/ — chapters + fx layer)\n    ├── lib/ (editions-manifest, flagship-manifest, normalize-model, fal-*, use-lenis)\n    ├── scripts/ (setup.mjs, generate-chapter-assets.mjs, generate-flagship-assets.mjs)\n    └── package.json, tailwind.config.ts, tsconfig.json, FLAGSHIP.md, …\nnpm install choreo-3d framer-motion gsap @gsap/react lenis @fal-ai/client @fal-ai/server-proxy\n```\n\nThe motion primitives target the [ choreo-3d](https://www.npmjs.com/package/choreo-3d) package, with a built-in\n\n**vanilla fallback**(sticky + IntersectionObserver + rAF) for sandboxes where npm packages can't be installed — identical math, same keyframes.\n\n**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://`\n\nwith zero build, and gracefully fall back to CSS-only rendering if the CDN is unavailable. (A few examples load *external* files — `flagship`\n\nand `studio`\n\nkeep their JS in a sibling `.js`\n\n, and the 3D fly-throughs `aureus`\n\n/`gallery`\n\n/`jungle`\n\nplus `atelier`\n\nload image textures — so the browser's `file://`\n\ncross-origin policy blocks them; serve those over a local server instead: `python3 -m http.server`\n\nin the repo, then open `http://localhost:8000/examples/<name>/`\n\n.) 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.\n\nThe 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.\n\nMIT © 2026 Simone Leonelli — see [LICENSE](/MustBeSimo/cinematic-scroll-skill/blob/main/LICENSE).\n\nBuilt something with it? I'd genuinely love to see it: [simone@w230.net](mailto:simone@w230.net)", "url": "https://wpnews.pro/news/cinematicbench-a-reproducible-benchmark-for-scroll-craft", "canonical_source": "https://github.com/MustBeSimo/cinematic-scroll-skill", "published_at": "2026-07-22 05:19:32+00:00", "updated_at": "2026-07-22 05:52:21.984416+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "generative-ai"], "entities": ["Simone Leonelli", "CinematicBench", "Cinematic Scroll Skill", "Claude", "Cursor", "Hermes", "OpenClaw", "Cinematic Scroll Studio"], "alternates": {"html": "https://wpnews.pro/news/cinematicbench-a-reproducible-benchmark-for-scroll-craft", "markdown": "https://wpnews.pro/news/cinematicbench-a-reproducible-benchmark-for-scroll-craft.md", "text": "https://wpnews.pro/news/cinematicbench-a-reproducible-benchmark-for-scroll-craft.txt", "jsonld": "https://wpnews.pro/news/cinematicbench-a-reproducible-benchmark-for-scroll-craft.jsonld"}}