Skip to content
Site volume
Colourway

Comic kit

Balloon

Speech, shout, thought, whisper and radio balloons: flat reading plates lettered in Shantell caps.

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

A balloon is a voice. It is a reading plate: the words sit on the balloon, never on the art behind it. The shape is drawn on the server with no measuring: one body path stretched over the text box and a tail drawn in pixels from the edge, strokes first and fills after, so the seams disappear. Speech is my voice; shout is one big claim per view; thought is the question a visitor is probably asking; whisper is fine print; radio is a system reply.

Example#

Look of this example

Built to be tested.

Sent. It is in my inbox now.

Live render of examples/balloon/basic.tsx

Usage#

Use a balloon for someone speaking: a short line from Max, a client, the site itself. It is a plate (D-F3), lettered in caps by a comic letterer's hand, with a tail that points at the speaker, or off the panel when the narrator speaks.

  • Kinds. speech (default), shout (spiked, one per view at every volume), thought (a cloud with bubbles), whisper (a dashed rule) and radio (a lightning tail, for system and automated replies, such as "Sent").
  • Tails. A shorthand such as bottom-left, or a full spec with side, at, length and angle; "none" for no tail.
  • Fills. paper, white, caption, inverse and spot, each a sanctioned pair.
  • Shape. Round up to twelve words, boxier above, chosen on the server with no measuring.
  • speaker adds a hidden "Jordan Reyes: " for screen readers; live="polite" announces radio replies.

Layer and volume#

Reading layer: text, fill and outline are identical at every volume; the register sets the line width and the shadow ink. Quiet: no arrival. One shout per view at every volume.

Anatomy#

Built to be tested.

The parts of examples/balloon/anatomy.tsx, numbered:
  1. Bodydata-mk-part="body"
  2. TailPoints at the speaker..mk-balloon-tail
  3. LetteringShantell Sans, caps by CSS, 16 px and up..mk-balloon-text

Volume#

  • Quiet

    Built to be tested.

    Sent. It is in my inbox now.

    Identical; no arrival.

  • Studio

    Built to be tested.

    Sent. It is in my inbox now.

    Pops in from the tail tip once.

  • Press

    Built to be tested.

    Sent. It is in my inbox now.

    The same; the register sets the line and shadow.

  • Rave

    Built to be tested.

    Sent. It is in my inbox now.

    The same.

Content#

  • 35 words at most (D-D7); a dev warning and checkBalloon enforce it. Shorter is better.
  • Write in sentence case; the caps come from CSS, so screen readers read words, not letters.
  • No em dashes, no "X, not Y" tells. Jokes are welcome here; prices and instructions are not.

Do and don't#

Do

Built to be tested.

A short line, in character.

Don't

Our pricing starts at $3,200 for a five-page templated site with two rounds of revisions and launch support.

A price list in a balloon.

Balloons are for voice. Prices are in the literal zone and need the text face, where people can read and compare them (D-I2, C8).

Accessibility#

  • 0° always; text from the balloon pair tokens; sentence-case source, capitals through CSS.
  • ≤ 35 words (a development warning and checkBalloon); longer copy belongs on a words panel in Schibsted.
  • speaker adds a visually hidden "Jordan Reyes: " prefix; live="polite" adds role="status" for replies.
  • Arrives with a small pop from the tail, then stays still; reduced motion: present at rest.

Props#

PropTypeDefaultDescription
kindBalloonKindnone
tail"none" | TailSpec | TailShorthandbottom-leftThe tail: a side and position, a shorthand, or `none` (default `bottom-left`).
fillBalloonFillnone
shape"auto" | "boxy" | "round"none`auto`: round up to 12 words, boxy above.
shadowbooleannoneA hard shadow in `--mk-cx-shadow-ink`.
placeAreanoneIn art panels: the area of the 3 × 3 placement grid.
widthstring22remMaximum inline size (default `22rem`).
speakerstringnoneA visually hidden prefix naming who speaks ("Jordan Reyes: ").
live"polite"none`polite` adds `role="status"` (radio replies).
as"blockquote" | "div" | "p"none
seednumbernone
children requiredReactNodenoneSentence-case words, ≤ 35.

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

Tokens#

System tokens (23)

Its own properties (13)

  • --mk-balloon-bg
  • --mk-balloon-bleed
  • --mk-balloon-fg
  • --mk-balloon-max
  • --mk-balloon-origin
  • --mk-balloon-pad-x
  • --mk-balloon-pad-y
  • --mk-cx-line
  • --mk-cx-line-ink
  • --mk-cx-shadow
  • --mk-cx-shadow-ink
  • --mk-tail-k
  • --mk-tail-length

Scanned from its CSS at build and checked against its registry entry; 18 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).