InterLAB
InterLABdigital studio
Menu
HomeWorkServicesNews2Contact
About
WhatsAppTelegram
Log in
InterLABdigital studio
Menu
HomeWorkServicesNews2Contact
About
WhatsAppTelegram
Log in
InterLAB
Log in
Case · Flagship · WebGL and interaction

Тон Studio Skin that holds the light.

A flagship case for a facial aesthetics studio: a WebGL hero where petals assemble into a facial profile, a shader grading of the 'radiance index' driven by scroll, a bento grid of skin needs with FLIP expansion, and a 'Skin code' quiz that assembles a ready enquiry into WhatsApp. The palette is taken from a petal — porcelain, blush, dew, orchid; there is no black on the site at all. Design and code by InterLAB. The studio is fictional; this is a showcase of the approach.

Open the live demo ↗hover the cloud — the points gather

point cloud · profile

interlab-demos.vercel.app/v3/salon
Open the live demo ↗

this isn't a screenshot — that's the real site in the frame · hover to straighten it

Problem → Solution

the pain in this niche

Cosmetology frightens people before it gets a chance to sell

A clinic shows syringes and harsh-lit before/after shots, and writes its price list in the language of machines: SMAS, BBL, biorevitalisation. People don't understand what they'll actually get, they're afraid of pain and of looking unnatural — and they close the tab before they ever reach the booking form.

the solution

Light instead of syringes, the result instead of the machine

No shock content: the site talks about radiance and even tone, and the skin gains light right in front of the visitor. The price list is re-sorted by need — 'radiance', 'firmness', 'hydration' — the safety protocol is laid open step by step, and instead of a 'leave your number' form there's a four-question consultation that arrives in WhatsApp as a ready treatment map.

Design System

Palette, type pairing, stack. One niche — one system.

Skin that holds the light

Oranienbaum is a high-contrast serif with native Cyrillic: against porcelain, the stroke contrast reads like a fashion magazine, and the narrow forms let the headline fit on one line. Geist is a calm grotesque for body copy and prices. Neither Playfair nor Inter — and half the 'expensive' beauty typefaces were ruled out immediately, because they have no Cyrillic.

Oranienbaum · displayGeist · body
  • --bg#fbf6f5porcelain
  • --bg-2#f5e9e6petal shadow
  • --ink#3e2a33plum graphite
  • --tone-glow#b26039apricot blush
  • --tone-lift#b2505epeony
  • --tone-hydra#3f8480dew
  • --tone-purity#7d59a4orchid

stack

Next.js 16Tailwind 4Motion 12Three.js / R3FGLSLLenis
UX decisions / 5

Why it's built this way

Petals that assemble into a face

01

The studio promises you'll walk out a different person — so the first screen doesn't describe the transformation, it shows it. Fifteen hundred petals lie scattered and visibly converge into a facial profile; the cursor parts them as if you'd run a hand through. The silhouette is computed from a contour on the CPU, while light and assembly live in a shader — not a single photograph and not a single texture.

WebGL · instanced petals

A palette taken from a petal, not from stock

02

The first version was dark — onyx and amber — and read like jewellery rather than an aesthetics studio. The niche is associated with backlit skin: a peony petal, milk, dew, mother-of-pearl. So the background is porcelain, black is replaced by plum graphite, and the accents are named after where they came from: apricot blush, peony, dew, orchid. The interface tone shifts with the section — the visitor controls the atmosphere.

petal palette · tone theming

A 'radiance index' instead of before/after

03

The standard before/after slider in cosmetology shows acne and wrinkles under harsh light, which provokes recoil. We change the light rather than the shape: as you scroll, the same macro portrait is graded from cold 'city skin' to warm and dewy, a highlight travels along the wipe edge, and a counter climbs alongside. We sell gaining a glow, not removing a flaw.

scroll grading · wipe

A bento of needs that expands in place

04

'SMAS', 'BBL' and 'biorevitalisation' mean nothing without a medical education. The grid is organised around what you see in the mirror: radiance, firmness, hydration, texture. A click expands the card with a FLIP animation right inside the grid — the neighbours flow downwards, and no overlay or scroll lock is needed. Inside is the 'care formula': what actually makes up the price.

bento · FLIP

An open protocol and the 'Skin code' quiz

05

The main fear in this niche isn't pain, it's the unknown. The 01→04 protocol gets its own chapter: light travels down the vertical and the steps light up in turn. And instead of a 'leave your number' form there's a four-question consultation that assembles a preliminary treatment map and goes to WhatsApp along with the answers: the messenger receives context, not a bare phone number.

trust · wa.me

Full disclosure

'Ton Studio' is a fictional studio: a flagship demo in the InterLAB showroom, where prices, product brands and figures illustrate the format rather than a real practice. The same site for your real business is built with your treatments, photos and WhatsApp number.

we reply within one business hour

Want one like this — for your clinic?

We'll show you a draft on our subdomain before any payment. A WebGL hero, a bento of needs and a quiz that outputs to WhatsApp — as in the demo, but with your protocols and your prices.

  • Scope and risks estimated before we start
  • NDA — yours or ours
  • Work starts within 3–5 days
Message on WhatsAppTelegram

By clicking the button you agree to the processing of your personal data.

InterLABdigital studio

web apps · services · software

WorkServicesAboutContact

© 2026 InterLAB · Privacy