Sticky Cursor and Magnet

PRO

Preview live, install via shadcn or copy the source.

Installation

Install via shadcn

This will install the component and its dependencies automatically.

PRO COMPONENT

Unlock with PRO

This component is exclusive to reframe/ui PRO.
Get instant access to all premium components and templates.

Usage

sticky-cursor-and-magnet-usage.tsxTSX

Props

NameTypeDefaultRequiredDescription
StickyCursor stickyRefReact.RefObject<HTMLElement>YesRef to the target element that the cursor sticks to when hovered.
StickyCursor baseSizenumber15NoCursor size in pixels when not hovering the target.
StickyCursor hoverSizenumber60NoCursor size in pixels when hovering the target.
StickyCursor positionSpring{ damping?: number; stiffness?: number; mass?: number }NoSpring options for smoothing the cursor position.
StickyCursor resetDurationnumber0.1NoDuration in seconds for resetting scale on mouse leave.
StickyCursor cursorClassNamestringNoClass names for the cursor element. Uses Tailwind by default.
StickyCursor zIndexnumber50Noz-index of the cursor container.
Magnet childrenReact.ReactNodeYesContent to apply magnetic behavior to.
Magnet stiffnessnumber350NoSpring stiffness for the magnetic motion.
Magnet dampingnumber5NoSpring damping for the magnetic motion.
Magnet massnumber0.5NoSpring mass for the magnetic motion.
Magnet intensitynumber0.1NoHow strongly the element moves toward the pointer.
Magnet classNamestringNoClass names applied to the magnetic wrapper.
Magnet styleReact.CSSPropertiesNoInline styles applied to the magnetic wrapper.
© reframe/ui 2026Built by @thommysart
More in Cursor Effects