A button can lean in. Hesitate.
Take a breath. Celebrate.
A little movement changes the feeling.
A QUIET BASELINE
CURIOUS / 好奇
Move within each button’s space to feel its response. Click, tap, or use Tab then Enter / Space to activate it.
Ready to try. These buttons are a motion playground.
It leans towards your pointer, as though it wants to know what comes next.
distance × strength → attractionTHE IDEA / FEELING THROUGH FEEDBACK
We read movement as intention. A shape moving towards us feels interested. A slow turn can feel shy. A springy rebound suggests confidence. You can give a simple rounded button a personality with just distance, timing and a response to input.
These are original, editable motion studies. Each keeps a fixed native button beneath the moving surface. Character lives in the visual layer; the action remains easy to reach.
A good place for Curious: an invitation to explore a playful collection.
Begin with a verb: invite, reassure, greet, celebrate, finish. Then choose one motion that supports it. Curious approaches. Shy tilts. Calm settles. Euphoric turns once. A mood is useful when it reinforces the action’s meaning.
Try: compare Curious with Eager at the same duration. Eager reaches further. Then lower motion strength until it feels like a small invitation.
The same distance can feel relaxed or urgent. A short duration reaches the result sooner. Overshoot adds a little uncertainty: the surface crosses its destination, reverses, and settles. Compare the clean end of Decisive with Uneasy’s rubber-band return.
Try: replay Uneasy at 160 ms and 900 ms. Find the shortest duration that lets you read the return. In this editor the listed duration is the base timing; Calm and Decisive use 70% of it, and Euphoric uses 170% for its full turn.
Place a visual pill inside a larger native button. Move or tilt that child, while keeping the button’s hit area and focus ring still. The moving child ignores pointer events, so a press anywhere in the target can activate the response.
For pointer motion, measure the offset from the target’s centre, normalise it to −1…1, and clamp the movement. For Decisive, round the offset to discrete steps. On touch and keyboard, play the same mood’s activation response without requiring a hover.
Rapid input can start several animations on the same property. Cancel the previous reaction before playing the next. This prevents old callbacks from announcing a result after a newer press. The editor’s twelve buttons use this rule, including Anxious and Overwhelmed.
Keep letter scatter on the visual label; the native button retains its accessible name. A still response acknowledges activation with words, without a moving surface. Operating-system reduced-motion preferences select that response automatically.
Try: click Wild quickly three times. The letters should come home. Then enable “Use a still response” and press again: the acknowledgement remains.
A LITTLE EXERCISE / DESIGN THE INTENTION
Design an invitation labelled “Come in”. Keep the words and material the same; change only the response.
KEEP THE EXPERIMENT
Download the working page and open it in a browser. Its gallery, editor, diagrams and recipe work offline. Change the mood definitions, reaction keyframes and visual style to explore another personality.
Download the working starter ↓Download the motion definitions ↗Curious · 100% strength · 340 ms
The recipe describes your editor settings. The starter contains the implementation and can restore a recipe by editing its settings.