# Cinematic Scroll ### One sentence in. A cinematic, scroll-driven website out. [![npm version](https://img.shields.io/npm/v/cinematic-scroll-skill?style=flat-square&logo=npm&label=npm&color=cb3837)](https://www.npmjs.com/package/cinematic-scroll-skill) [![Install via skills.sh](https://img.shields.io/badge/install-skills.sh-2563eb?style=flat-square)](https://skills.sh/search?q=cinematic-scroll) [![Works with Claude · Cursor · Hermes](https://img.shields.io/badge/works%20with-Claude%20%C2%B7%20Cursor%20%C2%B7%20Hermes-7c5cff?style=flat-square)](#install) [![License: MIT](https://img.shields.io/badge/license-MIT-22c55e?style=flat-square)](./LICENSE) [![GitHub stars](https://img.shields.io/github/stars/MustBeSimo/cinematic-scroll-skill?style=flat-square&color=f5b301&label=stars)](https://github.com/MustBeSimo/cinematic-scroll-skill/stargazers)

Cinematic Scroll — a free Agent Skill for scroll-driven websites. Two finishes: Petroleum Editorial (dark) and Swiss Museum (light).

👉 **[Visit the live landing page](https://mustbesimo.github.io/cinematic-scroll-skill/)** — built *with the skill itself*. It adapts to your GitHub theme: dark → **Petroleum Editorial**, light → **Swiss Museum**. ▶ **[Watch the 30-second demo →](https://mustbesimo.github.io/cinematic-scroll-skill/#how)** — one sentence in, a cinematic scroll site out.

The scroll grammar in motion — pinned chapters, multi-depth parallax, and a tracking index rail

_{↑ The motion is the skill — pinned chapters, multi-depth parallax, mask/stagger title reveals, a tracking index rail. The look is whatever you ask for. This clip happens to be a Renaissance editorial; the same grammar drives a brutalist drop, a neon Gen-Z launch, a noir game page, or your brand. Scroll it 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. > **Free for any use, personal or commercial (MIT).** Actively developed — built from production work and shipped open source. [Issues](https://github.com/MustBeSimo/cinematic-scroll-skill/issues), PRs, and [showcase submissions](https://github.com/MustBeSimo/cinematic-scroll-skill/issues/new?title=Showcase:%20) welcome — I collect what people build. Built by [Simone Leonelli](https://w230.net) · [simone@w230.net](mailto:simone@w230.net) --- ## Get started — two paths 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. --- ## Install Pick whichever channel fits your client. All four install the same skill. ### Claude Code — plugin marketplace (recommended for Claude Code) ```bash /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`. ### Any client — npx installer ```bash npx cinematic-scroll-skill # copies the skill into ~/.claude/skills/cinematic-scroll npx cinematic-scroll-skill --dir .cursor/skills # or a custom skills directory ``` ### Any client — git clone ```bash git clone https://github.com/MustBeSimo/cinematic-scroll-skill ~/.claude/skills/cinematic-scroll ``` ### Registries ```bash npx skills add MustBeSimo/cinematic-scroll-skill # skills.sh ``` Also listed on **[agentskills.io](https://agentskills.io)** (search "cinematic-scroll"). ### Platform-specific Paths vary by client — see [`COMPATIBILITY.md`](./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** — `git clone` to `~/.hermes/skills/` - **OpenClaw** — `openclaw skills install git:MustBeSimo/cinematic-scroll-skill@v2.1.0` ### Quick start After installing, describe what you want to build in chat — see [`examples/PROMPTS.md`](./examples/PROMPTS.md) for 20+ copy-paste examples across aesthetic worlds. --- ## Live examples — five scrollable worlds, one grammar Same engine, deliberately clashing aesthetics — five **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. All five retain a dependency-free core; Noir, Luxe, and Pop progressively enhance one showcase beat with deferred GSAP + ScrollTrigger (loaded from CDN with vanilla fallback). All five render fully with **zero image files** (CSS-only placeholders that upgrade when you add stills). Proof the look is a variable, not a default.


① Renaissance editorial → _{Warm, classical, ornate. Oil-painting heroes, gold↔oxblood morph, serif display. Mirrors the production edition at w230.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.}


③ Sci-fi noir → _{Studio VANTASCOPE, title HOLLOW STAR. Near-black void, deep-teal fog, crimson edge-light, film grain. 4 chapters, scroll-linked 3D camera, vertical mask-wipe title reveals. Source.}	④ 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.}	⑤ Gen-Z pop → _{App BLOOM. Candy-pink + electric-lime gradients, bold rounded type, fast parallax, floating CSS phone-UI. Source.}

**Same motion grammar; any aesthetic.** These five show different visual directions the skill can art-direct — change the copy, palette, and references, and the same engine produces any world you describe. This isn't an exhaustive list of *styles* (the styling is infinite). It's a proof that the cinematic *motion* is the constant, and the *look* is whatever you ask for. ### Aesthetic directions Beyond these five live examples, the skill can art-direct itself into any visual world. Below are six concept *style directions* to illustrate the range:

_{Brutalist — stark, grid-driven}	_{Quiet luxury — earth palette, space}	_{Pop — neon, playful}
_{Sci-fi noir — teal, edge-lit}	_{Wellness — blush, painterly}	_{Retro archive — amber, analogue}

_{Six style directions generated by the skill's own [fal.ai](https://fal.ai) pipeline (or bring your own images / go CSS-only at $0). These are concept stills that show possible aesthetic ranges — the five live examples above are the scrollable proofs.} ### Running locally ```bash 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. | --- ## Quickstart ### Mode A — instant scroll section > *"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. ### Mode B — full release site > *"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: ```bash 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. ```bash 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`](./examples/GETTING_STARTED.md). Model menu + costs: [`MODELS.md`](./MODELS.md). --- ## What's in the box ``` cinematic-scroll-skill/ ├── SKILL.md # the agent contract (Mode A + Mode B). For Claude, not humans. ├── README.md # you are here ├── 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 ├── 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 — sci-fi noir (VANTASCOPE) │ ├── luxe/ # Mode A example — quiet luxury (Maison Solenne) │ └── pop/ # Mode A example — Gen-Z pop (BLOOM) └── templates/nextjs/ # tested, copy-verbatim Next.js App Router project ├── app/ (+ api/fal/*, generate-edition-asset) ├── components/ (ChapterScene, ChapterDemoVisual, EditionsPage, SmoothScrollProvider) ├── lib/ (editions-manifest, fal-*, prompt-contract, use-lenis, use-device) ├── scripts/ (setup.mjs, generate-chapter-assets.mjs) └── package.json, tailwind.config.ts, tsconfig.json, … ``` ## Peer dependencies (in the consuming app) ```bash 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 Mode A files run from `file://` with zero build, and gracefully fall back to CSS-only rendering if the CDN is unavailable. 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. --- ## Originality & legal 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. ## License MIT © 2026 Simone Leonelli — see [LICENSE](./LICENSE). Built something with it? I'd genuinely love to see it: **simone@w230.net**