Text Pressure for React

Text Pressure sets a word across the whole width of its container in light, narrow letters spaced out to both edges. Where the pointer presses, the letters swell heavy and wide, each by its own distance, so a bulge of bold type follows the pointer along the word. When the pointer leaves, they ease back.

Use it for one display word or a short line that should fill its column: a hero, a poster, a section title. For text that stays at its own size inside a sentence and only thickens, use Variable Proximity; to push letters apart, Kerning Text. The font size comes from the container's width through a container query. The letters' centres are measured once as the pointer enters; each move writes the pointer's position to two CSS variables, and a CSS utility the install adds to your stylesheet works out each letter's weight and width from its distance, with no animation frame loop.

Installation

Usage

import { TextPressure } from "@/components/ui/text-pressure";

<h1 className="uppercase">
  <TextPressure text="Pressure" />
</h1>

Demos

Range

minWeight is the weight at rest and maxWeight the weight under the pointer, any weights your font has; reach is how far the pressure spreads, as a share of the text's width. A thin rest and a wide reach make a long, soft swell.

Widen

widen is how a pressed letter widens. By default it stretches sideways (scale), which works in any font, the site's included. With a font that has a width axis (wdth), such as Roboto Flex or Open Sans, widen="font" uses the font's own wider shapes instead, so the strokes keep their weight; widen="none" only changes the weight.

Accessibility

Screen readers read the text once, from a visually hidden copy, never letter by letter. The effect only follows the pointer and changes no meaning, so keyboard and touch users miss nothing; inside a link with keyboard focus the whole word shows half pressed. Every letter keeps the room of its heaviest weight, so nothing shifts under the pointer. With reduced motion the pressure follows the pointer without easing.

FAQ

API Reference