How do I install the Cinematic Scroll skill?

Run npx skillmds@latest add mustbesimo/cinematic-scroll-7 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

Design and build cinematic websites, interactive portfolios, product stories, and real-time 3D experiences with subject-specific art direction and scroll choreography. Use for new builds, redesigns, motion improvements, scroll audits, or storyboards in standalone HTML and existing apps; includes responsive, reduced-motion, and static fallbacks. Not for ordinary dashboards or unrelated animation.

MustBeSimo Updated Sep 22, 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-7description: Design and build cinematic websites, interactive portfolios, product stories, and real-time 3D experiences with subject-specific art direction and scroll choreography. Use for new builds, redesigns, motion improvements, scroll audits, or storyboards in standalone HTML and existing apps; includes responsive, reduced-motion, and static fallbacks. Not for ordinary 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