Magnetic
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
Add subtle pointer attraction to a child element.
magnetic-demo
Overview
Magnetic is a decorative wrapper that moves toward a fine pointer while hovered. Use it sparingly for prominent actions where the attraction supports focus without changing layout.
Installation
Usage
import { Magnetic } from "@/components/animated/magnetic"
<Magnetic strength={0.3}><button>Explore</button></Magnetic>Accessibility
The effect disables itself for touch input and reduced motion. The child remains responsible for semantics, focus styling, accessible naming, and keyboard behavior.