Skip to content
Site volume
Colourway

Comic kit

Offset plates

The colour made of dots: four process screens at C 15°, M 75°, Y 0° and K 45°, in register or off.

  • Experimental
  • Expressive layer
  • Server component
  • Since 0.9.0
  • Press check
Import from@maxgrits/overprint-react/comic
On this page

Offset plates print a colour the way a press does, as four halftone screens in the separation inks at their screen angles. Off register, each plate slides along its own vector by the volume's offset.

Example#

Look of this example
Live render of examples/offset-plates/basic.tsx

Usage#

Use offset plates to print a colour made of dots: four halftone screens in cyan, magenta, yellow and key at their classic angles, in register or off. It is the press itself, as art.

  • Plates. plates sets each separation's coverage; the default is a soft four-colour gradient.
  • Register. in or off; off moves each plate by the volume's separation offset.
  • Photos go through the generators' photo plates, not this (D-I1).

Layer and volume#

Art that fills its host. Quiet: none. Studio: two plates (key and magenta). Press and Rave: four. Photos go through the generators' plates, never here.

Anatomy#

The parts of examples/offset-plates/basic.tsx, numbered:
  1. PlatesFour screens at 15°, 75°, 0° and 45°, blended..mk-offset-plates

Volume#

  • Quiet

    None.

  • Studio

    Two plates.

  • Press

    Four plates.

  • Rave

    Four plates, 5 px off.

Content#

  • None: plates are art.

Do and don't#

Do

Art made of dots.

Don't

Offset plates used to print a client's screenshot.

Proof printed over.

Screenshots are evidence and stay untouched (D-I1). Plates are for art.

Accessibility#

  • Always aria-hidden art, never behind words.

Props#

PropTypeDefaultDescription
platesreadonly { sep: Sep; coverage: Coverage; }[]the specimen's: C linear 0 .05 → .9, M linear 0 .8 → .1, Y flat .55, K linear 90 0 → .28The plates and their coverage (default the specimen's: C linear 0 .05 → .9, M linear 0 .8 → .1, Y flat .55, K linear 90 0 → .28).
cellnumber9Screen cell in design units (default 9).
register"in" | "off"noneIn register, or off by the volume's offset.
widthnumber400Design box (default 400 × 300, `slice`).
heightnumbernone
childrenundefinednone

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from OffsetPlatesProps in packages/overprint-react/src/comic/offset-plates.tsx.

Tokens#

System tokens (9)

Its own properties (3)

  • --mk-plate-i
  • --mk-plate-vx
  • --mk-plate-vy

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

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026