# Build Zapline — Find your edge

## Motion implementation and acceptance

Implement the interactions specified in the brief. The catalogue recording is a visual reference and the poster is a loading, error or reduced-motion fallback. Implement the moving scene separately from both.
- Catalogue recording (reference only): https://video.gumlet.io/6a7e9e0f2621db881577453e/6addb2f4d8b4449c83d1e3f5/main.mp4
- Poster (still fallback only): https://media.scrollhaus.ai/thumbs/zapline.d7e58186060b.webp
- Scene source · planet.mp4: https://media.scrollhaus.ai/sites/zapline/assets/planet.mp4?v=2

Additional source assets. For each grouped list, prepend its base URL to each filename or path exactly as written.
- Base URL https://media.scrollhaus.ai/sites/zapline/ → assets/planet-poster.webp?v=2 · assets/dashboard-glow.png

For scroll-scrubbed video, use a muted inline video, wait for loaded metadata, and map section progress in both directions to the video timeline. Seek when the target changes and coalesce seeks while one is pending. For a frame sequence, draw the indexed frame to canvas as scroll progress changes. For scripted, CSS or 3D motion, recreate the triggers and transforms in the brief. Use normal playback for clips described as loops.

Test at two different scroll positions and then scroll back. Confirm the video time and visible frame change, or confirm the specified canvas, CSS or 3D state changes. If a required source fails, report its URL and the missing motion before calling the build complete.

Build an original fictional trading-product hero with React, TypeScript, Vite and Tailwind. Use small editable components for navigation, planet film, hero, dashboard, chart and information dialogs. Reference https://scrollhaus.ai/sites/zapline/index.html and https://scrollhaus.ai/build-assets/zapline.json.

Use black #050507, warm ivory #f1f0e8, electric lime #d8ff77 and violet #a66cff. Use Space Grotesk for headings and Inter for the UI. Keep the lightning identity fictional. The main headline is Trade with clarity. / Move with conviction. Colour conviction and primary actions lime. Place a violet planetary rim at the top against static procedural stars. Animate the sky only through the supplied forward-looping video; never animate stars or rim in code. Keep a static poster on phones, reduced motion and media failure. Include a pause control and suspend playback in hidden tabs.

At desktop, use a centred 1672×941 stage scaled with min(viewport width/1672, viewport height/941). The dashboard rises from y=641 and continues to the lower edge. Coordinate CSS entrances for the nav, heading lines, lede, buttons and dashboard regions. Disable entrances for reduced motion.

Build a sidebar with Dashboard, Activity and Wallets controls that update the view heading and pressed state. Add a sample wallet connection toggle. Show clearly fictional volume and wallet figures, a violet SVG area chart and example execution metrics. Weekly/monthly controls update the figures, labels and chart path. Add pointer and keyboard chart tooltips. Do not imply actual returns, users or performance.

Navigation opens accessible native dialogs explaining features, referral placeholder, settings and the fictional demo. Get Started opens the demo introduction and focuses the dashboard control when dismissed. Nothing signs up, trades, transfers money or connects a wallet.

At widths below 900px or portrait orientation, use a scrolling stacked page, mobile menu and sidebar chips. Make the heading wrap naturally without clipping. Keep the dashboard readable on 390×844 phones, test every button, visible focus, Escape behavior, period switching, reduced motion and the video pause control. Use the absolute hosted media URLs from the asset map.