Magnetic Hover

A smooth magnetic hover effect that subtly pulls elements toward the cursor.

ReactHTML
React
Open in
Loading...

Installation

pnpm dlx shadcn@latest add https://atlasui.dev/r/magnetic-hover.json

Usage

import { MagneticHover } from "@/components/magnetic-hover";
import { MagneticHover } from "@/components/magnetic-hover";
<MagneticHover>
  {/* Pass any children here, and the magnetic effect will be applied to it.*/}
</MagneticHover>
<MagneticHover>
  {/* Pass any children here, and the magnetic effect will be applied to it.*/}
</MagneticHover>

Props

PropTypeDefaultDescription
childrenReact.ReactNode-The content to which the magnetic effect is applied
strengthnumber1Controls the intensity of the magnetic effect
Reveal EffectBox Reveal