# 007 · Wealthline — implementation prompt, v1.0.0

Integrate the supplied MotionVault React hero into my existing Lovable React project. Use the supplied source and media, rather than regenerating the design from this text.

Import Scene from src/Scene.jsx. Load design JSON with fetch('/templates/007-wealthline/design.json') and a loading/error state, following src/main.jsx. Render <Scene design={design} assetBase="/templates/007-wealthline" onAction={yourActionHandler} />. Include scene.css. The design JSON is the editable native element tree, not an image of the page. Route onAction labels to your actual navigation and CTA flows.

Files: src/HyperDrive.jsx + src/hyperdrive.css for HyperDrive; src/Scene.jsx + src/scene.css + design.json for the other scenes. Copy this template's public/templates/007-wealthline/ folder into public/templates/007-wealthline/ in the target project. Keep all relative asset filenames. Read the supplied code before changing it.

Figma desktop: https://www.figma.com/design/ws4VvzS8mlxVIs6YccMpaY/?node-id=18-5545
Figma mobile: https://www.figma.com/design/ws4VvzS8mlxVIs6YccMpaY/?node-id=18-5597
Figma delivery kit: https://www.figma.com/design/ws4VvzS8mlxVIs6YccMpaY?node-id=110-1324

Use motion.mp4 ONLY in the designated image/video region. Keep all text, navigation, CTA controls, graphic vectors and cards as editable native React/HTML elements. Preserve each breakpoint's composition, masking and crop. For atlas/collage artwork preserve each tile's original background-size/background-position crop when showing the video. Do not turn the entire page into a video or screenshot.

Media: muted, playsInline, poster.jpg fallback. Respect prefers-reduced-motion. Pause off screen and in hidden tabs. Provide explicit pause/play/replay controls. Play once by default: a seamless loop has not been verified. Never label this MP4 a real draggable 3D model or a full 360-degree orbit. HyperDrive supports scrubbing the six-second cinematic clip; it does not expose a full 3D car.

The supplied implementation animates native UI entrances and hover states separately from the cinematic image. Use the supplied implementation as the behavior source of truth. Do not reinstate the older static-image distortion shader. Keep CSS scoped to the component. Preserve keyboard access and visible focus. Wire navigation and CTA callbacks to the target app, rather than leaving placeholder links.

Do not create authentication or subscription rules inside this hero. The platform must check Basic/Pro entitlements on the server before delivering private source bundles. Public asset paths here are for development previews and must be replaced by the platform's publishing/storage setup.

Validation: install with npm ci, run npm run build, check desktop and 390px mobile, play/pause/replay, failed-media fallback, reduced motion, navigation callbacks, and correspondence between the preview and the downloaded source. Do not claim Figma video import or production publication from a successful local build. Current Figma video status: desktop-and-mobile.