Mirage

# Mirage

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 studio that shoots impossible scenes in one continuous take. Everything is fixed to the viewport and a 900vh empty runway drives it. Three stacked canvases play the same 96-frame film, each one second ahead of the layer below. At one third of the scroll a second film layer opens as a widening box that rotates to −45° (a diagonal wipe) while its picture counter-rotates to stay upright. Between .43 and .77 a "Selected work" strip slides up, and its rows fly apart sideways. At two thirds a third layer wipes open full-frame. The "MIR*A*GE®" wordmark (script A) flies toward the viewer in 3D and is gone within the first 8% of the scroll, then returns at the end. A "Takes (01)" counter flies in and out the same way near the end.

Palette and type: --font-display: 'Anton', sans-serif` (wordmark, logo, section title, counter number), uppercase.; --font-script: 'Pinyon Script', cursive` (the A in MIRAGE, "(cut)"): always `line-height:0; --font-ui: 'Inter Tight', sans-serif` 400/500 (body and chrome)..
Font families: Anton, sans-serif` (wordmark, logo, section title, counter number), uppercase. / Pinyon Script, cursive` (the A in MIRAGE, (cut)): always `line-height:0 / Inter Tight, sans-serif` 400/500 (body and chrome)..
Font stylesheet: https://fonts.googleapis.com/css2?family=Anton&family=Pinyon+Script&family=Inter+Tight:wght@400;500&display=swap

## Layout and copy