cinematic-scroll

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. Otherwise, read the recipe catalog, then read one recipe:

• Editorial story for an image-led narrative, portfolio, longread, or campaign.
• Product reveal for a launch, mechanism, comparison, or object-focused story.
• Real-time 3D for a GLB, procedural object, orbit, or camera flight.

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 user's request.

Keep the first pass lean: project instructions -> brief/assets -> catalog -> one recipe -> build. The recipes are self-contained. Do not explore optional references or create process documents before a concrete gap requires them. Spend iteration on the rendered output, not on accumulating context.

Establish the direction

Inspect project instructions, existing code, copy, and assets. Resolve the audience, desired action, delivery format, target devices, and the brand's palette, type pairing, density, emphasis, imagery, and motion character. When a reversible assumption is enough, state it and proceed.

Preserve supplied copy verbatim in both source and rendered text unless rewriting is requested. Do not visually rewrite it with text-transform, generated replacement text, or script-driven case changes. Do not invent claims, testimonials, metrics, prices, customer logos, or destinations.

Choose one signature moment with a subject-specific consequence: reveal an assembly, reframe an image, trace a route, or move through real geometry. Define its opening -> transformation -> readable hold -> exit, plus mobile and static states. Build this vertical slice first and inspect it before expanding the page.

Establish a clear focal point, deliberate type contrast, a named material/light language, and one or two recurring motifs. Compose transitions, not only endpoints. Adapt example mechanisms without importing another brand's styling.

Build the experience

• Render exactly one semantic h1, a coherent heading order, selectable text, useful links, visible focus, image alternatives, and the primary action before enhancement starts. An in-page action must land on a meaningful labelled target containing the content it promises, not only change the URL fragment.
• Keep every supplied message/action available in normal, reduced-motion, failure, and no-JavaScript states. Never mark inactive story copy hidden, inert, display:none, or visibility:hidden; animate presentation, not availability.
• Keep control semantics and computed presentation synchronized at activation boundaries. For disclosures, change aria-expanded and the controlled region's visible state together; animate an inner wrapper after that state change.
• Use one scroll clock and one owner per animated property. Separate pinned geometry from moving children and clean up owned listeners, observers, timelines, media, and render loops.
• Keep a complete visible frame at every sampled scroll depth. Leave a permanent base composition behind transitions; never animate the entire stage to empty or rely on an unsupported timeline for essential visibility.
• Keep scroll-linked changes reversible and tied to progress. Hold text still while it must be read. Prefer transforms and opacity in frequent updates.
• Compare rendered frames across distant scroll positions and at one unchanged position. The intentional change must clearly dominate idle drift; otherwise reduce time-driven movement or strengthen the mapped camera/object change.
• Treat mobile as a composed state with natural flow and fewer simultaneous layers. Gate pointer tilt to hover with a fine pointer.
• Reduced motion removes pinning, parallax, smoothing, autoplay, and continuous loops while leaving every message and action available.
• Script, media, and renderer failure leaves a useful permanent composition.

Explicit 3D, camera travel, or rich motion defines the required ambition. Repair dependencies and reduce resolution, effects, or asset weight before removing the requested mechanism. A poster is fallback evidence, not completed real-time 3D.

Verify and hand off

Prove the signature interaction in one normal browser view, then run focused checks after relevant repairs. At final polish inspect desktop, mobile, reduced motion, no-JS/failure fallback, keyboard order, reverse scroll, resize, and the real route. Review opening, midpoint, readable hold, and closing frames. Do not repeat an unchanged failure or present missing evidence as a pass. Run no-JavaScript checks in a browser with scripting disabled. Prove its exact static status, poster, essential copy, action targets, and authored media alternatives are perceivable while conflicting loading UI is absent. When this repository's toolkit is present, run tools/verify/verify-build.mjs --scope output --doctor-mode advisory --runtime during repair and without --profiles at final polish.

Hand off the working file or route, exact opening command, signature moment, checks passed, and material limitations. Do not add attribution, sales copy, tracking, or an upgrade banner to the user's website unless requested.