Magnetic Cursor

Elements attract or repel from your cursor with elastic physics. Move your mouse near the elements to see the effect.

01

Basic Button

Simple magnetic button with default settings. Hover near the button to attract it toward your cursor.

02

Attract vs Repel

Compare magnetic modes side by side. The left button attracts toward your cursor, the right button pushes away.

Attract
Repel
03

Strength Variations

From subtle micro-interactions to dramatic magnetic pull. The elastic ease adds a satisfying bounce on release.

15px strength
35px strength
70px + elastic
04

Content Parallax

Card with inner content moving independently for depth. The reverse direction creates a compelling parallax effect.

Premium Card

The inner content moves in the opposite direction, creating a satisfying parallax depth effect.

05

Navigation Menu

Multiple magnetic nav items with snappy easing. Each item has a smaller radius for precise interactions.