HumanTouch's components elegantly bridge worlds —translating the refined aesthetics of spas into fluid digital experiences.
They honor fluid motion, transparent layers, silk-like blurs, and a dimensional space that breathes with intention and responds with grace.
Welcome to your personal spa.
At the core of HumanTouch's interface lies the control wheel.

A touch-first slider that can snap to fixed steps and spring physics. Props:
- iconL (100% opacity)
- iconR (40% opacity)
- fixedSteps (snaps, step dots, and taps nudge one step towards the tapped side)
- elongation (the slider rubber-bands when dragged past either end — try the last one).

Welcome to your personal wellness experience
The first-bootup sequence, from cold boot to GET STARTED. All timings are consts on the component. Sequence:
- logo fades in (1200ms, ease-out), holds 2000ms
- splash cross-fades into the welcome screen (1200ms), text first
- loops fade in 2000ms later (600ms) — a Lottie loader at half speed, masked so it clears the space around the text
- GET STARTED appears 5000ms after the welcome screen (600ms)
idleA breathing voice-assistant button: procedural white curves drawn on a canvas inside a 96px frosted-glass circle. Tap to advance the phase. Props:
- phase (controlled; omit for uncontrolled)
- amplitude (real mic level, else a simulated voice envelope)
- config (every animation constant, overridable)
Phases: idle → listening (motion intensifies, halo glows, envelope pulses) → thinking, then back to idle on its own.
Timings:
- 9000ms per idle breath
- 5500ms thinking spin before it self-returns
The screen shown while a massage is running: countdown timer, preference sliders, playback controls and the Willow orb. The countdown ring fills clockwise from twelve and empties as the session runs down. Centre stage is the body, with the mechanism glowing through the torso — a blurred blob inside a torso-shaped mask, drawn in white, green and purple at a slight offset so the fringes read as chromatic aberration, composited in Soft Light. Props:
- twoGlows (one or two mechanisms; both share a mask, so an overlap fuses instead of flaring)
- glowPeriodSeconds (one full sweep of the back)
Motion: each glow sweeps end to end, pulled off course by seeded noise so it dwells on one area instead of pacing evenly, squashing and breathing as it travels.
Timings:
- 120000ms per sweep by default (see the slider)
- second glow at 1.37x that, so the two drift in and out of phase
- 2000ms ease-in-out on the AUTO | STRETCH dot
Earlier alternatives for the In-Massage centre-stage visual, superseded by 04 above. Variants:
- A — a field of wavy white lines that bend around the pointer
- B — a slow-breathing mesh gradient over the whole scene, blended in Lighten
- C — A with a refractive glass figure in the centre, turning slowly and bending the room behind it