Skip to content
Site volume
Colourway

Comic kit

Splash title

A splash page's title lettered on an arc with an extrusion, a burst and a kicker, over a real heading.

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

A splash title letters up to four words on an arc, with a seven-step extrusion, an off-register pass, a burst behind and a kicker below; presents and credits print as captions. The heading itself is a real h1 or h2 with the title text.

Example#

Look of this example

Websites that win

Live render of examples/splash-title/basic.tsx

Usage#

Use a splash title to open a big comic moment: a section's splash panel, a launch, a campaign. The title letters on an arc with an extrusion and an ink offset, a kicker beneath like an SFX, and an optional burst behind; the real heading is plain text underneath.

  • Accessible by design. The heading (h1 or h2) holds the title as text; the arc lettering is its aria-hidden art, which is why it may curve.
  • Props. title (four words at most, three at the width extremes), kicker, presents ("MAKR Labs presents"), credits, curve (0 to 0.3), ink and burst.
  • Phones flatten the curve and size the title with clamp().

Layer and volume#

Composite: the heading is reading text; the lettering is its aria-hidden art. Quiet prints the heading as plain display type and no art; Studio letters it with a gentler arc and four extrusion steps; Press and Rave go full. Phones letter it flat.

Anatomy#

Websites that win

The parts of examples/splash-title/basic.tsx, numbered:
  1. LetteringThe art: arced, white with a 4 px ink stroke, aria-hidden..mk-splash-art
  2. BurstBehind the lettering..mk-splash-burst
  3. KickerAn SFX-style second line..mk-splash-kicker

Volume#

  • Quiet

    Websites that win

    A plain display heading, no art.

  • Studio

    Websites that win

    Splash panels only, curve up to 0.15.

  • Press

    Websites that win

    Full, curve 0.28.

  • Rave

    Websites that win

    Full.

Content#

  • Three or four words that work as a poster: "Websites that win".
  • The kicker is one word in capitals: "CUSTOMERS."

Do and don't#

Do

Websites that win

A poster line.

Don't

A splash title of eleven words on an arc.

A sentence bent into a curve.

Arced, extruded lettering only reads at a few words. Longer lines become a puzzle; set them as a heading (D-D3).

Accessibility#

  • The title is a real heading in the reading order; the lettering is never read twice.
  • The lettering's face is white with a key outline of 4 px or more, so it holds 3:1 against any art.
  • Reduced motion: no drop-in.

Props#

PropTypeDefaultDescription
title requiredstringnoneAt most 4 words (3 at the width extremes, D-D3).
kickerstringnoneAn SFX-style second line ("CUSTOMERS.").
presentsstringnoneA caption over the splash ("MAKR Labs presents").
creditsReactNodenoneA caption under it (the story's credits).
as"h1" | "h2"none
curvenumber.28; Studio prints at most .15The arc's rise as a share of its chord, 0 to .3 (default .28; Studio prints at most .15).
inkInkRefsupportThe off-register pass (default `support`; a line ink only where the title means that line, D-C2).
burstbooleantrueThe burst behind the lettering (default true).
seednumbernone
childrenundefinednone

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

Tokens#

System tokens (13)

Its own properties (7)

  • --mk-splash-ink
  • --mk-splash-kicker-type
  • --mk-splash-kicker-wdth
  • --mk-splash-loud
  • --mk-splash-ratio
  • --mk-splash-type
  • --mk-splash-wdth

Scanned from its CSS at build and checked against its registry entry; 3 read but not declared there.

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026

  • Minorfonts, reactKirbyKrackle, Newsprint, OffsetPlates and SplashTitle. Read the whole entry
  • Patchreact, threeCombobox gives its inline list an id and the input's name in the server markup and marks its box as the input's focus-ring host, and a highlighted row's second line prints in --mk-text; the EmptyState and Popover descriptions print in the meta role (16 px, 500, so --mk-text-2 clears the APCA floor); SplashTitle's Quiet heading prints on its own paper plate and wraps inside its cell; the Toast viewport and specimen keep one column no wider than their box; ProofSheet's frame links draw the focus ring. Read the whole entry