Browse components
Text Pressure
A full-width headline whose letters swell in weight and stretch taller as the cursor presses close.
Installation
npx shadcn@latest add @glint-ui/text-pressureFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/text-pressure.json
Usage
import { TextPressure } from "@/components/ui/text-pressure";
<TextPressure text="Pressure" className="font-display text-9xl" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Pressure" | Headline text. |
| minWeight | number | 300 | Weight at rest. |
| maxWeight | number | 900 | Weight under the cursor. |
| radius | number | 280 | Px around the cursor that applies pressure. |
| stretch | number | 0.35 | Extra vertical stretch at full pressure. |
| alpha | boolean | false | Fade letters that feel no pressure. |
| smoothing | number | 0.16 | How quickly letters follow the cursor. |
| className | string | — | Extra classes for the root element. |