# 023 · HyperDrive — 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 HyperDrive from src/HyperDrive.jsx and render <HyperDrive assetBase="/templates/023-hyperdrive" onConfigure={yourConfigureHandler} onReserve={yourReserveHandler} />. Include hyperdrive.css. Keep the two callbacks connected to real product flows. The included preview opens clearly labelled demo dialogs when callbacks are absent.

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/023-hyperdrive/ folder into public/templates/023-hyperdrive/ 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=47-15547
Figma mobile: https://www.figma.com/design/ws4VvzS8mlxVIs6YccMpaY/?node-id=47-15988
Figma delivery kit: https://www.figma.com/design/ws4VvzS8mlxVIs6YccMpaY?node-id=111-2719

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.