Text Pressure

Characters scale and deform in real time inside the cursor's pressure field (variable fonts) — the closer the cursor, the wider, heavier, and more slanted they get.

Characters scale and deform in real time inside the cursor's pressure field. The closer the cursor, the wider, heavier, and more slanted the characters become, producing a fluid variable-font texture.

Loading preview…

npx shadcn@latest add https://webberui.com/r/text-pressure.json

Playground

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

Texttext

Font size (px)fontSize

Pressure radius (px)radius

180

Caret smoothingsmoothing

0.18

Italic slantitalic

Opacity changealpha

<TextPressure />

Installation

npx shadcn@latest add https://webberui.com/r/text-pressure.json

Or, once registries are configured in components.json, install it as @webberui/text-pressure.

Usage

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

<TextPressure text="PRESSURE" fontSize={92} />

How it works

The effect is driven by a requestAnimationFrame loop: every frame it computes the distance from each character's center to the cursor and maps it through a smoothstep falloff into font weight, scaleX, scaleY, and skew.
Font weight (weight) interpolates smoothly on system fonts that support variable weight (such as SF Pro or Segoe UI Variable); width and height scale via transform, so they are smooth in any font.
Once the cursor leaves, every character returns to its neutral state. When "reduce motion" is enabled at the system level, static text is rendered.
radius controls how far the pressure reaches and must be positive; the smaller smoothing is, the more the cursor lags.

Props

Prop	Type	Default	Description
`text`	`string`	—	The text to display
`weight`	`boolean`	`true`	Font weight varies with cursor distance
`width`	`boolean`	`true`	Character width (horizontal scale) varies with cursor distance
`height`	`boolean`	`true`	Character height (vertical scale) varies with cursor distance
`alpha`	`boolean`	`false`	Opacity varies with cursor distance
`italic`	`boolean`	`false`	Italic (skew) varies with cursor distance
`radius`	`number`	`180`	Radius of the pressure field (px)
`fontSize`	`number`	`64`	Font size (px)
`weightRange`	`[number, number]`	`[200, 900]`	Font weight range, `[farthest, nearest]`
`smoothing`	`number`	`0.18`	Cursor smoothing factor (`0`–`1`; smaller lags more)
`className`	`string`	—	forwarded to the outermost container; set text color and font family here

Accessibility

When the user has "reduce motion" enabled at the system level, static text is rendered and the animation loop never starts
The complete text is exposed sr-only to assistive technology, and the per-character visual layer is hidden with aria-hidden