Morphos

# Morphos

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 750vh page with one fixed full-screen WebGL canvas on near-black (#010001). Scroll moves through four additive-blended particle "anatomies", each built from point clouds, glowing synapse sprites and line networks: 1. a cyan wireframe-dot face mask (the opening), which balloons outward as you scroll; 2. a cyan/blue brain with synapses and connecting lines; 3. a red bone (dumbbell femur); 4. a violet skull. Each form grows in from tiny, holds, then blows up past the camera as the next arrives. A 14,000-particle spherical dust field drifts with noise around everything and changes palette per chapter (teal → cyan/violet → red → violet). The mouse is projected into the scene and pushes particles away with a rippling force. Copy panels in Anybody-styled type fade and slide per chapter, under a fixed corner nav.

Palette and type: --tw-font-weight: initial; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-weight-semibold: 600; --font-weight-bold: 700; --default-font-family: var(--font-sans).
Font families: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace.


## Layout and copy