Skip to content
Site volume
Colourway

Comic kit

Kirby krackle

Clustered ink blobs and rings inside a cloud plume: static energy for hero art and the 404.

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

Krackle is the comic's static energy: clusters of blobs and rings that shrink as they run, inside a cloud plume. On Bone it prints key blobs in a support plume; on Night, night blobs in a magenta plume with a spot outline off register.

Example#

Look of this example
Live render of examples/kirby-krackle/basic.tsx

Usage#

Use Kirby krackle for raw energy: clustered blobs and rings in a cloud plume, the cosmic crackle of old comics. It suits the hero art, the 404 and launches.

  • Props. count, r (the blob radius range), ink, plume and plumeInk.
  • On Night it prints night-coloured blobs in a magenta plume with an offset outline.
  • Static energy: it does not move.

Layer and volume#

Art that fills its host. Quiet: none. Studio: one per page, hero art and the 404 only. Press: two per view. Rave: four. It never moves.

Anatomy#

The parts of examples/kirby-krackle/basic.tsx, numbered:
  1. PlumeThe cloud behind the blobs..mk-krackle-plume
  2. KrackleBlobs and rings, seeded..mk-krackle-blobs

Volume#

  • Quiet

    None.

  • Studio

    One per page, on the hero or the 404.

  • Press

    Two per view.

  • Rave

    Four per view.

Content#

  • None: krackle is art.

Do and don't#

Do

One burst of energy.

Don't

Krackle on every card in a grid of twelve.

Energy everywhere, so nowhere.

Krackle works as the loudest thing on a page. Repeated, it becomes wallpaper and fights the content.

Accessibility#

  • Always aria-hidden art, never behind words.

Props#

PropTypeDefaultDescription
countnumber30Clusters (default 30).
rreadonly [number, number][2, 15]Blob radius range in design units (default [2, 15]).
inkInkRefthe key on Bone, the night paper on NightThe blobs' ink (default the key on Bone, the night paper on Night).
plume"cloud" | "none"none
plumeInkInkRefsupportThe plume's ink (default `support` on Bone, magenta on Night).
seednumbernone
childrenundefinednone

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

Tokens#

System tokens (8)

Its own properties (3)

  • --mk-krackle-ink
  • --mk-krackle-line
  • --mk-krackle-plume

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

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026