Design Lounge
Install

System

Motion

016 recipes
Curves

Easings

Time

Durations

  1. 120 Micro Colour, opacity, focus rings, checkbox ticks.
  2. 160 Fast Hover lifts, tooltip fade, underline grow.
  3. 200 UI Buttons, chips, segmented controls.
  4. 320 Layout Sidebar width, grid reflow, tab panels.
  5. 400 Sheet Drawers, dialogs, shared-element expands.
  6. 640 Hero First-paint reveals, page curtains, logo draws.
  7. 900 Cinematic Once-per-session intros. Never loop this long.

Recipes

  1. Fade and rise

    Trigger
    First paint or [data-replay]
    Property
    opacity, transform
    From → to
    0 / translateY(12px) → 1 / none
    Time
    520ms · expo-out · stagger 60ms
    Reduced
    opacity only, 1ms

  2. Underline grow

    Trigger
    hover / focus-visible
    Property
    transform (scaleX)
    From → to
    0, origin left → 1
    Time
    200ms · standard
    Reduced
    instant underline

  3. Sidebar rail

    Trigger
    toggle / ⌘B
    Property
    width
    From → to
    240px → 64px
    Time
    320ms · standard · labels 0–160ms opacity
    Reduced
    width snap, no label slide

  4. Sheet up

    Trigger
    open
    Property
    transform
    From → to
    translateY(100%) → 0
    Time
    400ms · ios-sheet
    Reduced
    opacity 160ms, no travel

  5. Dialog in

    Trigger
    open
    Property
    opacity, transform
    From → to
    0 / scale(.96) → 1 / 1
    Time
    240ms · expo-out
    Reduced
    opacity only

  6. Toast enter

    Trigger
    push
    Property
    transform, opacity
    From → to
    translateY(8px) → 0
    Time
    200ms · enter
    Reduced
    opacity 120ms

  7. Tab ink bar

    Trigger
    selected change
    Property
    left, width
    From → to
    previous rect → new rect
    Time
    280ms · standard
    Reduced
    snap

  8. Count up

    Trigger
    in view / replay
    Property
    text content
    From → to
    0 → target
    Time
    800ms · expo-out (via JS ease)
    Reduced
    set final number immediately

  9. SVG stroke draw

    Trigger
    first paint / replay
    Property
    stroke-dashoffset
    From → to
    path length → 0
    Time
    700ms · standard
    Reduced
    offset 0 immediately

  10. Marquee

    Trigger
    always
    Property
    transform
    From → to
    0 → −50%
    Time
    40–70s linear infinite · linear
    Reduced
    static, no animation

  11. Like pop

    Trigger
    click
    Property
    transform
    From → to
    1 → 1.18 then 1
    Time
    280ms · spring-soft
    Reduced
    colour change only

  12. Page curtain

    Trigger
    route change
    Property
    clip-path or translateY
    From → to
    inset(0 0 100% 0) → inset(0)
    Time
    640ms out, 520ms in · emphasized / expo-out
    Reduced
    crossfade 160ms

  13. Shared expand

    Trigger
    card click
    Property
    top/left/width/height or grid-row
    From → to
    card rect → stage rect
    Time
    400ms · emphasized
    Reduced
    instant swap

  14. Skeleton to content

    Trigger
    data ready
    Property
    opacity, filter
    From → to
    skeleton 1 / content 0 → inverse
    Time
    240ms · standard
    Reduced
    instant swap

  15. Magnetic pull

    Trigger
    pointer within 48px
    Property
    transform
    From → to
    0,0 → dx*0.28, dy*0.28
    Time
    160ms · standard
    Reduced
    no follow

  16. Theme circle wipe

    Trigger
    toggle
    Property
    clip-path on view transition
    From → to
    circle(0 at origin) → circle(max radius)
    Time
    520ms · standard
    Reduced
    instant theme swap