01
Dots / Directional
Gather
A field contracts toward a shared center, then releases.
- Structure
- 7 × 7 dots
- Runtime
- None
- Format
- Inline SVG
Motion library 0.2Four families
Make waiting
feel intentional.
A small, evolving library of expressive loading states. Lightweight enough for production, considered enough to make the in-between worth noticing.
01 / Motion workbench
Tune the behavior.
Choose a pattern, set the pace, then copy a production-ready asset.
X 07
Y 07
02 / Motion families
Small forms.
Different voices.
Dots feel ambient, bars feel rhythmic, and pixels feel computational. Each family uses its own primitive while sharing one portable API.
03 / Progress, with context
Progress is
a promise.
A bar should tell the truth when the system knows it—and communicate activity without inventing certainty when it doesn’t.
The behavior contract
Report the actual state.
The endpoint moves only when the underlying value changes. Texture may show life, but it never implies fictional completion.
Signal activity, not distance.
Open-ended motion traverses the available space without percentages, false milestones, or an endpoint that appears to regress.
04 / Built to travel
Motion without
the baggage.
Each loader is a self-contained SVG or a tiny custom element. No framework assumptions, no image requests, and no animation runtime. The same motion can live in a prototype today and production tomorrow.
Drop-in by design
Copy the SVG, use the web component, or lift the timing map into your own system.
Motion-aware
Every pattern honors reduced-motion preferences and settles into a legible static state.
Ready to expand
The catalog separates shape, timing, and presentation. Line-based studies remain the next open family beside dots, bars, pixels, and progress.