Skip to content
Site volume
Colourway

Components

Cursor

An ink ring that follows the pointer on desktops, beside the native pointer. Off at Quiet and under reduced motion.

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

Cursor adds an ink ring that eases after the pointer on desktop-class pointers. It never replaces the native pointer, so system cursor sizes and high-contrast cursors keep working. Over a control it grows to 44 px, pressed it shrinks, over a field it hides. An element with data-mk-cursor-label shows a label chip beside the ring; labels only repeat what the element says. Mount it once in the root layout.

Example#

Look of this example
Live render of examples/cursor/basic.tsx

Usage#

Use the cursor on pages where play is the point, such as the home page and the playground (D-H5). It adds an ink ring that eases after the pointer on desktops; it never replaces the native pointer, so system cursor sizes and high-contrast cursors keep working.

  • Mount it once, in the layout of the pages that use it.
  • Behaviour. Over a control it grows to 44 px, pressed it shrinks, over a field or a frame it hides.
  • Labels. An element with data-mk-cursor-label shows a label chip beside the ring, such as "Drag" on the block pile; labels only repeat what the element says.
  • Off at Quiet, under reduced motion and under forced colours.

Anatomy#

The parts of examples/cursor/basic.tsx, numbered:
  1. Ring2 px ink with a paper outline, readable on any plate..mk-cursor-ring
  2. Label chipRepeats what the element says..mk-cursor-label

Volume#

Off at Quiet; on from Studio (10 §5.1). The ring itself does not change.

  • Quiet

    Off: the native pointer only.

  • 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#

  • Labels are one verb: "Drag", "Play". Never instructions people need, since touch screens never see them.

Do and don't#

Do

Beside the native pointer.

Don't

A custom cursor that hides the native pointer on a form page.

Replacing it where people work.

People rely on their own pointer: its size, its contrast, its text caret. The ring adds play without taking any of that away.

Accessibility#

  • Hidden from assistive tech and from pointer events.
  • Off at Quiet, under reduced motion (the OS or the site's own setting) and under forced colours.
  • One animation frame loop while it travels, none at rest.

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

TextSurfaceRoleBoneNight
--mk-on-slab--mk-slablabel 16.49:1 · Lc 98.7, passes 16.21:1 · Lc 95.1, passes

Process at Studio, normal contrast. Every look: the press check.

Props#

PropTypeDefaultDescription
classNamestringnone
specimen{ readonly state?: "rest" | "active" | "pressed"; readonly label?: string; }noneDocs and press frames only: the ring (and a label) printed in place, never following anything.

Generated from CursorProps in packages/overprint-react/src/motion/cursor.tsx.

Tokens#

System tokens (12)

Its own properties (2)

  • --mk-cursor-label-pad
  • --mk-cursor-scale

Scanned from its CSS at build and checked against its registry entry; 4 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