Web
Concept, design and build
Hair atelier and day spa
A concept site for a hair atelier and day spa with a WebGL aura in the hero, drawn by a bubble shader I wrote by hand after the stock material measured about 630 ms per frame.
Stack: React, Vite, Tailwind CSS, Framer Motion, React Three Fiber, Lenis
Problem
The look called for a soft glass bubble. The off-the-shelf distort and transmission material made it, but too slowly to ship.
What I built
- Hand-written bubble shader: vertex wobble with finite-difference normals, fresnel rim, specular glints and a thin-film tint.
- A useCanRender3D gate (at least 4 cores, 4 GB memory, wider than 900 px, motion allowed); the render loop stops offscreen.
- Draggable before and after comparisons as role="slider" with arrow keys, and a focus-trapping lightbox.
- WAI tabs pattern for four service houses, a pinned rituals column and portraits with 3D tilt.
- Load-driven image reveals replaced scroll-driven ones after a third of them got stuck.
Proof
- Replaced a stock material that cost about 630 ms per frame with a bubble shader I wrote by hand
Stack
- React
- Vite
- Tailwind CSS
- Framer Motion
- React Three Fiber
- Lenis
Share this case