Skip to content
Site volume
Colourway

Comic kit

Speed lines

Tapered ink wedges trailing a move, behind the moving object, never under words.

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

Speed lines trail a move. Without a count they print in three batches the volume reveals: 12 at Studio, 24 at Press, 40 at Rave.

Example#

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

Usage#

Use speed lines behind something that moves: a block flying in, a card arriving, a hero object. Tapered wedges trail the move in one direction.

  • Props. direction, count (default by volume), maxWidth, minLen, ink and seed.
  • Behind objects, never under words. They streak in once.

Layer and volume#

Art: groups per view 0 / 1 / 2 / 4. Streaks in once (300 ms); hidden at Quiet.

Anatomy#

The parts of examples/speed-lines/basic.tsx, numbered:
  1. HostThe art region they fill.[data-mk-layer="art"]
  2. LinesTapered wedges trailing the move..mk-speed-lines

Volume#

  • Quiet

    None.

  • Studio

    One group per view, up to 12 lines.

  • Press

    Two groups, up to 24.

  • Rave

    Four groups, up to 40.

Content#

  • None: speed lines are art.

Do and don't#

Do

Behind a moving object.

Don't

Speed lines running under a paragraph to make it feel fast.

Under reading text.

Lines under text cut through the letters. They belong to the art that moves.

Accessibility#

  • aria-hidden; never under words.

Props#

PropTypeDefaultDescription
direction"down" | "left" | "right" | "up"noneThe direction of the move (the lines trail behind it).
countnumbernoneA fixed count; default by volume (12 / 24 / 40).
maxWidthnumbernone
minLennumbernone
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 SpeedLinesProps in packages/overprint-react/src/comic/speed-lines.tsx.

Tokens#

System tokens (5)

Its own properties (1)

  • --mk-streak-from

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).