Axiom R9

# Axiom R9

Create a responsive React + TypeScript + Vite + Tailwind CSS website. Use small components for navigation, hero, interactive stage, content sections and footer. Put media URLs in src/lib/assets.ts and animations in cleaned-up hooks. Do not output a giant HTML file, an iframe, or a screenshot pretending to be the website.

## Design direction
A black, full-screen product film for a 6.1 kg road bike, driven by a 1250vh scroll runway. Three different clips, each a WebP frame sequence on its own canvas, take turns: clip 1 plays first; clip 2 wipes in from the right edge as a widening vertical panel; clip 3 rises from the bottom as a growing horizontal panel on white. Over the film, two "screens" of type (hero, then the spokeless wheel) fade in and out with a weight badge that drifts with parallax. Then a transparent cut-out of the bike fades in over the film, the film dissolves to white, the bike dives down and blurs away, and a centred specification sheet fades up. Every text element (.pol) samples the brightness of the frames behind it from a 32×18 probe canvas and flips its ink between white and near-black so it stays legible.

Palette and type: --font: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ease-expo: cubic-bezier(.16,1,.3,1); --ease-strong: cubic-bezier(.23,1,.32,1); --ink: color-mix(in srgb, var(--w), var(--k) calc(var(--pol) * 100%)); --ink-fade: color-mix(in srgb, var(--ink), var(--plate) 35%).
Font families: Inter Tight, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif.
Font stylesheet: https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500&display=swap

## Layout and copy