Senastra — Motion

Motion Principles

Four core principles guide all motion in the Senastra Design System, ensuring animations are purposeful, restrained, and accessible.

🎯

Purposeful

Every animation has a reason. Motion clarifies state changes, guides attention, and improves perceived performance—never gratuitous.

✨

Subtle

Restraint is the hallmark of polish. Small movements and soft easing feel more natural and refined than bold, flashy effects.

⚡

Fast

Respond instantly. No animation exceeds 400ms. Quick transitions keep interfaces snappy and maintain user momentum.

♿

Accessible

Respect user preferences. All animations disable for users with prefers-reduced-motion enabled.

Duration Scale

A carefully calibrated set of durations for different interaction contexts. The bars animate on page load to demonstrate each duration.

instant
0ms
fast
100ms
base
150ms
slow
250ms
slower
400ms

Easing Curves

Six easing functions for different motion purposes. Click "Play" to see each curve in action. The dot moves along a track to visualize the easing behavior.

Linear

linear

Ease In

cubic-bezier(0.4, 0, 1, 1)

Ease Out

cubic-bezier(0, 0, 0.2, 1)

Ease In-Out

cubic-bezier(0.4, 0, 0.2, 1)

Spring

cubic-bezier(0.34, 1.56, 0.64, 1)

Bounce

cubic-bezier(0.68, -0.55, 0.265, 1.55)

Transition Patterns

Common animation patterns used throughout the design system. Click the toggle button to play each animation.

Fade

Tooltips, overlay backdrops

Fade
transition: opacity 150ms ease-out;

Slide Up

Toasts, dropdowns, modals

Slide Up
animation: slideUpIn 250ms ease-out;

Scale

Dialog open, popovers

Scale
animation: scaleIn 250ms ease-out;

Collapse

Accordions, expandable sections

Collapse
animation: collapseIn 250ms ease-in-out;

Slide In

Sidebars, sheet panels

Slide In
animation: slideInRight 250ms ease-in-out;

Micro-Interactions

Subtle feedback animations that delight users and clarify interactive states. Interact with each demo element.

Button Press

Focus Ring

Toggle Switch

Checkbox Check

Loading Spinner

Skeleton Pulse

Hover Lift

Hover me

Page Transitions

Strategy for transitioning between page routes. Enter animations stagger children; exit animations are quicker.

Enter Animation

Page fades in
0ms — 250ms (ease-out)
Child 1 slides up
0ms — 250ms (50ms delay)
Child 2 slides up
0ms — 250ms (100ms delay)
Child 3 slides up
0ms — 250ms (150ms delay)

Exit Animation

Page fades out
0ms — 150ms (ease-in)
Page slides down
0ms — 150ms (ease-in)
No stagger
Concurrent, not sequential

Reduced Motion Support

All animations respect the prefers-reduced-motion media query. When enabled, transitions are disabled and animations run instantly.

Normal Motion

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

With Reduced Motion

Change your system settings to see instant transitions

Timing Reference

Recommended duration and easing for common UI interactions across the design system.

Interaction Duration Easing
Hover feedback 100ms ease-out
Focus state 150ms ease-out
Button active (press) 100ms ease-in-out
Dropdown open 200ms ease-out
Dropdown close 150ms ease-in
Modal open 250ms ease-out + scale
Modal close 200ms ease-in
Toast enter 300ms spring
Toast exit 200ms ease-in
Sidebar expand 250ms ease-in-out
Page enter 250ms ease-out
Page exit 150ms ease-in