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.
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.
