cinematic-scrolllisted

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/web-design-studio · ★ 34 · Web & Frontend · score 81

Install: claude install-skill MustBeSimo/web-design-studio

# 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`](../../../referenc