KELPWARE — Interfaces that grow

# KELPWARE — Interfaces that grow

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 builds animated dashboards, players and data views. A fixed canvas scrubs a 287-frame film of an interface "plant" taking root and blooming, from the top of the page to the start of the solid sections. A virtual camera holds tight on the plant, pulls out to the whole scene, then pushes back in, with a slight pointer parallax. Three full-height "beats" carry dark glass copy cards (alternating left/right) whose headline words rise from masks; a three-segment progress rail on the right fills as you go. After the film: a marquee, four tilting service cards with live SVG mini-visualisations, counting stats, a four-step process and a closing CTA.

Palette and type: --ink: #0f0e0b; --ink2: #1a1813; --paper: #f4ecd6; --disp: "Bricolage Grotesque", system-ui, sans-serif; --pad: clamp(18px, 4vw, 64px); --ease: cubic-bezier(.2,.8,.2,1).
Font families: Bricolage Grotesque, system-ui, sans-serif / Geist Mono, ui-monospace, monospace.
Font stylesheet: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,500;12..96,700;12..96,800&family=Geist+Mono:wght@400;500&display=swap

## Layout and copy