Gan Maison — Beleza Regenerativa
The website of Gan Maison, a beauty studio: a particle helix turns into a leaf as the pinned first screen opens through an arch, and a composer writes the WhatsApp booking message.
- Project
- Gan Maison — Beleza Regenerativa
- Status
- In production
- Category
- Beauty studio website · WebGL particle scene
Project facts
- Our role
- Designed and built the website.
- Capabilities
- WebGL particle scene (OGL)
- Pinned scroll sequence
- WhatsApp message composer
- Static fallback (no JS, reduced motion)
- Stack
- Vite
- GSAP (ScrollTrigger, SplitText)
- Lenis
- OGL
- Fraunces (subset) and Jost
The challenge
Give a beauty studio that lived on a bio-link page a site of its own, with every booking continuing on WhatsApp.
Decisions
The signature is a WebGL particle scene built on OGL: thousands of points form a double helix, become a leaf, then scatter. The canvas is decorative, draws fewer points on modest devices, drops to standard resolution when frames run long, pauses off screen and in hidden tabs, and holds a single frame when reduced motion is turned on, even mid-visit.
The first screen is pinned and scrubbed by the scroll: the helix becomes a leaf and an arch opens until it fills the screen. It runs only when motion is allowed, and a keyboard user tabbing back into it is brought to the top, so the focused button is in view.
A composer writes the WhatsApp booking message as the visitor picks options, previewed live on a phone, with a first line the studio's auto-reply already recognises; nothing is stored. Without JavaScript the composer stays hidden and the plain WhatsApp buttons remain.
The experience
Particles turn from a helix into a leaf, the first screen opens like a door, and booking ends in a WhatsApp message already written.
A good place to start
Have something
worth building?
What kind of project do you have in mind?
Pick one and the message is written for you.
Remote-first · working across the Americas, Europe, Africa and India
hello@codejtech.dev