Proximity Weight Text React component
Letters that thicken and lift as the pointer gets near, in a soft wave that travels with it, without pushing the rest of the line around.
About the Proximity Weight Text component
Proximity Weight Text responds to the pointer like a magnet. Letters nearby thicken, brighten and lift a little, in a soft wave that travels with you along the line.
It uses a stroke rather than a heavier font, so letters grow without shifting their neighbours and the line stays perfectly steady.
When to use it
Use it for hero lines and short statements on desktop-first pages.
On touch screens it stays still, so don't rely on it to carry meaning.
Installation
Add the Proximity Weight Text component to your project with the shadcn CLI. It lands in components/proximity-weight-text.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/proximity-weight-textProps
<ProximityWeightText /> accepts 4 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| text | string | "Heavier as you get closer" |
| radius How far the pointer reaches, in px. | number | 150 |
| weight Extra thickness at the pointer, in em. | number | 0.045 |
| lift How far letters lift toward the pointer, in em. | number | 0.08 |
- textstringDefault: "Heavier as you get closer"
- radius
How far the pointer reaches, in px.
numberDefault: 150 - weight
Extra thickness at the pointer, in em.
numberDefault: 0.045 - lift
How far letters lift toward the pointer, in em.
numberDefault: 0.08
Proximity Weight Text FAQ
- Do I need a variable font?
- No. Thickness comes from a text stroke, so any font works. A lighter weight at rest shows the effect best.
- Does the line shift as letters grow?
- No. Stroke doesn't change letter widths, so nothing moves sideways.
- How far does the pointer reach?
- radius sets it, in pixels.
- What about reduced motion?
- The letters stay at full strength and don't respond.
