Pro
Text pressure
A headline that answers the pointer: each letter grows heavier as the pointer comes near and relaxes as it leaves, so a wave of weight follows the hand across the line.
pnpm dlx shadcn@latest add @caliper/text-pressureWhen to use
Use it for
- One display headline in a hero or a closing section.
- Brand moments where type is the picture.
Skip it when
- Body text and anything people read for long.
- Fonts without a weight axis; the steps jump.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- One string to read
- The heading is read as one string from a hidden copy; the letters are hidden presentation.
Styling
- Weight, eased
- Each letter's weight comes from a smooth falloff with distance and a short transition, so the wave is soft rather than flickering.
Installation
pnpm dlx shadcn@latest add @caliper/text-pressure
Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source. It is built from TextPressure and pressureWeight.
import { TextPressure, pressureWeight } from "@/components/ui/text-pressure"
The worked example comes with Pro
The 25-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
TextPressure
component
pressureWeight
component
No props of its own; it accepts the native props of its root element.
Accessibility
It is built on native elements and keeps aria-hidden in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion
Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.