---
name: cinematic-scroll
description: Build cinematic, scroll-driven websites — pinned chapter reveals, multi-depth parallax, 3D tilt, and environment-morphing backgrounds, from a single self-contained HTML section to a full Next.js release site. The motion grammar is the constant; the aesthetic is always the user's.
---

# 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.

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

- [`scroll-patterns.md`](../../../references/scroll-patterns.md) — 12 proven scroll patterns
- [`film-archetypes.md`](../../../references/film-archetypes.md) — 7 visual systems / film archetypes
- [`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).