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.
Installs into .claude/skills of the current project.
Are you the author of Cinematic Scroll?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/mustbesimo-cinematic-scroll-cinematic-scroll-skill)
---
name: cinematic-scroll
description: 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-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`](../../../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`](../../../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 degradation
Taste rules: [`../../../taste-guardrails.md`](../../../taste-guardrails.md).
Trigger prompts: [`../../../examples/PROMPTS.md`](../../../examples/PROMPTS.md).
