Skip to content
Site volume
Colourway

Components

Press run

The first-visit loader: the Mark's four plates print in register, then the veil wipes off.

  • Experimental
  • Reading layer
  • Client leaf
  • Since 0.9.0
  • Press check
Import from@maxgrits/overprint-react/motion
On this page

PressRun is the first-visit loader. On a first visit to a boot path, the stock covers the painted page for 0.8 s while the Mark's four plates print one after another in their line inks, each landing a few pixels out of register and snapping in; then the veil wipes off. Any key, click or touch skips it. PrefsScript decides when it runs (bootPaths, mk-visited), so first paint is never blocked and visitors without JavaScript never see it.

Example#

Look of this example
Live render of examples/press-run/basic.tsx

Usage#

PressRun is the first-visit loader for the home page: the stock covers the painted page for 0.8 s while the mark's four plates print one after another, each landing a little out of register and snapping in; then the veil wipes off. Any key, click or touch skips it.

  • First visits only, on the paths in PrefsScript's bootPaths (the home by default; these docs pass none), never under reduced motion or Save-Data.
  • Never blocking. The page underneath is fully painted; a CSS failsafe removes the veil at 1.6 s whatever the script does; focus never moves.
  • No sound, even with sound on.

Anatomy#

The parts of examples/press-run/basic.tsx, numbered:
  1. VeilThe stock over the painted page..mk-boot
  2. PlateOne of four, landing out of register, then snapping in..mk-boot-plate

Volume#

The run is the same at every volume and skipped entirely at Quiet and under reduced motion.

  • Quiet

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    The site default. Art on its own plates, one display moment per view.

  • Press

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • None: the run is the mark printing itself. It never shows a percentage or a word.

Do and don't#

Do

Once, under a second, over a ready page.

Don't

A loader that holds every visit for three seconds before the page appears.

A wait on every visit.

The press run is a hello, not a gate. It plays once, over a page that has already loaded, and any key skips it.

Accessibility#

  • Hidden from assistive tech; focus never moves; the page underneath is fully painted.
  • Never at Quiet, under reduced motion or with Save-Data; a CSS failsafe hides the veil at 1.6 s whatever the script does.
  • The mark covers well under a quarter of the view, and nothing flashes.
KeysWhat happens
Any keySkips the run at once (so does a click or a touch)

The colour pairs it prints, with their contrast on both papers:

It prints no text of its own (art layer or layout only), so it has no pair to check.

Props#

PropTypeDefaultDescription
option"a" | "b" | "c"the house optionThe Mark option to print (default the house option).
classNamestringnone
specimenbooleannoneDocs and press frames only: the run's last frame printed in place, no veil and no timers.

Generated from PressRunProps in packages/overprint-react/src/motion/press-run.tsx.

Tokens#

System tokens (12)

Its own properties (1)

  • --mk-mark-key

Scanned from its CSS at build and checked against its registry entry; 2 read but not declared there.

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026

  • MinorreactMotion: the additive Cursor and the first-visit PressRun (in ./motion). Read the whole entry