Skip to content
Site volume
Colourway

Comic kit

Impact star

Where things land: an impact flash behind the hit, sparkles for new things, dizzy stars on an orbit.

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

The flash sits behind the hit object (the 3D pile's comic hits use it), sparkles mark something new, dizzy stars circle an object that took a knock.

Example#

Look of this example
Live render of examples/impact-star/basic.tsx

Usage#

Use an impact star where something lands: a flash behind the hit object, sparkles around something new, dizzy stars around a block that toppled. The 3D pile uses it with an SFX for its comic hits.

  • Variants. flash (default), sparkle and dizzy.
  • One flash per impact, scaling in once; never an opacity strobe (WCAG 2.3.1).

Layer and volume#

Art: flashes per view 0 / 1 / 2 / 4, sparkles 0 / 3 / 6 / 12. The flash scales in once (0 to 1.1 to 1 over 260 ms); hidden at Quiet.

Anatomy#

The parts of examples/impact-star/basic.tsx, numbered:
  1. StarA paper burst with a spot burst inside..mk-impact-star

Volume#

  • Quiet

    None.

  • Studio

    One flash and three sparkles per view.

  • Press

    Two flashes, six sparkles.

  • Rave

    Four flashes, twelve sparkles.

Content#

  • None: an impact star is art.

Do and don't#

Do

One flash per impact.

Don't

A flash that blinks on and off three times a second.

A strobe.

Flashing more than three times a second can trigger seizures (WCAG 2.3.1). One flash, then still.

Accessibility#

  • aria-hidden; never an opacity strobe (WCAG 2.3.1).

Props#

PropTypeDefaultDescription
variantImpactVariantnone
sizenumber96px (default 96).
inksreadonly InkRef[]noneflash: [outer, inner]; sparkle: [star]; dizzy: the stars' inks in turn.
seednumbernone
childrenundefinednone

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

Tokens#

System tokens (8)

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