语音客服落地页三维展示

Create a 14.5-second, cinematic 3D fly-through of my landing page at 1440×1152, 60fps.

Inputs: Landing page URL, brand name, logo mark, closing headline (a statement followed by a short italic tail), and optional 15-second music track.

Visual direction: Place the webpage flat on a clean studio floor (#f9fbfb center, #f2f3f6 corners), with 24px rounded corners and soft shadows. Use one continuous camera movement: glide smoothly from the hero down the entire page, with floating cards, product mockups, photos, chips, and testimonials lifting slightly toward the camera as it passes. Maintain cinematic depth of field, realistic shadows, and subtle 3D depth. Rise overhead to reveal the entire page as one strip, then dive back into the hero, transforming it into a floating card for the final title reveal.

Timeline: 0–8.2s: continuous fly-through. 7.75–9.25s: rise to overhead. 9.25–9.47s: hold the full-page view. 9.47–9.97s: dive into the hero. 9.97–14.5s: final title card with brand badge, headline, and italic tail. Use Geist Medium for the headline and Instrument Serif for the italic text. Keep four floating logo tiles around the hero throughout the transition.

Motion rules: Constant forward movement with smooth acceleration and deceleration only at the beginning and end. No cuts, crossfades, sudden speed changes, sideways camera rotations, zoom reversals, glow effects, or text overlays before the final title card. Keep most floating elements 20–40px above the page.

Build: Use Playwright and Chromium to capture the webpage at 1440px wide, extract individual floating elements with transparent backgrounds, and save their positions to JSON. Build a single WebGL2 scene with a time-seekable animation, realistic depth of field, mipmapped textures, soft shadows, and 16-subframe motion blur. Render the final video as H.264 MP4 at 60fps using GPU acceleration. Sync the music hit to 9.97s and add subtle whooshes at 8.66s and 9.80s.

Important: If you cannot execute code on my computer, be upfront that you can only provide a live preview here and that final MP4 rendering requires Claude Code. Lock the page layout before animation to prevent section-height changes from shifting the sequence. Test a 30fps preview with optical flow to ensure smooth forward motion and consistent zoom.

Workflow: First ask me for the required inputs. Capture the page and show me still previews at 0, 1.6, 2.5, 5, 6.5, 9.3, and 11 seconds. Get approval before rendering the final video.