Sticky Cursor and Magnet
Move your mouse around. Hover the outlined target to see the cursor stick and stretch. The buttons use the Magnet wrapper to subtly pull toward the pointer.
Installation
Install Dependencies
Copy and Paste the component
@/components/reframe-ui/sticky-cursor-and-magnet.tsx
Usage
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| StickyCursor stickyRef | React.RefObject<HTMLElement> | - | Yes | Ref to the target element that the cursor sticks to when hovered. |
| StickyCursor baseSize | number | 15 | No | Cursor size in pixels when not hovering the target. |
| StickyCursor hoverSize | number | 60 | No | Cursor size in pixels when hovering the target. |
| StickyCursor positionSpring | { damping?: number; stiffness?: number; mass?: number } | - | No | Spring options for smoothing the cursor position. |
| StickyCursor resetDuration | number | 0.1 | No | Duration in seconds for resetting scale on mouse leave. |
| StickyCursor cursorClassName | string | - | No | Class names for the cursor element. Uses Tailwind by default. |
| StickyCursor zIndex | number | 50 | No | z-index of the cursor container. |
| Magnet children | React.ReactNode | - | Yes | Content to apply magnetic behavior to. |
| Magnet stiffness | number | 350 | No | Spring stiffness for the magnetic motion. |
| Magnet damping | number | 5 | No | Spring damping for the magnetic motion. |
| Magnet mass | number | 0.5 | No | Spring mass for the magnetic motion. |
| Magnet intensity | number | 0.1 | No | How strongly the element moves toward the pointer. |
| Magnet className | string | - | No | Class names applied to the magnetic wrapper. |
| Magnet style | React.CSSProperties | - | No | Inline styles applied to the magnetic wrapper. |
© Copyright 2025. All rights reserved.Built by @thommysart