Healthcare & Clinic Experience
A clinic concept where the imagery is synthesised rather than sourced — a GLSL silk hero, SVG-generated tissue surfaces behind the before/after slider, and a lathed glass bottle you can spin.
- Built for
- Vessante Aesthetic Institute
- Imagery
- Synthesised, not stock
- Hero
- Custom GLSL silk
- Scope
- Fictional clinic concept
Overview
A concept site for an aesthetic and dermatology practice, built to a bright ivory and champagne art direction. Its distinguishing constraint is that almost none of the imagery is photographic: the hero is a shader, the before/after surfaces are generated in SVG, and the product viewer is real geometry.
Objective
Build a credible premium healthcare experience without using photography of patients, procedures or results.
Problem and opportunity
Outcome imagery is the hardest asset in this category to source ethically, and stock alternatives read as false immediately. Generating the visuals sidesteps the problem and makes the demo honest about what it is.
Solution
Every surface is synthesised. A displaced plane lit with a two-light model gives the hero its silk; fractal turbulence in SVG produces dermal texture at two tissue states for the before/after slider; the boutique products are lathed geometry with partially transmissive glass. Video previews are generated with a script rather than licensed.
Technology
- Framework
- Next.js 15React 19TypeScript
- 3D
- Three.jsReact Three Fiber 9dreicustom GLSL
- Interface
- Radix UI — Dialog, Accordion, Tabs, Slider
- Motion
- Framer Motion 12Lenis
- Styling
- Tailwind CSS 3
Key features
What is actually in the build.
- 01
Shader hero
A displaced plane lit with a two-light Blinn-Phong model. Normals come from finite differences of the height field in the vertex shader — elevation alone gives no shading cue and the surface reads as fog.
- 02
Generated tissue surfaces
The before/after slider shows one synthesised surface at two roughness values, built from fractal turbulence with displacement and diffuse lighting in SVG. No image assets, and no borrowed patient photography.
- 03
Product viewer
A lathed glass bottle with drag-to-spin, using partial transmission on a physical material so each bottle keeps its own tinted identity against a white card.
- 04
Three-step booking drawer
A consultation flow in a glass drawer with a confirmation state, alongside a treatment grid with filtering and video previews, a boutique, reels and an FAQ.
On a phone
Designed for the small screen too.
Captured from the live deployment at 390 × 844. The mobile layout is composed rather than scaled down — navigation, density and the primary action are all decided again for the narrow viewport.
UX and interface decisions
Ivory, not white
The ground is a warm off-white so champagne and blush accents have something to sit against. Headings use a warm near-black rather than pure black.
Gold that passes contrast
Champagne cannot hold accessible text contrast on ivory, so it is restricted to borders and fills; the primary button takes its weight from darkness instead of colour, and gold text uses a deeper tone that clears 4.5:1.
Light-ground effects
On a bright page, additive particles are invisible. The drifting motes are alpha-blended and the fabric reads by going darker in its troughs rather than accumulating brightness.
Technical approach
Two-octave height field
Normals need three noise evaluations per vertex, so the height field runs two octaves and the fine weave detail is added in the fragment stage instead.
Descender-safe masked reveals
Display headings run a line-height below 1, so a plain overflow clip slices descenders off masked word reveals. The utility pads the clip region and cancels the padding with a matching negative margin.
Generated media
Treatment previews and testimonial reels are synthesised by a shell script from ffmpeg's built-in sources, with audio, so the sound toggles do something real.
Challenges
The parts that needed a second attempt.
Transmissive glass on a light page
Fully transmissive material only reads against contrast — over a transparent canvas every bottle becomes a silhouette, and forcing the buffer to the card colour makes them vanish. Partial transmission keeps each material's own shading.
Two states that differ by texture, not brightness
Skin tone is held near-constant across the roughness range. If tone tracked roughness, the before/after pair would differ mainly in brightness and the smooth state would fade into the page.
Next project
Interactive 3D Packaging Experience
The Pack Style · Concept build
