[SOLOV.DEV]

О проекте
Lab
Обо мне
Контакт

О проекте
Lab
Обо мне
Контакт

Home
THE.LAB
Magnetic Button

Show Debug

// move cursor around the buttons

Magnetic Button

★★☆☆☆Easy

Кнопка «прилипает» к курсору: в радиусе действия элемент плавно тянется за указателем и возвращается на место через линейную интерполяцию. Смещение живёт в CSS-переменных, анимация — один цикл requestAnimationFrame.

CSS Variables
transform
requestAnimationFrame
Pointer Events

// tech passport

✓JavaScript
✓requestAnimationFrame
✓CSS Variables
✓Pointer Events
✓No Libraries

// returns demo to initial state and resets debug controls

// more in Cursor

01 / 07

Magnetic Button
Spotlight
Liquid Cursor
Cursor Trails
Cursor Blob
Cursor Distortion
Interactive Grid

// source