Motion
One timing scale for hovers, panels and reveals, plus a reduced-motion branch.
Principles
- Motion explains cause and effect: what opened, what changed, and where it came from.
- Animate transform and opacity . Widths and heights ease on the spring pair, they do not jump.
- Actions repeated many times a minute, such as moving through a list with the keyboard, stay put.
- Every animation can be interrupted, and prefers-reduced-motion keeps the end state without the travel.
Durations and easing
The tokens ship with the kit. In Tailwind they are
duration-fast
,
duration-standard
,
duration-considered
,
duration-spring
,
ease-standard
,
ease-enter
and
ease-spring
.
| Token | Value | Use it for |
|---|---|---|
| duration-fast | 160ms | Hover, color, small state. |
| duration-standard | 240ms | Panels and menus. |
| duration-considered | 480ms | Rare introductory reveals. |
| duration-spring | 580ms | A gentle settle, with ease-spring. |
| ease-standard | default curve | UI transitions. |
| ease-enter | arrival curve | Elements arriving on screen. |
.card {
transition: background var(--duration-fast) var(--ease-standard);
}
.panel {
transition: transform var(--duration-standard) var(--ease-enter);
}Springs
Scripted motion reads
motionTokens
from the kit.
Use a spring when a value has to follow a pointer or a changing size.
CSS panels keep
ease-spring
with
duration-spring
.
| Preset | Values | Use it for |
|---|---|---|
| spring.snappy | 0.26s, bounce 0.12 | Presses, toggles, thumbs. |
| spring.smooth | 0.4s, bounce 0 | Panels and layout. No overshoot. |
| spring.morph | 0.42s, bounce 0.16 | Shapes and widths that follow content. |
| spring.responsive | stiffness 520, damping 38 | Direct manipulation. |
| spring.gentle | stiffness 340, damping 34 | Large layout changes. |
import { motionDuration, motionTokens } from 'neura-kit';
const duration = motionDuration(motionTokens.duration.standard);Reduced motion
When someone asks for reduced motion, Neura keeps the end state and drops travel, loops and parallax.
The kit applies this globally. A component can still name the same tokens; the media query shortens them.
<neura::switch label="Snappy thumb" />