Magnetic Button
→Кнопка «прилипает» к курсору: в радиусе действия элемент плавно тянется за указателем и возвращается на место через линейную интерполяцию. Смещение живёт в CSS-переменных, анимация — один цикл requestAnimationFrame.
★★☆☆☆Easy
Cursor
7 / 7Всё, что реагирует на движение мыши: притяжение, свет, жидкие формы.
Spotlight
→Фонарик через clip-path: контент скрыт в темноте, круглое пятно света следует за курсором с инерцией. Координаты и радиус луча — CSS-переменные --sx / --sy / --sr, видны в Debug-режиме.
★★★☆☆Medium
- CSS Variables
- clip-path
- Pointer Events
- requestAnimationFrame
Liquid Cursor
→Жидкий курсор: цепочка частиц с покадровой интерполяцией сливается в каплю через SVG-фильтр (feGaussianBlur + feColorMatrix). Классический gooey-эффект — без Canvas и WebGL.
★★★★★Hard
- SVG Filters
- DOM
- transform
- Pointer Events
- requestAnimationFrame
Cursor Trails
→Затухающий шлейф из частиц вслед за курсором: Canvas 2D, destination-out для плавного fade и пул частиц с убывающей life.
★★★☆☆Medium
- Canvas 2D
- requestAnimationFrame
- Pointer Events
Cursor Blob
→Аморфная SVG-капля: центр догоняет курсор, скорость движения растягивает якорные точки контура. Замкнутый path собирается кубическими Безье между точками.
★★★★☆Advanced
- SVG
- path interpolation
- requestAnimationFrame
- Pointer Events
Cursor Distortion
→Искажение контента вокруг указателя: Canvas рисует displacement map (нейтральный 128 + радиальный сдвиг по R/G), SVG feDisplacementMap смещает пиксели сцены — эффект «линзы» без WebGL.
★★★★★Hard
- SVG Filters
- feDisplacementMap
- Canvas 2D
- requestAnimationFrame
- Pointer Events
Interactive Grid
→Сетка ячеек на CSS Grid: расстояние до курсора задаёт «подъём» и свечение каждой ячейки, значения догоняют цель через lerp в requestAnimationFrame. Волна распространяется радиально от указателя.
★★★★☆Advanced
- CSS Grid
- CSS Variables
- requestAnimationFrame
- Pointer Events
- ResizeObserver
01 / 01