Build cinematic scroll-driven, 3D-tilt, parallax, and environment-morphing websites — pinned chapter reveals, hero parallax, depth-image figures, hover-tilt cards, background-morphing layouts, release/launch pages, product story pages, or editorial commerce microsites. From a single self-contained scroll section (Mode A) to a full Shopify-Editions-style Next.js release site with optional AI-generated visuals via the fal.ai remote API (Mode B — requires your own fal.ai key; makes outbound API calls to fal.ai). Includes an optional audit mode in which the agent analyzes a user-supplied URL using its own browser/fetch access and scores the scroll experience on 4 dimensions (Pacing, Performance, Accessibility, Emotional Arc). Works through an optional 5-phase pipeline (cinematic audit → motion storyboard → technical spec → build → polish) with taste guardrails, 12 proven scroll patterns, 11 visual systems, and a transform/opacity performance budget as built-in craft constraints. Advanced capabilities are user-initiated, not absent: WebXR/AR sessions are feature-gated and only start on an explicit user action (an Enter VR/AR button that appears solely when the device reports support), and 3D GLB generation lives in the Mode B Next.js template (templates/nextjs/scripts/generate-flagship-assets.mjs, run with your own fal.ai key) — see activation guidelines below.
How to install cinematic-scroll-skill?
mustbesimo/cinematic-scroll-skill
$npx -y skills add mustbesimo/cinematic-scroll-skill --skill cinematic-scroll-skillInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/mustbesimo/cinematic-scroll-skill" --skill "mustbesimo/cinematic-scroll-skill"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/mustbesimo/cinematic-scroll-skill" that are relevant to the current task. Run `npx skills add "https://github.com/mustbesimo/cinematic-scroll-skill"` and select the relevant skills, then follow their instructions.
SKILL.md
| 1 | # Cinematic Scroll |
| 2 | |
| 3 | ### One sentence in. A cinematic, scroll-driven website out. |
| 4 | |
| 5 | [](https://www.npmjs.com/package/cinematic-scroll-skill) |
| 6 | [](https://skills.sh/search?q=cinematic-scroll) |
| 7 | [](#install) |
| 8 | [](./LICENSE) |
| 9 | [](https://github.com/MustBeSimo/cinematic-scroll-skill/actions/workflows/ci.yml) |
| 10 | [](https://github.com/MustBeSimo/cinematic-scroll-skill/stargazers) |
| 11 | |
| 12 | <!-- hero reel as an animated GIF — GitHub READMEs animate <img> GIFs (relative-path <video> does NOT render) --> |
| 13 | <a href="https://mustbesimo.github.io/cinematic-scroll-skill/"><img src="assets/eleven-worlds-hero.gif" alt="Cinematic Scroll in motion — the launch reel flying through eleven aesthetic worlds from one engine" width="100%"></a> |
| 14 | |
| 15 | <h2 align="center"> |
| 16 | <a href="https://mustbesimo.github.io/cinematic-scroll-skill/">🌐 Live demo — cinematic-scroll-skill.github.io</a> |
| 17 | </h2> |
| 18 | <p align="center"> |
| 19 | Built <em>with the skill itself</em> · adapts to your GitHub theme: dark → <strong>Petroleum Editorial</strong>, light → <strong>Swiss Museum</strong><br> |
| 20 | <a href="https://mustbesimo.github.io/cinematic-scroll-skill/#how">▶ Watch the 30-second demo</a> · |
| 21 | <a href="#flagships">⚡ Four real-3D flagships, live ↓</a> |
| 22 | </p> |
| 23 | |
| 24 | **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. |
| 25 | |
| 26 | > **New in v2.6.0 — the skill can now *learn*.** A new **Learn mode** ([`learn-mode.md`](./learn-mode.md)) distills sites you own or are authorized to study into original, reusable, IR-validated recipes on a pointer-first **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 to **audit mode**: audit *scores* a URL, learn *distills* it — and both now share one detection pipeline. This release ships the **compiler core** (Phase 1: Pattern-IR gate, four zero-dep tools, CI-enforced shelf integrity, tag-based dedup — no embeddings) — a free *preview* of the Motif Engine. The learned shelf ships **empty**; the full self-learning engine is paid (see *Upgrade* below). |
| 27 | |
| 28 | > **New — [CinematicBench](https://mustbesimo.github.io/cinematic-scroll-skill/bench/).** A reproducible, passive benchmark of scroll craft: 61 well-known sites scored 0–100 on Pacing / Performance / Accessibility / Motion Craft by a deterministic rubric ([methodology](./tools/bench/README.md)). Score your own site: `npx -p cinematic-scroll-skill cinematic-bench <url>` — same rubric family as the skill's [taste engine](./bench-mode.md). |
| 29 | |
| 30 | > **⬆ Upgrade — Cinematic Scroll Studio ($149, pay once).** **Your agent forgets.** Every new project it re-derives your taste from scratch. Studio gives it **memory** — 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 skill *builds and scores*; Studio *remembers and compounds* — the one thing a template marketplace can't sell you: your own accumulated style. [**Get Studio — $149**](https://buy.stripe.com/cNi7sLdNBbief0L0uFfnO09) · [how it fits the stack](https://mustbesimo.github.io/cinematic-scroll-skill/stack/). |
| 31 | |
| 32 | > **New in v2.4.0 — a machine-readable design system under the hood.** A DTCG **token contract** (`design.md` + `tokens/`), **visual systems** as one-file themes (swap one, or author your own), and a **9-component library** (Mode A `.html` + Mode B `.tsx`) make output deterministic and gated, not improvised — hardened by an adversarial self-review ([`REVIEW.md`](./REVIEW.md)). See **[Design system](#-design-system-one-token-contract--a-living-system--a-component-library)** below. |
| 33 | |
| 34 | > **Free for any use, personal or commercial (MIT).** Actively developed — built from production work and shipped open source. [Issues](https://github.com/MustBeSimo/cinematic-scrol |
Related
6 picksType
- web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site…Jul 2026
- prototypeBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a…Jul 2026
- lark-whiteboard飞书画板：查询和编辑飞书云文档中的画板。支持导出画板为预览图片、导出原始节点结构、使用多种格式更新画板内容。 当用户需要查看画板内容、导出画板图片、编辑画板时使用此 skill。不负责：飞书云文档内容编辑（lark-doc）、文档内嵌电子表格/Base（lark-sheets / lark-base）。Jul 2026
- ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX…Jul 2026
- design-guidePaperclip UI design system guide for building consistent, reusable frontend components.Jul 2026
- impeccableUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or…Jul 2026
