Тон 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.
point cloud · profile
this isn't a screenshot — that's the real site in the frame · hover to straighten it
The site in motion
What we built — and why
Screenshots of the live demo, not mockups.
Petals assemble into a face
Fifteen hundred petals lie scattered and visibly gather into a facial profile; the cursor parts them. Not a single photo or texture — it's all computed in the browser.
A "glow index" instead of before/after
The same portrait shifts with the scroll from cold "city skin" to warm, with a counter rising beside it. It sells gaining a glow rather than getting rid of a flaw.
A bento of needs
"SMAS" and "BBL" mean nothing without medical training. The grid is built around what you see in the mirror: glow, firmness, hydration, texture. A card opens right inside the grid.
An open treatment protocol
The niche's main fear is the unknown. The protocol has its own chapter: the steps light up one by one, with what makes up the price right next to them.
A "skin code" quiz instead of a form
Instead of "leave your number" — four questions that build a preliminary treatment map and go to WhatsApp along with the answers: the admin gets context, not a bare number.
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.
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.
- --bg#fbf6f5porcelain
- --bg-2#f5e9e6petal shadow
- --ink#3e2a33plum graphite
- --tone-glow#b26039apricot blush
- --tone-lift#b2505epeony
- --tone-hydra#3f8480dew
- --tone-purity#7d59a4orchid
stack
Why it's built this way
Petals that assemble into a face
01The 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
02The 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
03The 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
05The 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.
For a similar business
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 a week