Proximity Text
Pro
Letters that grow heavier, larger and warmer as the pointer gets close, using a variable font weight.
Get closer
Move the pointer near the letters, drag on touch, or press Tab
Customize
160px
Falloff
900
Color shift
Installation
Proximity Text is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy proximity-text.tsx into components/ui and run npm install motion.
Usage
import { ProximityText } from "@/components/ui/proximity-text";
<ProximityText
text="Get closer"
radius={160}
accentColor="#ff784f"
className="text-7xl tracking-tight"
/>Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text, split into letters. |
| radius | number | 160 | Distance in pixels at which letters start to react. |
| falloff | "linear" | "exponential" | "linear" | How quickly the effect fades with distance. |
| minWeight | number | 300 | Font weight far from the pointer. |
| maxWeight | number | 900 | Font weight right under the pointer. |
| maxScale | number | 1.15 | Scale of a letter right under the pointer. |
| accentColor | string | — | Color the nearest letters shift toward. Leave it out to keep one color. |
| baseColor | string | "#f4ede3" | Text color away from the pointer. |
| className | string | — | Extra classes for the text. Keep a variable font such as Inter. |
Dependencies: motion