Архитектура плавного движения в современном веб-дизайне

Движение в вебе десять лет подражало кино. Мы заимствовали кривые сглаживания из анимационного софта, применяли их к прямоугольникам и называли результат интерфейсом. Последние два года незаметно завершили эту эпоху. На смену пришла не новая библиотека, а другая ментальная модель: движение как симуляция материала, а не заскриптованное представление.

Этот сдвиг важен, потому что пользователи больше не читают интерфейс — они его прощупывают. Перетаскивание с сопротивлением, панель, что плавно оседает, поверхность, идущая рябью под курсором: каждое из них — утверждение о том, из чего сделана вещь. Ошибитесь в физике — и продукт будет казаться дешёвым так, что никакой визуальный лоск не спасёт.

1. Математические основы движения

Кубическая кривая Безье описывает путь во времени. Пружина описывает связь между силой, массой и затуханием. Разница в том, что Безье приходится переписывать каждый раз при изменении расстояния, тогда как пружина просто разрешается — вот почему прерываемые, управляемые жестами интерфейсы почти повсеместно пришли к пружинам.

Движение никогда не должно быть декоративным. Это невидимый тактильный слой, переводящий цифровую обратную связь в физическую интуицию.

На GPU тот же принцип действует уровнем ниже. Вместо анимации трансформации вы смещаете вершины или возмущаете UV, и «анимация» становится функцией, вычисляемой заново каждый кадр. Ничего не интерполируется — всё выводится.

import { ShaderMaterial, Vector2 } from 'three';

// Displacement is derived per-frame, never tweened.
export const fluidDistortion = new ShaderMaterial({
  uniforms: {
    uTime: { value: 0 },
    uMouse: { value: new Vector2(0, 0) },
    uStrength: { value: 0.35 },
  },
  fragmentShader: `
    uniform float uTime;
    uniform vec2 uMouse;
    uniform float uStrength;

    void main() {
      vec2 uv = gl_FragCoord.xy / 1024.0;
      float d = distance(uv, uMouse);
      uv += sin(uv.yx * 8.0 + uTime) * uStrength * (1.0 - d);
      gl_FragColor = vec4(uv, 0.5, 1.0);
    }
  `,
});

2. Оптимизация циклов рендеринга шейдеров

Наивный цикл загружает каждый uniform в каждом кадре и перечитывает состояние, которое CPU уже знает. Записи uniform дёшевы по отдельности и разорительны в совокупности. Группируйте их, пропускайте неизменившиеся и полностью останавливайте цикл, когда сцена в покое — простаивающий canvas не должен стоить ничего.

3. Физика пружин против сглаживания

Сглаживание выигрывает там, где движение декоративно, а расстояние фиксировано — переход между страницами, затухание. Пружины выигрывают в тот момент, когда человек может прервать анимацию, ведь пружина уже несёт скорость, а Безье вынужден начинать заново. Практическое правило: если палец или курсор может коснуться этого на лету — симулируйте.

4. Выводы и главное

Относитесь к движению как к свойству материала, а не как к финальному штриху — и большинство сложных решений придут сами. Выбирайте пружины для всего интерактивного, выводите значения, а не интерполируйте на GPU, и измеряйте стоимость простоя каждого эффекта, который выпускаете. Интерфейсы, что ощущаются дорогими в 2026 году, — это те, что ведут себя как объекты.