Cursor & Magnetic JS Component

Magnetic cursor effects add an interactive, playful quality to websites. This component creates elements that are attracted to the cursor, stretching and moving toward it within a configurable radius.

How It Works

The component calculates the distance between the cursor and each magnetic element, applying transform translations based on proximity. Easing functions ensure smooth, natural-feeling motion.

Configuration

Customize the magnetic strength, trigger radius, and easing curves per element. The component supports both text and image elements, and can be combined with our Mouse Follower library for a complete cursor experience.