VESPER ATLAS

# VESPER ATLAS

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
An imagined atlas of three worlds. A 570vh scroll runway holds a sticky stage with a star field and a planet. Scrolling moves the planet from world 01 (Serein, violet) to 02 (Thalassa, teal ocean with cloud) to 03 (Cinder, amber desert); at the end of each stretch an "aperture" (a round-edged portal outline) widens to fill the screen and reveals the next world's backdrop. Captions, facts and a counter update as the world changes. Below the stage: a manifesto, a field atlas with three world rows (each with a rendered planet), and a closing lime panel. A header nav and a loader ("Mapping the unfamiliar") frame the page.

Palette and type: --bg: #101310.
Font families: Instrument Serif,Georgia,serif.
Font stylesheet: https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap

## Layout and copy