Magnetic Tooltip

Magnetic Tooltip delivers a physics-based cursor-following tooltip with a requestAnimationFrame lerp loop — smooth, 60fps, and zero React re-renders during animation.

Magnetic Tooltip delivers a physics-based cursor-following tooltip with a requestAnimationFrame lerp loop — smooth, 60fps, and zero React re-renders during animation. The tooltip renders via ReactDOM.createPortal into document.body , so it escapes every Framer parent frame regardless of transform , filter , or perspective applied to ancestors. No z-index debugging required. What's included: Adjustable magnetic strength (0.02–0.5) — sticky to snappy X/Y cursor offset control (-200 to 200px) Frosted glass backdrop blur (0–60px) Configurable tooltip: text, background color, text color, border radius Configurable trigger zone: label text, font size, border toggle, border color, border radius No framer-motion — pure requestAnimationFrame + React Zero re-renders during the animation loop SSR-safe portal rendering Perfect for hero sections, product showcases, and interactive demos that need a premium hover effect without importing animation libraries.

Lerp-based magnetic cursor tooltip