Text Cursor Proximity

npx shadcn@latest add "https://fancycomponents.dev/r/text-cursor-proximity.json"

The TextCursorProximity splits its text into letters that respond to cursor movement by adjusting their CSS properties based on the distance between the letter and cursor position.

1. Splitting text into individual letters
2. Tracking cursor position relative to each letter
3. Smoothly transitioning CSS values with motion's useTransform hook
4. Supporting multiple falloff patterns for the effect

How it works

The component calculates the distance between the cursor and each letter in real-time. When the cursor comes within the specified radius of a letter, that letter's CSS properties (like scale, color, etc.) smoothly interpolate between two states. For this, we use the motion library's useTransform hook, which maps the CSS properties from the styles.*.from state to the styles.*.to state based on the proximity value (which ranges from 0 to 1).

• Default state: (defined in styles.*.from)
• Target state (defined in styles.*.to)

You can interpolate any value that motion supports (which is actually any CSS value, even those that can't be animated by the browser, like mask-image).

The closer the cursor gets to a letter, the closer that letter moves toward its target state.

Falloff

With the falloff prop, you can control the type of falloff. It can be either linear, exponential, or gaussian. The following demo showcases the exponential one. The effects are best observed on a larger block of text.

It seems like interpolating on large number of letters simultaneously can be a bit slow, even when we're avoiding re-renders with state updates. If you're experiencing performance issues, try to limit the length of the text you're animating.