Skip to content
Site volume
Colourway

Comic kit

Focus lines

Radial wedges that aim the eye and leave the centre clear; emanata say "look".

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

Focus lines aim at a centre and leave it clear for whatever sits there: an object or a plate's bounding circle. Emanata are five short strokes around an object.

Example#

Look of this example
Live render of examples/focus-lines/basic.tsx

Usage#

Use focus lines to point at something: radial wedges aimed at a centre, leaving it clear, like a comic panel's spotlight. The emanata variant draws five short strokes around an object that is surprised or shaking.

  • Props. center (as fractions of the host), clear (the clear radius), count, width, jitter, variant and ink.
  • The clear radius covers whatever sits at the centre, an object or a plate's bounding circle.

Layer and volume#

Art: groups per view 0 / 1 / 2 / 4. Grows out from the clear radius once (360 ms); hidden at Quiet.

Anatomy#

The parts of examples/focus-lines/basic.tsx, numbered:
  1. LinesRadial wedges, clear at the centre..mk-focus-lines

Volume#

  • Quiet

    None.

  • Studio

    One group per view.

  • Press

    Two.

  • Rave

    Four.

Content#

  • None: focus lines are art. What they point at says the words.

Do and don't#

Do

A clear centre around the subject.

Don't

Focus lines centred on a block of body text, with no clear radius.

Lines crossing the words.

The lines point; they never cross what they point at. Keep the clear radius larger than the plate at the centre.

Accessibility#

  • aria-hidden; the clear radius covers the centre's object, never a word.

Props#

PropTypeDefaultDescription
center[number, number]the middleThe centre in host fractions (default the middle).
clearnumber.18The clear radius as a fraction of the host (default .18).
countnumbernone
width[number, number][1, 6]Wedge widths at the outer edge, in host thousandths (default [1, 6]).
jitternumbernone
variant"emanata" | "focus"none
inkInkRefnone
seednumbernone
childrenundefinednone

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

Tokens#

System tokens (3)

Its own properties (2)

  • --mk-focus-cx
  • --mk-focus-cy

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

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactThe print and comic kits, P0 (21 P2-T11 to P2-T15): the art core (seeded halftone, bursts, balloons, lines, krackle, printer's marks, SFX layers, the texture tiles and gen-print-tiles), the print kit (Halftone, Overprint, PrinterMarks, Sticker, Stamp, Seal, useStampLand, Tape, Grain, Misregistration and the .mk-ov second ink, GiantGlyph, ShapeGlyph), the data Cover (grid and score, coverAlt, CoverLegend), the comic registers and kit (Panel, PanelGrid, Balloon, Caption, CornerBox, EditorsNote, ContinuedIn, SFX, SfxBurst, SpeedLines, FocusLines, ImpactStar, KeyPop).