Motion

The Motion animation kit — tasteful, reduced-motion-safe entrance, presence, scroll-reveal, and interaction primitives for everyday UX polish.

Reduced-motion safeSSR-safeGPU-friendlyBuilt on Motion

These are everyday UX-polish animations — entrances, presence, scroll reveals, and interaction feedback — built on motion (formerly Framer Motion). Every one honours prefers-reduced-motion: it collapses to no motion for viewers who ask for it. They are SSR/prerender-safe — the content renders as static markup on the server and the animation runs only after hydration — and animate transform/opacity only, so they stay on the GPU and off the layout path. For heavy creative WebGL backgrounds on public hero surfaces, see the Effects section instead.

Entrances — fade, slide, scale

The entrance primitives: FadeIn, SlideIn (with a direction), and ScaleIn — each with an optional delay. GPU-friendly transforms only, and every one collapses to no motion under prefers-reduced-motion.

  • FadeIn
  • SlideIn
  • ScaleIn
Fade, slide, and scale — each with an optional delay.
FadeInAnimates in on mount — and on replay.
SlideIn · upAnimates in on mount — and on replay.
ScaleInAnimates in on mount — and on replay.
SlideIn · upfrom up
SlideIn · downfrom down
SlideIn · leftfrom left
SlideIn · rightfrom right

Stagger — sequenced lists

Stagger orchestrates its StaggerItem children so a list resolves one row at a time. Under reduced motion the interval collapses to zero.

  • Stagger
  • StaggerItem
A container that reveals its children in sequence.
Design tokens
Entrance primitives
Presence
Scroll reveal

Presence — enter & exit

Presence animates a block on BOTH mount and unmount, holding it in the tree until the exit finishes. Toggle it to see the exit run.

  • Presence
Animates on both mount and unmount.
Live

Toggle me — I fade and scale out before I leave the tree.

Reveal — animate on scroll

Reveal animates a block in the first time it scrolls into view, then leaves it in place (it runs once). Ideal for long marketing pages.

  • Reveal
Reveals once when scrolled into view. Scroll the panel, or replay.

Scroll down inside this panel ↓

Reveal block 1 — slides + fades in the first time it enters the viewport.
Reveal block 2 — slides + fades in the first time it enters the viewport.
Reveal block 3 — slides + fades in the first time it enters the viewport.

Interaction — press & layout

Pressable adds the house hover-lift + tap-press to any surface, and MotionLayout springs an element to its new size or position when it changes.

  • Pressable
  • MotionLayout
Pressable — a subtle hover-lift and tap-press for any surface. Hover and click a card.
Documents

Hover to lift · press to sink

Reminders

Hover to lift · press to sink

Sessions

Hover to lift · press to sink

MotionLayout — springs to its new size when content changes.
Release notes

Expand for details.