Components · Controls
Input
A text field with a label that never moves. Typing has no motion.
Try itChange the motion setting at the top to feel each personality.
Shown on your streak.
Use it
<Input label="Your name" hint="Shown on your streak." error={error} />How it moves
| When | Role | What moves |
|---|---|---|
| Typing, focusing, leaving the field | none | Nothing. The focus ring appears at once |
| An error appears | attention, enter | The field shakes once across the attention distance, and the error message fades in and drops by the enter distance, growing from the enter scale |
| The error is fixed | none | The message is removed. Nothing moves |
Rules:
- Typing is a frequent action, so it gets no motion at all.
- The shake runs once, when the error first appears. It does not repeat while the error stays.
- The label is always visible above the field. It does not float or move.
- An error is never shown by color alone: it has an icon and a sentence.
Reduced motion: the attention and enter distances are 0, so the field does not shake and the message fades in where it stands.
CSS variables used: --ss-motion-attention-distance, --ss-motion-attention-duration, --ss-motion-attention-easing, --ss-motion-enter-distance, --ss-motion-enter-spring, --ss-motion-enter-spring-duration.