Skip to content
Site volume
Colourway

Print kit

Page wipe

Three field-ink bands sweep across the page once when a link is followed, at Press and Rave.

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

The page wipe marks a navigation at the loud volumes: three bands of the field's inks, each with a halftone fringe, cross the page once while the new page renders. It never waits for, delays or covers the navigation.

Example#

Look of this example
Live render of examples/page-wipe/basic.tsx

Usage#

Use the page wipe at Press and Rave to turn the page between routes: a plate of ink sweeps across the screen and off. It takes no pointer events and never blocks reading.

  • When. It plays on internal link activation, in the capture phase, before navigation.
  • Sound. With sound on it plays the flip voice.
  • Never at Quiet or Studio, and never under reduced motion.

Layer and volume#

A fixed art overlay that takes no pointer events. Quiet and Studio: none. Press: 410 ms. Rave: 480 ms. It plays the flip voice when sound is on.

Anatomy#

The parts of examples/page-wipe/basic.tsx, numbered:
  1. WipeA fixed art overlay, no pointer events..mk-page-wipe

Volume#

  • Quiet

    None.

  • Studio

    None.

  • Press

    410 ms.

  • Rave

    480 ms.

Content#

  • None: the wipe is a transition.

Do and don't#

Do

Short, at Press and up.

Don't

A two-second wipe on every link, at the default volume.

A wait on every click.

A transition should feel like turning a page, not waiting for one. It stays under half a second, and only where the volume asks for it.

Accessibility#

  • aria-hidden, pointer-events: none, gone within 480 ms: a tap lands on what is under it.
  • Reduced motion: none.

Props#

PropTypeDefaultDescription
previewbooleannonePrints the bands mid-sweep inside the nearest positioned box, without listening (docs and the press check).
classNamestringnone

Generated from PageWipeProps in packages/overprint-react/src/motion/page-wipe.tsx.

Tokens#

System tokens (6)

Its own properties (3)

  • --mk-tile-ht-fringe
  • --mk-wipe-at
  • --mk-wipe-ink

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026

  • Minorfonts, reactPageWipe (link activation at Press and Rave, the flip voice) and FlexWord (the width axis on a view timeline), and the SFX width flex at Press and Rave. Read the whole entry
  • PatchreactPageWipe sweeps again at Press and Rave, across and off the page. Read the whole entry