Skip to content
Tessera UI

Motion

Motion brings interfaces to life when used with purpose. Tessera UI’s motion system is minimal and functional, providing feedback without distraction.

Principles

Section titled “Principles”
1
Communicate, don’t decorate
Every animation helps the user understand what happened — an element appeared, moved, or changed state.
2
Fast by default
Most interactions use 160ms or less. Users should never wait for an animation to finish.
3
Consistent easing
A shared set of easing curves creates a unified feel across all transitions.
4
Respect preferences
Animations are reduced or removed when prefers-reduced-motion is active.

Duration Tokens

Section titled “Duration Tokens”

Hover over each track to see the animation speed in action.

Micro80ms
Hover me
Fast160ms
Hover me
Normal240ms
Hover me
Slow360ms
Hover me
X-Slow500ms
Hover me

When to Use Each Duration

Section titled “When to Use Each Duration”
DurationTokenUse Cases
80ms--ts-transition-microCheckbox tick, ripple start, instant-feel micro-feedback
160ms--ts-transition-fastButton hover, toggle switch, focus ring, color changes
240ms--ts-transition-normalCard hover elevation, component enter/exit
360ms--ts-transition-slowAccordion expand, panel slide, tab transitions
500ms--ts-transition-x-slowPage-level entrances, complex orchestrations

Easing Curves

Section titled “Easing Curves”

Each easing curve communicates a different motion quality. Hover over the cards to preview the curve.

Hover to preview
Standard
cubic-bezier(0.4, 0, 0.2, 1)
The default curve for most UI transitions. Starts fast, decelerates smoothly.
Hover to preview
Decelerate
cubic-bezier(0, 0, 0.2, 1)
For elements entering the screen. Starts at full speed and eases to a stop.
Hover to preview
Accelerate
cubic-bezier(0.4, 0, 1, 1)
For elements leaving the screen. Starts slow and accelerates away.
Hover to preview
Spring
cubic-bezier(0.16, 1, 0.3, 1)
Playful overshoot curve for delightful interactions. Use sparingly.

Loading Animations

Section titled “Loading Animations”

Persistent loading states use longer, looping durations.

Pulse
—ts-loading-pulse-duration: 1.5s
Shimmer
—ts-loading-shimmer-duration: 1.8s

Staggered Entrances

Section titled “Staggered Entrances”

Lists and groups use a stagger interval to choreograph sequential entrance animations, creating a cascade effect.

Item 1 — enters immediately
Item 2 — 50ms delay
Item 3 — 100ms delay
Item 4 — 150ms delay
Item 5 — 200ms delay
—ts-stagger-interval: 50ms

Reduced Motion

Section titled “Reduced Motion”

All animated Tessera UI components include targeted @media (prefers-reduced-motion: reduce) rules that reduce or eliminate motion for users with vestibular disorders. This is built into each component’s CSS — no consumer action required.

A

Accessibility first (WCAG SC 2.3.3) Rather than a blanket override, each component reduces only its own animations. This ensures motion-sensitive users get instant feedback while preserving essential visual cues like focus rings.

@media (prefers-reduced-motion: reduce) {
  .button__native {
    transition-duration: 0.01ms;
  }

}

Components with reduced-motion support

Section titled “Components with reduced-motion support”
ComponentWhat is reduced
ButtonHover/active transitions, press scale effect, loading spinner
DialogOverlay fade-in, panel scale animation
ModalOverlay fade-in, dialog scale animation
DrawerOverlay fade-in, slide animations (all 4 placements)
SpinnerRotation animation (near-instant)
SkeletonPulse and wave animations removed entirely
ProgressFill transition, indeterminate slide animation
ToastSlide-in entrance animation
AccordionHeader hover, chevron rotation, panel expand/collapse