Overprint moves like a print shop on a good day: plates land, ink snaps into register, stamps thump, and then everything settles. Every animation here has a cause (a page arriving, a press, a scroll, a hit), finishes within five seconds at the default volume, and leaves the words exactly where they printed. This section shows all of it, live: every curve, every duration, every moment the packages ship, and the twelve principles of animation as Overprint applies them.
This site moves the same way. The first visit to the home runs the press run, links swap pages under a wipe at Press and Rave, each page's head lands, plates arrive as you scroll, copying code earns a stamp. The dials in the header change all of it while you watch.
The law#
The colour moves; the words hold still. Ink, plates, fields, blocks and stamps may arrive, flow and land. Text moves only as part of its plate's arrival, then never again, and it is square at rest. Hover never moves a word or grows a box.
Words hold still
Three more rules hold everywhere:
- Every motion has a cause. Nothing bounces for attention. No reveal plays twice.
- Calm at rest. At Quiet and Studio, nothing is still drawing five seconds after the last cause. Anything that loops at Press or Rave shows a pause key (WCAG 2.2.2).
- Reduced motion always wins. The volume never overrides it.
The volume scale#
The visitor's volume dial moves the expressive layer only: the reading layer (keys, overlays, toasts, disclosures) moves the same at every volume. Studio is the default.
| Volume | Feel | Long moments | Micro moments | Ink field | 3D |
|---|---|---|---|---|---|
| Quiet | Calm | The state changes; the page fades in 160 ms | Off (stickers appear, stamps print at rest) | Flat | Still |
| Studio | Balanced | Panels 300 ms, 40 ms apart; titles 360 ms | Full | Bursts, still within 5 s | Full; settles within 5 s |
| Press | Arcade | Panels 360 ms, 48 ms apart; titles 440 ms; the wipe 410 ms | Full | Bursts, or loops behind a pause key | Full |
| Rave | Overdrive | Panels 420 ms, 55 ms apart; titles 520 ms; the wipe 480 ms | Full | Loops behind a pause key | Full, more blocks from the start |
Reduced motion#
With prefers-reduced-motion: reduce, or a site's own data-mk-motion="reduce" on the root, every duration drops to zero except a few short fades (140 ms) and the times things wait (a toast's life, a seal's delay). Entrances show their end state; stamps print at rest; stickers sit square; the ink field is one still frame; the 3D pile is its still with a "Play with the blocks" key. A route change here becomes a 140 ms crossfade. Sound is not motion: reduced motion leaves it alone.
Every demo on these pages has a Reduced motion switch. It turns on the site-level choice while you look, so the whole page shows what reduced motion does, then puts your own setting back.
The motion stage#
Every animation on these pages plays in a stage: a proof on its own paper, with one strip of controls under it.
- Play and Replay run the moment again from the start.
- Speed plays every animation in the frame at 1×, 0.5× or 0.25×. Sound cues keep real time.
- Volume sets the frame's own volume, whatever the page's dial says.
- Reduced motion previews the reduced version, as above.
- Sound is the site's own toggle. It starts off.
- Copy code copies the snippet that starts the moment in your own app.
What moves on this site#
| Where | What moves | The rule |
|---|---|---|
| A first visit to the home | The press run | About 0.8 s; any key or click skips it |
| Your pointer, on a desktop | The cursor ring | Added to the native pointer; off at Quiet |
| Every link to another page | The page wipe at Press and Rave | The new page renders under it; no tap or key is lost |
| Every page's arrival | The head lands; plates arrive like panels | Words never move after they land |
| Scrolling | Panels, building blocks, one flexing word | Off under reduced motion |
| Copying code | A Copied stamp | Stamps are caused |
| The changelog | Shipped stamps | Each lands once, on first view |
| Sound, when you turn it on | Thumps, pops, wipes, knocks | Off by default |
| The dials in the header and footer | The whole site, live | Quiet calm to Rave |
Budgets#
| Budget | Limit | Measured by |
|---|---|---|
| The runtime, the axis and the pause key | 4 KB gzipped together; the pre-paint script 1 KB | budgets |
| Cursor, PressRun, PageWipe | 2 KB gzipped each, loaded where used | budgets |
| Calm at rest | No frames drawn 5.5 s after the last cause at Quiet and Studio | motion tests |
| Loops at Press and Rave | Only behind a visible pause key; pressing it stops the next frame | motion tests |
| Reduced motion | Opacity only, 200 ms at most; no scroll-linked motion; the 3D still | motion tests |
| Hover | No text box moves or grows | motion tests |
| Taps during arrivals | A click right after a route change reaches its target | motion tests |
| Layout shift | 0 from every arrival, the second ink and FlexWord | layout-shift entries |
| Flashes | At most 3 a second over any area larger than 10 % of the view | release review |
Every page of this section#
- The twelve principles: each principle of animation, applied by a real piece you can replay.
- Curves: every curve, drawn live.
- Durations: every duration at every volume, on one timeline.
- Moments: the whole catalogue, each live.
- Transitions: route changes, arrivals, overlays, toasts.
- Scroll: panels, building blocks, the flexing word.
- The ink field: four modes, bursts, loops behind a pause key.
- 3D: the live pile and the CSS blocks.
- Comic motion: SFX, panels, balloons, stars and lines.
- Sound: every voice, played through the real engine.