The ink field

The ink field is Overprint's living art: true inks flowing and handing over through grainy halftone, like a riso print that will not sit still. It is art, so it never sits behind words; it lives in its own region beside them.

The four modes#

Fountain is the default hero art. Smooth, posterized and split fountain ship as modes of the same shader. Pick a mode and a volume: at Studio the field bursts and settles; at Press and Rave it loops while its pause key says so.

When it runs#

• A cause wakes it: the page loading, a tap or a key press, or another moment pulsing it (mk:pulse, for example a stamp's thump at 0.5). A burst wakes in 400 ms, flows for 4 s and eases out over 1 s: still within five seconds.
• Loops are opt-in. At Press a field loops only with loop, at Rave always, and only while a MotionToggle is on the page. Pressing it stops the next frame, and the choice is remembered.
• It is gated. At most two engines per page; an engine releases ten seconds after its region leaves the view; without WebGL 2, on Save-Data, under reduced motion or at Quiet the field is its poster, a still frame of the same flow.
• It costs little. The engine and the four modes are 10 KB gzipped, loaded after first paint, and a frame takes at most 3 ms at the median.

In code#

import { InkField } from "@maxgrits/overprint-react/ink-field";
import { MotionToggle } from "@maxgrits/overprint-react/motion";

<div className="hero-art">
  <InkField priority="hero" mode="fountain" loop />
</div>
<MotionToggle />