Edition N°01 Run ∞ / unlimited Pressed 2026 · MIT Format Web Components

A specimen book for motion in interface design

An interface that breathes, overshoots, and settles.

Six plates. Thirty-three components. A library of physics-based motion. Pressed, paginated, and presented like the artefact it is. Spring physics. Drop-in. Framework-agnostic.

Framework-agnostic · Spring physics · ~20 KB brotlied · Tree-shakeable

Inside this issue

  1. I. Lab Note · the thesis
  2. II. Telemetry · the receipts
  3. III. Type Foundry · six specimens
  4. IV. Doctrines · six rules
  5. V. Cuts & Springs · the slider
  6. VI. Colophon · how to acquire
    7.

Issue N°02 · pressing

The next specimen drops in

— typeset, prepped, & spring-tuned

PLATE 01 / 06 — Lab Note

Motion is not decoration.

Hard cuts teach the brain that this world has no physics. Springs teach it the opposite: every shift carries velocity from one state into the next, and an interrupted motion continues rather than snaps.

Every motion you see is a tag inside a tag. No render functions. No animation library to wire up. No adapters per framework. . Compose once. Tune later.

Featured this issue

PLATE 02 / 06 — Telemetry

Read the dials.

A live receipt, not a sales sheet. Numbers that move because the page just loaded them.
N° 01 composable components hover for the breakdown ↺
N° 01 — composition

Five families. All composable.

  • 08 Primitives: hover, press, tilt…
  • 16 Text: split, glitch, ticker…
  • 07 Interaction: slider, gallery, flip-card…
  • 02 Scroll: parallax, scene
N° 02 ~KB brotlied, full bundle hover for the bundle math ↺
N° 02 — pay only for what you use

Each tag is its own subpath export.

The full bundle is convenient. import 'motion-components/motion-headline' drops to the cost of just that one tag. Bundlers tree-shake the rest.

N° 03 framework lock-in hover for the runtimes ↺
N° 03 — same HTML, every framework

The browser is the runtime.

  • React 19+
  • Vue 3
  • Svelte
  • SolidJS
  • Astro
  • Angular
  • Alpine
  • plain HTML

PLATE 03 / 06 — Type Foundry

Type that types itself.

Six specimens. Every one auto-animates on its own clock, with staggered intervals so the page never feels metronomic. Spring physics through Motion One; no CSS keyframes; no setInterval that you write.

specimen no. 1 · motion-typewriter
type. pause. resume.
loops · 55 cps · keyboard cursor specimen no. 2 · motion-scramble
decode the future
cypher reveal · auto-loops specimen no. 3 · motion-glitch
SYSTEM ONLINE
channel decay · 1.4s loop specimen no. 4 · motion-words
8 states · 1.5s cadence · per-word color specimen no. 5 · motion-counter
spring-eased numerals · auto-loops specimen no. 6 · motion-headline
FLIP & SETTLE
char flip · spring · auto-loops
Spring physics ✦ Drop in. Compose. ✦ No janky cuts ✦ Reduced-motion aware ✦ Tree-shake from one tag ✦ Web Components standard ✦

PLATE 04 / 06 — Doctrines

Six rules. No compromises.

Each tile is its own composition: motion-tilt wrapping motion-spotlight. Cursor-tracked light, physics-driven 3D: two primitives, six surfaces.

01
Easing
Springs over curves

Cubic-bezier snaps. Springs flow. Interrupt one mid-flight and it carries velocity into the next state.
02
Architecture
Composition over config

Wrap a tag inside another tag. No props bridges. No render functions. No adapters.
03
Foundation
Standards over abstractions

Custom elements are a browser API. The library is just a spring-physics layer over them.
04
Adoption
Drop-in over rewrites

Add motion to existing markup. Never refactor a component to make it move.
05
Behavior
Interrupt, don’t snap

Every animation is reversible. Hover, leave, hover again. The spring catches the velocity and continues.
06
Reach
One tag, every framework

Same HTML in React, Vue, Svelte, Solid, Angular, Astro, or plain pages. The browser is the runtime.

PLATE 05 / 06 — Cuts & Springs

Drag to feel the difference.

Left: how UIs used to move. Keyframes, fixed durations, sharp endings. Right: this library. Drag the handle, click anywhere, or hit it with the arrow keys.

// before HARD CUT cubic-bezier · fixed · 200ms
// after spring · interruptible · 0.6s

INSERT — Code, animated

Code that writes itself.

The same component that powers the docs (motion-code) is itself animated. Three modes shown live: a typing playback that keeps looping, a scroll-revealed snippet that draws in on view, and a quiet copy-block for the moments code should just be code.

N° 01 Type-mode · auto-loops type · type-speed · type-loop-delay
N° 02 Reveal-mode · scroll-driven draws in line-by-line on viewport entry
N° 03 Quiet-mode · the chrome strips down compact · copy · no loop
N° 04 Inline-mode · drop code into prose copy · copy-visible · plain

Hover any of these and a copy chip appears: install with npm install motion-components, import the bulk via import 'motion-components', or a single tag with import 'motion-components/motion-hover'.

With copy-visible the button stays put. That's useful for terminal lines: run npx tsc --noEmit before a release, or npm run build to press the bundle.

Plain mode reads as a chip. Wrap a tag name like <motion-headline> or a method call like el.replay(). No copy button, just the type treatment.

motion-hover motion-press motion-reveal motion-stagger motion-tilt motion-magnetic motion-headline motion-typewriter motion-ticker motion-glitch motion-scramble motion-counter motion-words motion-parallax motion-spotlight motion-flip-card motion-image-compare motion-progress motion-countdown motion-code

PLATE 06 / 06 — Colophon

Built for the

One install. Thirty-three tags. Ship in any framework today.
Read the docs Star on GitHub
From zero to motion install · import · drop in

Colophon

Motion Specimen N°01 was set entirely in the components it documents. Plates were pressed by Lit and animated by Motion One. The specimen was first issued in May, 2026, with no print run, no edition cap, and no proprietary build. Compositions are reproduced as-is.

Typeset in system sans + ui-serif italic. motion-components is open source, distributed under the MIT licence. It may be reproduced, adapted, or torn out of the binding.

EditionN°01 Pressed2026 Plates06 Components33