Magnetic Hover

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

ReactHTML

Installation

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

Usage

Add class="magnetic-hover" to the element you want to apply the effect.

<button class="magnetic-hover">...</button>
 
<a href="#" class="magnetic-hover">...</a>
 
<div class="magnetic-hover">...</div>

Data Attributes

Data AttributeTypeDefaultRequiredDescription
data-strengthnumber1falseControls the intensity of the magnetic effect
Reveal EffectBox Reveal