Link Preview

An inline link that previews its destination, following the cursor horizontally.

A link that shows a preview of where it goes. It follows your cursor sideways, and flips below the link when there is no room above.

This was more maths than animation. getBoundingClientRect() returns viewport coordinates, so the preview is clamped against the window first, then converted into an offset from the link.

The follow is a spring, so the preview trails the cursor a little instead of teleporting. That small lag is the whole effect.

One thing I did not expect: when the preview flips below the link, the transform-origin has to flip too. Otherwise it grows away from the link instead of out of it.

Tailwind transform dont work for direction so i changed that to motion values.