Skip to content
Site volume
Colourway

Print kit

Ink field

The moving gradient as printed art, in four modes. Fountain field by default, flat at Quiet, settled within five seconds at Studio.

  • Beta
  • Expressive layer
  • Client leaf
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/ink-field
On this page

The ink field is the hero's living art: the colourway's band inks flowing across a plate and handing over to each other through a printed screen, never a blur. It only ever prints true inks and the paper they sit on. It is art, so it sits behind nothing but its own plate: words go on a reading plate beside it, never on top (D-B1).

Example#

Look of this example
Live render of examples/ink-field/basic.tsx

Four modes share one shader (D-E2):

ModeHand-overPaperInks
fountain (default)fine stochastic riso grain, wideyes4
posterized45° halftone, narrowyes4
smoothcontinuous, mixed in OKLabno4
splitthe squeegee: 45° halftone along one pullyes3, Rave 4

Usage#

Use the ink field as a living gradient behind hero art and covers: inks flowing through a halftone screen, printed by WebGL where it can and as a still everywhere else. It is the moving gradient Max picked (D-E2), never behind words.

  • Modes. The fountain field is the default; smooth, posterized and split fountain ship as modes.
  • Settling. At Studio it bursts on arrival and on each tap or key press, then holds still within 5 s; loops need loop and a motion toggle on the page (D-E3).
  • Fallbacks. Without WebGL, under reduced motion or on a slow device it prints the still, then the flat ink.
  • priority marks the hero field so it loads first; fade bleeds it into the paper.

Layer and volume#

The volume dial decides what the field does; the reading layer around it never changes.

VolumeThe field
Quietone flat ink (--mk-band-1), no motion, no WebGL
Studioa burst on arrival and on each tap or key press, settled within 5 s, then one held frame
Pressbursts; it loops only with loop and while a motion toggle is on the page
Raveloops while a motion toggle is on the page, otherwise bursts

High contrast prints the flat ink too (D-C9). Reduced motion, Save-Data and the paused motion toggle hold one still frame. Without WebGL 2, or on a software renderer, the slot keeps its poster: the same bands and halftone hand-overs, drawn in CSS. At most two fields run at once on a page; the hero one comes first.

mk:pulse jolts the bands forward: a stamp sends 0.5, a sent form 0.6, a tidy 0.4. A scoped pin that changes the inks under a field sends mk:reink from the pinned element.

Anatomy#

The parts of examples/ink-field/basic.tsx, numbered:
  1. FieldA canvas, or its still, filling the slot..mk-ink-field

Volume#

  • Quiet

    One flat ink, no motion, no WebGL.

  • Studio

    Bursts, then settles within 5 s.

  • Press

    Bursts; loops only with a motion toggle.

  • Rave

    Loops while a motion toggle is on the page.

Content#

  • The field has no words. Its slot sits beside the reading column or under a hero's art, never under text.

Do and don't#

Do

Art beside the words, settling.

Don't

An ink field behind a paragraph, looping forever with no pause key.

A loop under the reading.

Moving colour under text fails legibility and WCAG 2.2.2. The field sits beside the words and settles or pauses.

Accessibility#

  • The slot is aria-hidden and takes no pointer events or focus: it means nothing, so it says nothing.
  • Motion always has a cause and stops on its own within five seconds at Quiet and Studio (WCAG 2.2.2). A loop only runs while a MotionToggle is mounted, so a visible pause control always comes with it.
  • Reduced motion always wins over the volume; the field then shows one still frame.
  • No area flashes: bands drift, and colourway changes crossfade over 700 ms.

Props#

PropTypeDefaultDescription
mode"fountain" | "posterized" | "smooth" | "split"fountainDefault `fountain` (D-E2).
loopbooleannonePress only: loop while a `MotionToggle` is mounted (2.2.2).
speednumber10.25 to 2, default 1.
t0numbernone
fadenumber0px, default 0: the AM dissolve into the stock along the bottom edge.
lookPartial<FieldLook>none
priority"hero" | "section"none`hero` engines start first (≤ 2 live per page).
stillReactNodenoneThe server's SVG still of the field (IF-4, P1): `coverToReact(fieldStillNode({ mode, volume }))`, rendered by a server parent and passed in, so its code never ships to the client. It replaces the CSS poster's bands as the first paint (fountain and posterized).
classNamestringnone
styleCSSPropertiesnone

Generated from InkFieldProps in packages/overprint-react/src/ink-field/types.ts.

Tokens#

System tokens (19)

Its own properties (3)

  • --mk-field-band
  • --mk-tile-grain-dark
  • --mk-tile-ht-fringe

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

Changelog#

Arrived in 0.1.0.

0.9.024 October 2026

  • Minorfonts, reactInk field: the SVG still (fieldStillNode in ./art, passed to InkField as still) from a TS port of mk_flow, and the poster on the print kit's shared tiles. Read the whole entry

0.1.024 October 2026

  • Minorreact./ink-field: the WebGL 2 engine with bursts that settle within 5 s, loops only with a mounted motion toggle, pulses, crossfades, the degradation ladder and renderAt; the gate; the looks; readInks; and InkField, at most two live contexts per page, with its CSS poster and the flat fill. Read the whole entry