[SOLOV.DEV]

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

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

Home
THE.LAB
Interactive Grid

Show Debug

// move the cursor — cells ripple in a wave

Interactive Grid

★★★★☆Advanced

Сетка ячеек на CSS Grid: расстояние до курсора задаёт «подъём» и свечение каждой ячейки, значения догоняют цель через lerp в requestAnimationFrame. Волна распространяется радиально от указателя.

CSS Grid
CSS Variables
requestAnimationFrame
Pointer Events
ResizeObserver

// tech passport

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

// returns demo to initial state and resets debug controls

// more in Cursor

07 / 07

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

←Cursor Distortion

// source