Woodtype Flush Block

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<WoodtypeFlushBlock />

Installation

npx shadcn@latest add https://webberui.com/r/woodtype-flush-block.json

Usage

import { WoodtypeFlushBlock } from "@/components/ui/woodtype-flush-block";

<WoodtypeFlushBlock
  text={"THE\nWOODTYPE\nREVIVAL"}
  className="font-black uppercase leading-[0.92]"
  lineClassName="text-6xl"
/>

Split lines with the \n newline character, or pass an array through lines instead:

<WoodtypeFlushBlock
  lines={["THE", "WOODTYPE", "REVIVAL"]}
  className="font-black uppercase"
/>

For the wdth axis to genuinely take effect, the container's typeface must be a variable font with a width (wdth) axis (for example Roboto Flex, Recursive, or Fraunces). If the typeface does not support that axis, the component automatically falls back to horizontal scaling to make up the difference, and still keeps the flush alignment and the spring-open effect.

Props

How it works

• Solving for flush lines: the most captivating thing about woodtype composition is that lines with different character counts are all stretched flush to both edges. The component creates one hidden measurement span per line, measures its actual width at different wdth values, then binary-searches for the wdth value that fills the container's content width exactly — a short line (few characters) needs a wider width, a long line (many characters) needs a narrower one, so each line naturally ends up with a different wdth.
• Pixel-level compensation: a variable font's wdth axis has its own upper and lower bounds, so an extremely short or long line may not fill or may overshoot on width alone. After solving, the component makes up the last few pixels with a residual scaleX to guarantee every line is truly flush; if the typeface has no wdth axis at all, scaleX achieves the flush alignment on its own and the effect still holds.
• Spring-open reveal: on entering the viewport, each line starts from entryWdth (an extremely narrow width) plus the extra compression from entryCompress, like a slender column of woodtype, and springs open to the solved width in sequence according to stagger; bounce controls the spring-back feel. The width is driven by the CSS variable --wb-wdth, and font-variation-settings reflects its changes live.
• Responsive re-solving: a ResizeObserver watches the container width, and the solve runs once more after document.fonts.ready (when the web fonts have loaded); when the container changes width, every line smoothly re-justifies. The measurement and solving both complete inside a layout effect before the first paint, avoiding layout flashes.
• Typesetting advice: a heavy weight (font-black), uppercase, and tight leading best convey the dense, stacked feel of a woodtype poster; set the font size on lineClassName and keep shared styles such as weight, tracking, and colour on the container's className.

Accessibility

• When the user has "reduce motion" enabled at the system level, the flush heading is presented directly at its solved width with no spring-open reveal animation
• The complete heading text lives in sr-only so a screen reader reads it once; both the visual layer and the hidden measurement layer are aria-hidden decorative copies and are never read twice
• The heading renders with a semantic tag (h2 by default, adjustable through as), preserving the document outline hierarchy