CinematicBench, a reproducible benchmark for scroll craft

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.

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