Motion
Motion shows users what changed and where things went. Every animation in Senco must be purposeful — never decorative.
Duration tokens
Duration tokens define how long an animation lasts. Shorter durations suit small, frequent interactions; longer durations suit larger, less frequent transitions.
| Token | Value | Usage |
|---|---|---|
--ds-duration-instant | 50ms | Button press, toggle, checkbox |
--ds-duration-fast | 100ms | Dropdown open, tooltip appear, hover state |
--ds-duration-normal | 180ms | Panel slide, toast enter/exit, accordion |
--ds-duration-slow | 300ms | Page transition, modal open/close |
--ds-duration-slower | 500ms | Skeleton fade, complex transitions |
Choosing a duration
- Smaller elements animate faster. A checkbox toggle should feel instantaneous.
- Larger surfaces use longer durations so the eye can track the change.
- Frequent actions (e.g., hover) should use fast durations to avoid feeling sluggish.
- Infrequent actions (e.g., page transitions) can afford slower, more expressive timing.
Do / Don't
Do
Subtle 150ms ease on hover. Functional feedback without distraction.
Don't
Flashy 2s bouncing animation. Distracting, inaccessible, and unprofessional.
Duration tokens
duration-instant
70msButton press, toggle, checkbox
duration-fast
150msDropdown, tooltip, hover state
duration-moderate
240msPanel slide, toast, accordion
duration-slow
400msPage transition, modal, skeleton
Easing curves
Easing curves control the acceleration profile of an animation. Senco uses three standard curves.
| Token | Value | Usage |
|---|---|---|
--ds-ease-default | cubic-bezier(0.4, 0, 0.2, 1) | Most transitions — elements moving between states |
--ds-ease-out | cubic-bezier(0, 0, 0.2, 1) | Elements appearing (entrance) — decelerate into place |
--ds-ease-in | cubic-bezier(0.4, 0, 1, 1) | Elements leaving (exit) — accelerate out |
--ds-ease-bounce | cubic-bezier(0.34, 1.56, 0.64, 1) | Playful feedback (success checkmark, toggle snap) |
When to use each curve
- Standard is the default. Use it for any state change that doesn't involve an element entering or leaving the DOM.
- Entrance for modals opening, toasts appearing, dropdowns expanding.
- Exit for modals closing, toasts dismissing, dropdowns collapsing.
Easing curves
Standard
Toggle switch
cubic-bezier(0.2, 0, 0.38, 0.9)
Entrance
Dot wave loading
cubic-bezier(0, 0, 0.38, 0.9)
Exit
Card fade-out
cubic-bezier(0.2, 0, 1, 0.9)
Reduced motion
Users who enable prefers-reduced-motion on their OS must never see animations that could cause discomfort. Senco respects this setting globally.
What to simplify
| Category | Default | Reduced motion |
|---|---|---|
| Transitions (opacity, color) | Animate normally | Instant (0ms duration) |
| Slide/transform animations | Animate with easing | Replace with opacity-only fade |
| Loading spinners | Continuous rotation | Keep, but slow down |
| Auto-playing carousels | Animate between slides | Pause, show manual controls |
Reduced motion
Full Motion
Reduced Motion
Left: Full animation with slide, scale, and opacity transitions. Right: Only opacity changes — no spatial movement. This is what users with
prefers-reduced-motion: reduce will see.Design and accessibility
- Purpose over polish. Every animation must answer: "What does this help the user understand?"
- No animation-only feedback. If motion communicates a state change, pair it with a visual change (color, icon, text) that persists after the animation ends.
- Respect user preference. Always honor
prefers-reduced-motion. Never override it. - Performance budget. Keep animations on the GPU — use
transformandopacityonly. Avoid animatingwidth,height,top,left, ormargin. - Test on low-end devices. Animations that are smooth on a MacBook Pro may stutter on a budget Android phone — Senco's primary audience.