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: the logo fades in (1.2s ease-out) and holds for 2s, then the splash cross-fades (1.2s) into the welcome screen — text first, then the loops 2s later (a Lottie loader at half speed, masked so it clears the space around the text) — and after a 5s delay the GET STARTED button appears. All timings are consts on the component.
idleA breathing voice-assistant button: procedural white curves on a canvas inside a 96px frosted-glass circle. Tap it to cycle idle → listening (motion intensifies, halo glows, voice envelope pulses) → thinking (~5.5s processing spin), then it returns to idle on its own. Supports controlled and uncontrolled state, a real mic amplitude input, and every animation constant is overridable via the config prop.