← Все технологииМедуза,
SCRIPTS · MOTION SYSTEM
Медуза,
которая чувствует скорость.
Интерактивный курсор превращает движение мыши в характер: мягко следует за указателем, разворачивается по направлению жеста и меняет силу гребка от едва заметной до максимальной.
SVG / POINTER / SPRING01—04
LIVE / 01
Двигайте мышь.
Скорость видна в форме.
Медленное движение почти не искажает силуэт. Быстрый жест сжимает купол, вытягивает щупальца и добавляет импульс. Направление определяется отдельно от силы — поэтому медуза не летит боком.
JELLY MOTION TELEMETRYREAL TIME
Телеметрия учебная: все вычисления выполняются локально в браузере, данные никуда не отправляются.
BEHAVIOUR / 02
Один жест.
Четыре связанных процесса.
Считываем движение
Pointer Events дают текущие координаты. Разница между соседними событиями превращается в вектор и скорость.
Определяем направление
Угол вычисляется через atan2. Кратчайший поворот сглаживается за доли секунды, без скачков через 360°.
Догоняем курсор
Положение живёт как пружина: притяжение к цели создаёт инерцию, затухание гасит лишние колебания.
Меняем форму
Скорость нормализуется в коэффициент 0…1. Он управляет сжатием купола, длиной щупалец и силой импульса.
MODEL / 03
Движение — это
не transition.
Каждый кадр пересчитывает скорость и положение. Благодаря этому медуза не приклеена к курсору, а обладает собственной массой и продолжает мягко двигаться после остановки мыши.
motion.jsrequestAnimationFrame
velocity += (target - position) × spring
velocity ×= damping
position += velocity × deltaTime
energy = clamp(pointerSpeed / maxSpeed, 0, 1)
rotation += shortestAngle × responseIMPLEMENTATION / 04
Технологии и реализация
Векторная анатомия
Купол, блик, край и шесть щупалец — отдельные SVG-контуры. Они остаются резкими на любом экране и могут деформироваться независимо.
Параметрические keyframes
JavaScript передаёт силу жеста через CSS custom properties. Одни keyframes дают сотни промежуточных состояний без генерации новых стилей.
Pointer Events и физика
Скорость считается в px/ms с учётом времени между событиями. Пружина обновляется в requestAnimationFrame и нормализует шаг кадра.
Один компактный слой
Эффект создаёт единственный контейнер с inline SVG. pointer-events отключены, поэтому медуза не мешает ссылкам, кнопкам и выделению текста.
DETAILS / 05
Почему эффект
остаётся плавным.
Независимость от частоты кадров
deltaTime ограничивается и участвует во всех расчётах. Движение сохраняет характер и на 60 Гц, и на дисплеях с высокой частотой обновления.
Два режима поворота
Во время жеста направление догоняется быстро — примерно за 0,1–0,2 секунды. После остановки остаётся медленная стабилизация, чтобы убрать мельтешение.
Пиковая энергия гребка
Внутри одной фазы сохраняется максимальная измеренная скорость. Поэтому форма не дрожит от неодинакового интервала между событиями мыши.
Уважение к настройкам пользователя
На touch-устройствах курсор не создаётся. При prefers-reduced-motion интерактивное движение отключается, а содержание страницы остаётся доступным.
PIPELINE / 06
От события до пикселя
pointermove→vector + speed→spring solver→CSS variables→SVG transform
Никаких изображений, Canvas или сторонней анимационной библиотеки: только браузерные API, CSS и векторная графика.
BIG FISH / INTERACTION DESIGN
Скрипт становится хорошим,
когда движение объясняет характер.
Мы используем подобные механики там, где они поддерживают идею интерфейса, а не отвлекают от неё.
Обсудить интерактивный проект ↗