Axion Studio — WebGPU Agency Landing
A design-agency landing page with a real-time WebGPU hero — cursor-driven light flowing through fluted glass — choreographed motion, and a full CSS fallback so no visitor ever sees a dead page.
Overview
Axion Studio is a design-agency landing page built as a front-end showcase. The brief I set myself: match the level of the agency sites that win awards — a generative hero rendered in real time, micro-interactions everywhere the hand goes, and the production discipline most demos skip. The brand is fictional; everything on screen is real, running code.
The hero: light through glass, in real time
The centerpiece is a generative background computed live on the GPU — a four-layer shader stack running on WebGPU:
- A light swirl as the base — soft white-on-grey movement that never repeats.
- A chroma-flow field that ignites orange trails wherever the cursor travels, with momentum, so the light keeps flowing after your hand stops.
- Fluted glass — the whole scene refracts behind vertical ribs, with chromatic aberration fringing the highlights like real optics.
- Film grain to bind it together.
The glass is alive before you ever touch it: its angle sways and its specular highlight breathes, driven by the engine's auto-animate prop drivers rather than JavaScript timers — the animation logic lives on the GPU side.
Motion design
One authored entrance, played once: the nav settles from above, then label, headline and calls-to-action rise in a tight stagger with a blur that resolves — exponential ease-out, no scroll-reveal spam. Everything else is feedback: buttons roll their labels on hover, arrows rotate into place, project cards grow a circular button into a labeled pill, videos zoom softly under the cursor. A live London clock ticks in the nav, and the mobile menu is a bottom sheet with distinct enter and exit timing.
Engineering
React 18 + TypeScript + Vite, styled with Tailwind. The point that matters: progressive enhancement. WebGPU is still not everywhere, so the page detects when the GPU path is unavailable and swaps in a handcrafted CSS approximation of the same design language — an orbiting orange glow, animated glass ribs, a moving specular sheen, grain. No visitor sees a dead hero; most never notice which version they got.
Keyboard focus states, a full prefers-reduced-motion path and contrast-checked type come standard, and the build passes strict TypeScript.
What this demonstrates
- Real-time shader composition (WebGPU) integrated cleanly into a React app
- Motion design with a thesis — one authored moment, purposeful feedback everywhere else
- Progressive enhancement done properly: a complete visual fallback, not a blank div
- Production discipline: strict TypeScript, accessibility, reduced-motion support
Stack: React 18, TypeScript, Vite, Tailwind CSS, shaders engine (WebGPU / TypeGPU), Lucide.