The Living h
A calligraphic h, almost abstract, made as one organic gesture. It can become a dot, a line, a loop, a vibration, a recognisable pictogram, and come back.
The reference animation
Dot. Hop. h. Wave.
Click the canvas to restart. Click a step to freeze it. Source of truth: docs/h-animation.md and animation/h-wave.html.
Motion principles
Never nervous. Never mechanical.
At rest
Fluid & organic
A discreet movement, like breathing.
In character
Playful & elastic
Stretches, contracts, bounces with a gesture you recognise.
Big moments
Reactive & energetic
More expressive for encouragement and celebration.
- No constant speed. Cubic and sine easings everywhere.
- Nothing pops in or out. Sizes and positions hand over exactly from one step to the next.
- The resting dot has radius 21, half the stroke, so it has the same weight as the line.
- The dot keeps its shape: 6% stretch in flight, 14% squash on landing, bottom stays on the ground.
- Organic stroke thickness, same profile as the logo. A plain trim path is only for simplified versions.
- The wave obeys the logo rule: crests never tighter than half the stroke. No pinching.
- The h contracts into a dot before it becomes a wave. Founder’s call, after trying both.
- Changing the duration? Scale every step together. Never shorten just one.
The contextual companion
Seen when it matters. Gone when it doesn't.
Calm welcome
Discreet, possibly still.
Waiting
Contracts into a dot, breathing softly.
Getting ready
Wakes up, stretches, can draw a shoe.
Coach speaking
Reacts subtly to the voice. Not a plain waveform.
Emotion
Stretches, bounces, turns or changes shape.
Reading stats
Steps aside. The data comes first.
Win / record
Can become a star, a trophy, a celebration.
End of a sequence
Settles back into its h.