How do I install the Cinematic Scroll skill?

Run npx skillmds@latest add mustbesimo/cinematic-scroll-3 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Cinematic Scroll safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Cinematic Scroll?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Cinematic Scroll free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Cinematic Scroll?

MustBeSimo (@mustbesimo) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Cinematic Scroll by mustbesimo — Agent Skill

Name: Cinematic Scroll
Author: MustBeSimo

Cinematic Scroll

Build or improve cinematic websites with scroll-driven storytelling, pinned reveals, parallax, kinetic type, and optional 3D. Deliver standalone HTML or integrate into an existing app, with mobile and reduced-motion fallbacks and browser evidence. Also supports scroll audits and motion storyboards. Use for cinematic web work, not ordinary forms, dashboards, or unrelated animation.

MustBeSimo 76c2c2d 2.2 KB Updated Sep 17, 2026

File contents

cinematic-scroll (pointer)

The cinematic-scroll skill gives an agent the taste to build cinematic, scroll-driven websites: pinned chapters, hero/multi-depth parallax, scroll-linked 3D tilt and camera moves, and environment-morphing backgrounds — from a single self-contained .html section (Mode A) to a full Next.js release site with optional AI-generated visuals (Mode B). Reach for it whenever the user asks for a scroll-driven or cinematic site, pinned/sticky sections, parallax, a product story page, an editorial microsite, or a release/launch/drop page.

Canonical instructions: ../../../SKILL.md — the single source of truth. Read it in full before building. This file is only a pointer; do not duplicate SKILL.md content.

Use the project's existing design system or adapt the bundled token contract: ../../../design.md + ../../../tokens/; 11 visual systems as machine themes in ../../../themes/.

Deep references (../../../references/):

scroll-patterns.md — 12 proven scroll patterns
film-archetypes.md — 11 visual systems / film archetypes
component-grammar.md — named, token-driven components (Mode A + Mode B)
design-tokens.md — the DTCG token reference
performance-budget.md — transform/opacity budget + pre-launch checklist
mobile-motion.md — mobile motion + reduced-motion degradation

Taste rules: ../../../taste-guardrails.md. Trigger prompts: ../../../examples/PROMPTS.md.

---name: cinematic-scroll-3description: Build or improve cinematic websites with scroll-driven storytelling, pinned reveals, parallax, kinetic type, and optional 3D. Deliver standalone HTML or integrate into an existing app, with mobile and reduced-motion fallbacks and browser evidence. Also supports scroll audits and motion storyboards. Use for cinematic web work, not ordinary forms, dashboards, or unrelated animation.---# cinematic-scroll (pointer)The `cinematic-scroll` skill gives an agent the taste to build cinematic,scroll-driven websites: pinned chapters, hero/multi-depth parallax, scroll-linked3D tilt and camera moves, and environment-morphing backgrounds — from a singleself-contained `.html` section (Mode A) to a full Next.js release site withoptional AI-generated visuals (Mode B). Reach for it whenever the user asks for ascroll-driven or cinematic site, pinned/sticky sections, parallax, a productstory page, an editorial microsite, or a release/launch/drop page.**Canonical instructions: [`../../../SKILL.md`](../../../SKILL.md)** — the singlesource of truth. Read it in full before building. This file is only a pointer; donot duplicate SKILL.md content.Use the project's existing design system or adapt the bundled token contract:[`../../../design.md`](../../../design.md) + [`../../../tokens/`](../../../tokens/);11 visual systems as machine themes in [`../../../themes/`](../../../themes/).Deep references (`../../../references/`):- [`scroll-patterns.md`](../../../references/scroll-patterns.md) — 12 proven scroll patterns- [`film-archetypes.md`](../../../references/film-archetypes.md) — 11 visual systems / film archetypes- [`component-grammar.md`](../../../references/component-grammar.md) — named, token-driven components (Mode A + Mode B)- [`design-tokens.md`](../../../references/design-tokens.md) — the DTCG token reference- [`performance-budget.md`](../../../references/performance-budget.md) — transform/opacity budget + pre-launch checklist- [`mobile-motion.md`](../../../references/mobile-motion.md) — mobile motion + reduced-motion degradationTaste rules: [`../../../taste-guardrails.md`](../../../taste-guardrails.md).Trigger prompts: [`../../../examples/PROMPTS.md`](../../../examples/PROMPTS.md).

Frequently asked questions