Web Design Studio — скилл

---
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, including entrance reveals, pinned chapters, scroll-scrubbed video, tilt cards, magnetic controls, kinetic text, Gaussian-splat scenes, and baked simulation or frame sequences in story pages, built on the host's own stack (GSAP, Motion, Anime.js, Lenis, Three.js, Rive, Lottie, physics engines); includes responsive, reduced-motion, and static fallbacks. Not for ordinary dashboards, video production, or unrelated animation.
metadata:
  version: 3.0.1
  openclaw:
    emoji: "🎬"
    homepage: https://github.com/MustBeSimo/web-design-studio
  hermes:
    tags: [Animation, Frontend, Design, 3D, Motion, GSAP, Parallax, WebGL]
---

# Web Design Studio

Build a distinctive experience whose motion explains the subject. The craft comes
from this skill; the visual identity comes from the user's brief and project. This
text-only edition needs no account, key, paid service, or specific animation library.

## Choose one route

For an audit-only request, use the scroll-audit skill when it is installed;
otherwise inspect and return findings without building. For direction or
storyboard only, use [story direction](references/story-direction.md).
Otherwise, read the [recipe catalog](references/recipe-catalog.md), then read **one** recipe:

- [Editorial story](references/editorial-story.md) for an image-led narrative,
  portfolio, longread, or campaign.
- [Product reveal](references/product-reveal.md) for a launch, mechanism,
  comparison, or object-focused story.
- [Real-time 3D](references/real-time-3d.md) for a GLB, procedural object,
  orbit, or camera flight.

When the brief or the host project names a library, engine, editor or production
tool, check the [stack shelf](references/stack-shelf.md) before adding a
dependency. Captured splat scenes and baked simulation or frame sequences have
their own references, reached from the catalog.

Companion skills: launch-page-strategy decides what the page must say and prove
before motion; scroll-audit scores an existing page.

For a repair, use the closest recipe only for the affected behavior. Do not tour
other references unless the chosen recipe identifies a concrete need. Preserve the
host framework, routes, styling, dependencies, content, and working interactions.
Prefer supplied assets and installed packages. Do not publish, deploy, install
packages, or send project content to a service unless that action is within the