Skip to content
Site volume
Colourway

Print kit

Flex word

The one big display word that flexes on the width axis as the page scrolls past it.

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

A flex word is a display line of up to three words that widens and narrows on Anybody's width axis as it crosses the view. Its box is reserved at its widest, so nothing around it moves.

Example#

Look of this example
Built to last
Live render of examples/flex-word/basic.tsx

Usage#

Use a flex word for one display word that breathes with the scroll: its width axis stretches as it crosses the viewport, then rests. It is one per view, on a heading people read once.

  • Scroll-driven. It runs on view() timelines where the browser has them and rests elsewhere.
  • Reserved width. The word's slot is reserved, so nothing around it reflows.

Layer and volume#

Display type, one per view. Quiet: still. Studio: up to 20 width units. Press: 40. Rave: 60. Only where scroll timelines exist; elsewhere it rests.

Anatomy#

Built to last
The parts of examples/flex-word/basic.tsx, numbered:
  1. SlotReserved at the widest width..mk-flex-word
  2. WordThe width axis follows the scroll..mk-flex-word-text

Volume#

  • Quiet

    Built to last

    Still.

  • Studio

    Built to last

    Up to 20 width units.

  • Press

    Built to last

    Up to 40.

  • Rave

    Built to last

    Up to 60.

Content#

  • One to three words of display type.

Do and don't#

Do

Built to last

One per view.

Don't

Every heading on the page stretching as you scroll.

Every heading moving.

One moving word is a moment; several are a page that will not hold still. The volume budget allows one.

Accessibility#

  • The words are read once; the reserving copy is aria-hidden.
  • Reduced motion: still.

Props#

PropTypeDefaultDescription
children requiredstringnoneAt most 3 words, one line.
asElementTypespanThe element (default `span`); a section title passes `h2`.
typeRole"display" | "head-section"displayThe type role class (default `display`).

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

Tokens#

System tokens (5)

Its own properties (1)

  • --mk-flex-range

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

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026

  • Minorfonts, reactPageWipe (link activation at Press and Rave, the flip voice) and FlexWord (the width axis on a view timeline), and the SFX width flex at Press and Rave. Read the whole entry