Orven

# Orven

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 minimal eyewear product page on a 12-column grid. A 1200vh hero pins two stacked full-screen videos that are scrubbed by setting currentTime from scroll with an eased lag. Phase 1 scrubs film 1 while the "Orven®" title cluster (big title, caption, info, meta) sits bottom-left/right. Its letters and words blur in on load and blur out near the end of the phase. Phase 2 cross-fades film 1 (blurring to 80px) into film 2. Phase 3 scrubs film 2 while two feature panels with spec rows travel up the screen, one on the right then one on the left, their text blurring in word by word. All overlay type uses mix-blend-mode:difference (white on whatever is behind). A hidden 12-column dev grid toggles with the G key.

Palette and type: --ease-expo: cubic-bezier(0.16, 1, 0.3, 1).
Font families: Inter Tight, sans-serif.
Font stylesheet: https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500&display=swap

## Layout and copy