# Build FREIGHT / FORWARD

## 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/6addab01d8b4449c83d1dd71/main.mp4
- Poster (still fallback only): https://media.scrollhaus.ai/thumbs/freight-forward.a980983b46ec.webp
- Scene source · e02bb27f-80d8-445f-a03e-1b609dac4261.mp4: https://media.scrollhaus.ai/sites/freight-forward/assets/e02bb27f-80d8-445f-a03e-1b609dac4261.mp4
- Scene source · e8eb434f-d097-4b1b-b9e6-c8b46fa43040.mp4: https://media.scrollhaus.ai/sites/freight-forward/assets/e8eb434f-d097-4b1b-b9e6-c8b46fa43040.mp4

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/freight-forward/ → assets/port.jpg · assets/terminal.jpg · assets/poster.jpg · assets/warehouse.jpg

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.

Create an original cinematic logistics website called Freight / Forward using React, TypeScript, Vite and Tailwind. Use small editable components for navigation, scroll film, chapters, photography, route explorer, services, approach and contact.

Reference: https://scrollhaus.ai/sites/freight-forward/index.html
Asset map: https://scrollhaus.ai/build-assets/freight-forward.json

Use charcoal #141516, warm white #f7f5ef, cloud grey #e2dedd and signal red #ee503b. Use Exo 2 for large editorial headings and Public Sans for body text. Start with an aerial freight train film and a left-aligned four-line heading: COMPLEX / CARGO. / CLEAR / DIRECTION. Make CLEAR red. Do not copy another carrier’s identity or make affiliation claims.

Scrub the supplied video with scroll progress; never play it automatically. Use a sticky full-height scene with a measured runway and three asymmetric text chapters: Start clear. Stay connected.; Many handoffs. One direction.; Make room for what’s next. Keep copy away from the train’s central axis on desktop. Map most of the copy to the first 46% of the film and let the final cloud rise carry the transition into the next section.

Follow with an editorial heading, THE WORLD DOESN’T MOVE IN STRAIGHT LINES., two asymmetric terminal/port photos, and sea/air/land controls that change route labels and explanatory copy. Label this route display as illustrative, not live tracking. Build a dark numbered service accordion for ocean, air, road/rail, customs and warehousing. Then show a wide warehouse photo, three practical steps and a large cream closing section.

Make the menu keyboard accessible with focus management and Escape support. The closing CTA opens a validated shipment-brief dialog. Generate a local TXT download without claiming the request has been sent to a server. Implement a reduced-motion static experience, 390px phone layouts, visible focus states, suitable alt text and responsive images. Preserve source video resolution. All assets must use absolute hosted URLs from the asset map. Verify forward and reverse scrubbing, route controls, menu, accordion and form on desktop and phone.