Motion Graphics

Animated pieces that explain something: paths that draw themselves, pulses moving between services, items orbiting a center, rolling digits, a live voice level and status marks that draw in.

import { DrawPath, FlowLine, Orbit, OrbitRing, Odometer, Waveform, StatusMark } from "pleate/effects/motion-graphics";

Data flow

FlowLine between services, with an Odometer on the live figure. Pause stops both.

Checkouteu-west-1

Paymentsstripe

Ledgerpostgres

Bookings per hour

Drawn route

DrawPath strokes the route when it scrolls into view.

LISOPO · 313 km

Orbit

Two rings turning in opposite directions; hover to stop them.

plate

Odometer

Each digit rolls to its new value, formatted with Intl.

Trip total

Waveform and status

A recording level and a status mark that draws itself.

0:14

Props

DrawPath

Strokes one or more paths on view.

d, viewBox, duration, delay, stagger, strokeWidth, once, label

FlowLine

A pulse travelling along a path over a hairline track.

d, viewBox, duration, length, reverse, paused, label

Orbit / OrbitRing

Items placed evenly on rings that stay upright while turning.

size, center, pauseOnHover / radius, duration, reverse, track

Odometer

Rolling digits; the ones column stays put as the number grows.

value, format (Intl), locale, duration

Waveform

Idle speech-like animation, or real levels from 0 to 1.

active, levels, bars, height, label

StatusMark

Spinner while pending, then a drawn mark.

"pending" | "success" | "warning" | "error", size, label

Accessibility

Drawings are decorative unless you pass label, then they are named images.
Odometer animates an aria-hidden copy and exposes the plain value to screen readers.
StatusMark is a status region: the change is announced ("Done", "Failed"…).
Reduced motion: paths appear drawn, pulses and orbits stop, digits jump to the value.