Foundations

Motion

Four easing curves, five duration stops, and a stagger-reveal system. Motion reinforces hierarchy without drawing attention to itself.

01 · Easing

Easing curves

Standard

Default interactions

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

Entrance

Elements appearing

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

Exit

Elements leaving

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

Emphasis

Attention-drawing

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

02 · Duration

Duration scale

xs80ms

Micro feedback (button press)

sm160ms

Standard interactions (hover, focus)

md240ms

State transitions (panel open)

lg400ms

Complex transitions (page sections)

xl600ms

Hero reveals only

03 · Stagger

Staggered reveals

Combine animate-fade-up with delay classes to create cascading reveals:

html

<div class="animate-fade-up">…</div>
<div class="animate-fade-up delay-1">…</div>
<div class="animate-fade-up delay-2">…</div>

(none)0ms

delay-160ms

delay-2120ms

delay-3180ms

delay-4240ms

delay-5320ms

delay-6400ms

Interactive demo

0ms

delay-1

delay-2

delay-3

delay-4

delay-5

delay-6

04 · Interactive Demos

Live motion demos

Trigger each animation type to see the easing curves and durations in action. Each demo uses the exact motion tokens defined in the system.

Entrance

cubic-bezier(0, 0, 0.2, 1) · 240ms

Card entered view

Exit

cubic-bezier(0.4, 0, 1, 1) · 240ms

Card leaving view

Emphasis

cubic-bezier(0.2, 0, 0, 1) · 400ms

New notification

Duration Comparison

xs (80ms) through xl (600ms) side by side

80ms

160ms

240ms

400ms

600ms

State Transition

cubic-bezier(0.4, 0, 0.2, 1) · 240ms · collapsed / expanded

Campaign Performance▼

Impressions245K

Clicks8.2K

Conversions142

ROAS8.1x

05 · Accessibility

Reduced motion

All animations respect prefers-reduced-motion: reduce. When the user's operating system requests reduced motion, all transitions degrade to a simple opacity fade or disable entirely. No animation in the Entangle system is load-bearing for comprehension.

css

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up,
  .animate-fade-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

06 · Don'ts

Anti-patterns

×No scroll-jacking

×No parallax

×No autoplay video (except approved hero)

×Nothing over 400ms (page reveals use 400ms max)

×No bouncy/elastic easing

×All motion must degrade gracefully with prefers-reduced-motion