Components / Text Animations / Pressure Text

Pressure Text

Type that reacts to the cursor. Letters thicken and widen under the pointer while their neighbours give up the space, so the word keeps its overall width. Both axes are synthesised from a single cut, so a letter morphs rather than cross-dissolving between two weights.

Usage

import PressureText from '@/components/pressure-text'

<PressureText
  text="Interfaces that move"
  weight={200}
  bold={0.075}
  spread={0.9}
  cursorRadius={3.2}
  falloff="smooth"
/>

Installation

npx shadcn@latest add https://morphiq.prathampatel.design/r/pressure-text.json

Model

Σ wᵢ′ = Σ wᵢ

each letter swells by its falloff from the cursor, then every box is rescaled so the word keeps its width

Props

Property	Type	Default	Description
`text`	`string`	`''`	Rendered per glyph, and used as the element's accessible name.
`weight`	`number`	`200`	Resting weight of the single cut the effect thickens.
`bold`	`number`	`0.075`	Peak stroke thickening under the cursor, in em.
`spread`	`number`	`0.9`	How much width a letter takes from its neighbours, 0..1-ish.
`cursorRadius`	`number`	`3.2`	Reach of the pointer's influence, in em — it scales with the type.
`smoothing`	`number`	`0.03`	Per-frame approach rate. Lower is slower to settle.
`falloff`	`Falloff`	`'linear'`	—