Installation & details
Magnetic by Motion Primitives. A component that creates a magnetic attraction effect on hover. Try the live React demo, inspect the original source, and install from PODIE.
React · Tailwind CSS · MIT license · Original registry
Added to PODIE · Catalog updated · Page updated
Installation and usage
The published examples target React 19 and Tailwind CSS 4. See the recorded installation tests and their limits; verify compatibility in your own project.
01 — Set up your project
First component? Initialize shadcn once.
pnpm dlx shadcn@latest init02 — Install the component
pnpm dlx shadcn@latest add https://podie.dev/r/motion-primitives--magnetic.json03 — Add it to your interface
Import the component from the path created by the installer.
"use client";
import { Magnetic } from '@/components/motion-primitives/magnetic';
export default function Example() {
return (
<Magnetic intensity={0.35} range={160}>
<button>Come closer</button>
</Magnetic>
);
}Dependencies and distribution
motion The CLI installs declared dependencies. React is a project prerequisite; scenes may include bundled libraries with their own notices.
By Motion Primitives · MIT license. Original component source and license included.