TextProNew
Text Cursor Proximity
Letters near the cursor change size, color or blur while far ones stay put. Any CSS property can be animated.
Customize
color
activeColor
Based on Text Cursor Proximity (MIT license) · Terms of use
Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The text. |
| styles | { [cssProperty]: { from, to } } | — | Which CSS properties change, from which value to which. |
| containerRef | RefObject<HTMLDivElement | null> | — | The element the cursor position is measured in. |
| radius | number | 50 | Reach around the cursor, in pixels. |
| falloff | 'linear' | 'exponential' | 'gaussian' | "linear" | How fast the effect fades with distance. |
| as | ElementType | "span" | HTML tag of the element. |
| className | string | — | Extra classes. |
| color | string | "#ffffff" | Colour of the letters away from the cursor. |
| activeColor | string | "#737373" | Colour the letters turn near the cursor. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge