Magnetic Links
Links and button drawn toward your cursor like magnets.
Features
- Links and button pulled toward the cursor
- Spring back when the pointer leaves
- A blue dot glides under the hovered link
- Still for reduced motion
Best for: Agencies and creative studios that want the nav to feel alive under the cursor.
Installation
npm install motion @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | - | Your logo. It inherits currentColor. |
| items | NavItem[] | - | Links: label, href, optional icon and children. |
| cta | { label: string; href: string } | - | Optional call-to-action button. |
| className | string | - | Extra classes for the outer element. |
FAQ
Is the Magnetic Links navbar free to use?
Yes. Magnetic Links is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Magnetic Links work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Magnetic Links in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Magnetic Links need installed?
motion, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Magnetic Links accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.