Text Pressure: Free React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add text-pressure.en

New project or installation trouble? Start here →

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<TextPressure/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/text-pressure.en.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

Text Pressure