cinematic-web-experience

Cinematic Web Experience

Overview

Use this skill when the user wants the kind of web experience that looks impressive in a short demo: full-screen composition, premium art direction, motion, depth, and a strong first-viewport reveal. This is for demo-worthy cinematic web experiences, not ordinary dashboards or static pages.

Start with beautiful-ui for product intent and visual direction, then use this skill to turn the direction into an implementable web experience. Pair with platform-web-ui for browser behavior and ui-verification before completion.

When To Trigger

• "Build something like this cinematic website."
• "Make a site that looks like a premium studio/portfolio."
• "Create a WebGL/Three.js landing page."
• "Make Claude build a wow-factor demo."
• "Add particles, bloom, glass, smoke, scroll animation, or interactive 3D."
• "Make this look like a viral AI-built website demo."

Required Workflow

1. Identify the cinematic promise in one sentence.
2. Define the first-viewport composition: subject, backdrop, focal point, lighting, navigation, and CTA.
3. Choose the motion model: ambient loop, pointer response, scroll reveal, scene transition, or staged sequence.
4. Select implementation primitives:
   • Start with the Cinematic Technology Ladder and choose the simplest primitive that can deliver the intended impact.
   • Use video, image sequences, Lottie, Rive, Spline, or pre-rendered assets when the scene is mostly atmospheric, decorative, or fixed.
   • Use Three.js, React Three Fiber, or custom shaders only when runtime interaction, procedural motion, 3D camera control, particle behavior, or scene composition truly requires it.
   • Use CSS and lightweight canvas only for simple particles or glow fields.
   • Use GSAP, Framer Motion, or existing project motion tools only when already available or clearly justified.
5. Design responsive fallbacks for mobile, reduced motion, slow devices, and non-WebGL browsers.
6. Implement a real first screen, not a marketing placeholder.
7. Verify with browser preview, Playwright screenshots, and a nonblank canvas/visual asset check.