Инженерия за пикселями.

Фонарик через clip-path: контент скрыт в темноте, круглое пятно света следует за курсором с инерцией. Координаты и радиус луча — CSS-переменные --sx / --sy / --sr, видны в Debug-режиме.

Жидкий курсор: цепочка частиц с покадровой интерполяцией сливается в каплю через SVG-фильтр (feGaussianBlur + feColorMatrix). Классический gooey-эффект — без Canvas и WebGL.

Затухающий шлейф из частиц вслед за курсором: Canvas 2D, destination-out для плавного fade и пул частиц с убывающей life.

Аморфная SVG-капля: центр догоняет курсор, скорость движения растягивает якорные точки контура. Замкнутый path собирается кубическими Безье между точками.

Искажение контента вокруг указателя: Canvas рисует displacement map (нейтральный 128 + радиальный сдвиг по R/G), SVG feDisplacementMap смещает пиксели сцены — эффект «линзы» без WebGL.

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

Прокрутите demo-область: слои смещаются с разной скоростью, но остаются в кадре — эффект глубины без «улёта» сцены за край экрана.

Прокрутите demo-область: блоки скрыты до входа в viewport. IntersectionObserver добавляет is-visible — opacity и transform анимируются один раз.

Прокрутите demo-область: вертикальная лента заполняется по scroll progress, узлы активируются у линии активации.

Sticky-сцена: clip-path и оттенок фона меняются между секциями по scroll progress — плавный морф формы.

Вертикальный scroll demo-области двигает горизонтальную галерею внутри sticky-viewport через translate3d.

Прокрутите demo-область: метки слева прилипают к линии pin, пока длинное тело каждой секции проходит мимо viewport.

Карточка приподнимается и получает мягкую тень при :hover. Параметры подъёма, масштаба и длительности — CSS-переменные, настраиваемые в Debug.

При наведении рамка загорается вращающимся conic-gradient и мягким свечением. Внутренняя маска сохраняет чистый фон карточки.

Ссылки с анимированным подчёркиванием: линия растёт от заданной точки (left / center / right) через scaleX и transform-origin.

Карточка с изображением: при hover картинка масштабируется, оверлей с текстом поднимается и проявляется — классический image reveal без JS-анимации кадров.

Кнопки с диагональным бликом: псевдоэлемент с градиентом проходит по поверхности при :hover — эффект «shine sweep» без Canvas.

Двусторонние карточки с 3D-переворотом при :hover. Ось flip (X или Y), perspective и длительность задаются CSS-переменными.

Три линии гамбургера трансформируются в крестик с каскадной задержкой, вращением и масштабом — меню раскрывается синхронно. Кликните кнопку.

macOS-подобный dock: иконки масштабируются и поднимаются по близости курсора с плавной интерполяцией. Водите мышь над панелью.

Пункты раскрываются по дуге от центральной кнопки с каскадной задержкой и transform — классический radial fan menu. Кликните центр.

Кольцо пунктов вращается к активному элементу с плавной интерполяцией угла — центр показывает текущий раздел. Кликните пункт на кольце.

Индикатор активного таба движется с пружинной физикой: позиция и скорость интегрируются каждый кадр с overshoot — эффект «резинового» переключения.

Модальное окно «портала»: backdrop раскрывается radial clip-path от точки клика, а карточка влетает с пружинным scale и blur — эффект телепортации.

Blob-индикатор плавно морфится между табами, а контент переключается clip-path wipe с инерцией — двойной визуальный эффект переключения.

Магнитный тултип: следует за курсором с пружинной инерцией внутри зоны триггера, светящийся «луч» соединяет подсказку с элементом.

Каскадный dropdown: пункты «падают» с elastic bounce и каскадной задержкой, контейнер разворачивается с overshoot — эффект водопада опций.

Стек тостов с пружинной физикой: новые уведомления «вталкивают» старые вверх с overshoot, dismiss — slide-out с fade. Для эффекта нажмите «Push toast» несколько раз подряд и закройте одно или несколько уведомлений через крестик ×.

Контекстное меню из frosted glass: по правому клику backdrop-blur «прожигает» окно, пункты выезжают с каскадом и scale — как macOS context menu.

Split-screen с перетаскиваемым разделителем: при отпускании divider пружинно догоняет ближайшую snap-точку (20% / 50% / 80%) с overshoot и инерцией броска.

Три панели с drag-handles: потяните узкий разделитель между Explorer, Editor и Preview — ширины догоняют курсор с пружинной инерцией и лёгким overshoot. Для контраста нажмите Reset и посмотрите, как панели «резиново» возвращаются к 33 / 34 / 33%.

Бесконечная лента секций внутри demo-области: при достижении края scroll мгновенно перепрыгивает без рывка — seamless loop с parallax-слоями.

Container queries в действии: под карточками — ползунок Container width, или потяните вертикальный │ на правом краю оранжевого контейнера. Сетка плавно морфится между 1, 2 и 3 колонками без media query скачков.

Четыре размытых blob-якоря с radial-gradient создают живой mesh-фон; позиции догоняют курсор и медленно орбитируют в покое.

Поле частиц-«созвездие»: курсор отталкивает точки, близкие узлы соединяются светящимися линиями — реактивный network-фон.

Органические амёбы через SVG gooey-фильтр: blob-ы «дышат», морфят border-radius и притягиваются к курсору — живой биолюминесцентный фон.

Многослойные синусоидальные волны на Canvas; движение курсора создаёт ripple-возмущения, расходящиеся по полю высот.

Живой gradient-фон за frosted glass-панелями; SVG feDisplacementMap искажает стекло вокруг курсора — эффект преломляющей линзы.

Плавающие геометрические фигуры с независимыми float-циклами и mouse parallax по depth-слоям — многоуровневый depth-фон.

Крупная типографика искажается вокруг курсора: Canvas-карта смещения питает SVG feDisplacementMap — эффект «жидкой линзы» на буквах.

Циклическая смена заголовков: каждая буква влетает и вылетает с индивидуальным stagger, blur и accent-gradient.

Строки типографики проявляются при скролле: clip-path снимает «занавес», текст поднимается с stagger. Чтобы увидеть анимацию снова — нажмите Reset.

Буквы-частицы рисуются на Canvas по траектории курсора и растворяются через destination-out — типографический след.

Каждая буква — пружинная частица: отталкивается от курсора и возвращается на место с damping — физика в типографике.