Motion в Rocketmind — функциональный, не декоративный. Каждая анимация решает задачу: подтверждает действие, указывает направление, сообщает о смене состояния.

8.2 Timing-шкала

Полоска показывает относительную длину каждого токена.

8.3 Easing-кривые

Нажми «Play», чтобы увидеть как шарик движется с данной кривой.

8.4 Микроинтерактивы

Наведи курсор на каждый элемент.

8.5 Переходы между состояниями экрана

Нажми кнопку, чтобы воспроизвести анимацию появления элемента.

8.6 Loading / Skeleton

Skeleton занимает место сразу — нет «прыжков» при загрузке. Shimmer движется бесконечно.

8.9 Animated Grid Lines

Тонкие линии hero-секции материализуют каркас дизайна. Только одноразовая анимация при загрузке — после появления статичны. Используется с токеном --duration-grid (1600ms).

8.10 Dot Grid Lens

Фоновый эффект «линзы» на сетке точек: при движении курсора точки вблизи него увеличиваются по квадратичному закону. Используется в hero-секции и CTA лендинга. Реализован через Canvas.

8.11 Hero Background Noise & Bottom Fade

Для тёмного hero допустим отдельный декоративный слой: мягкая подложка на токенах, статичный шум и нижний fade в --background. Эффект применяется только к фону, а не к контенту.

8.12 Hero Round Glass Lens

Круглая hero-линза искажает уже собранную сцену внутри круга через WebGL, без blur и без отдельной DOM-копии контента внутри линзы. Центр остаётся почти стабильным, а fisheye/barrel-искажение усиливается к краю.

Настроить

Двигай курсор

Примеры использования

Пример 1 — anchorRef + motion

<RoundGlassLens
  sceneRef={sceneRef}
  anchorRef={anchorRef}
  size={280}
  xOffset={60}
  yOffset={18}
  motionParallax
/>

Пример 2 — Custom optical settings

AI AGENTS

Powered by Rocketmind

<RoundGlassLens
  sceneRef={sceneRef}
  size={220}
  xOffset={-40}
  refraction={0.04}
  depth={0.22}
  dispersion={0.55}
  distortionRadius={1.1}
  blur={0.22}
  gradientAngle={135}
  motionParallax
/>

Пример 3 — Subtle / no shadow

Rocketmind

Strategic growth platform

<RoundGlassLens
  sceneRef={sceneRef}
  size={180}
  refraction={0.025}
  depth={0.14}
  dispersion={0.28}
  blur={0.12}
  shadowEnabled={false}
  motionParallax
/>

8.13 Wave Animation

Фоновый шейдер из бегущей сетки точек. Применяется в футере лендинга и на экране 404 как декоративный слой. Точки плавно затухают по мере удаления от камеры (глубина u_fade_near → u_fade_far), поэтому нижние точки остаются яркими, а верх плавно растворяется в фоне.

<WaveAnimation
  pointSize={3}
  waveSpeed={2}
  waveIntensity={10}
  particleColor="#ffffff"
  gridDistance={4}
/>

8.14 New-notification state («не просмотрено»)

Состояние для свежесозданной карточки/строки, которую пользователь ещё не открыл. Мягкая бледно-жёлтая подложка и плавно-пульсирующая жёлтая обводка — привлекают внимание без агрессии. Снимается после первого клика.

<Link
  data-new={isNew || undefined}
  className="rounded-sm border border-border transition-colors
             data-[new=true]:bg-[var(--rm-yellow-10)]
             data-[new=true]:rm-new-pulse"
>
  …
</Link>

Правила использования: только на одном иерархическом уровне; не более 3 непросмотренных в списке; не сочетать с акцентной hover-обводкой. См. §8.14 DS MD.

8.15 Message rise (real-time-only)

Анимация «подлёта» новых сообщений в чате при отправке в real-time. Не применяется к исторически загруженным сообщениям. Визуально — bubble подлетает снизу (14px) через прозрачность за 0.28s.

// Set<string> id-шников real-time сообщений
const [freshIds, setFreshIds] = useState(new Set());

// При добавлении нового сообщения:
setMessages(p => [...p, msg]);
setFreshIds(p => new Set(p).add(msg.id));

// В bubble:
<div className={freshIds.has(msg.id) ? "rm-message-rise" : ""}>
  …
</div>

Правила: не применять при загрузке истории; один раз при mount (не повторяется); не комбинировать с `rm-new-pulse`. См. §8.15 DS MD.

8.16 Pipeline step dimmed state

Визуальное приглушение не-пройденных шагов последовательного процесса — в списках вроде sidebar R-экспертов. Пользователь мгновенно видит, что за спиной, что сейчас, что впереди.

const isDimmed =
  status === "not_started" &&
  currentExpertCodename !== codename;

<div className={`… ${isDimmed ? "opacity-50 hover:opacity-100" : ""}`}>
  …
</div>

Правила: current-шаг никогда не приглушается; hover восстанавливает; не использовать в dashboard-сценариях (там прогресс-бар). См. §8.16 DS MD.

8.17 Content load — fade-in-up

Появление контента при загрузке экрана в SaaS-обучении: тело урока, дашборд программы («разводная»), вопрос блиц-теста, экран AI-эксперта, профиль. opacity 0→1 + подъём 8px, 400ms, ease-enter — одним блоком.

// Класс .rm-content-enter в @rocketmind/ui globals.css.
// Перезапуск анимации на смене контента — через React key:
<article key={lesson.id} className="rm-content-enter …">…</article>

Правила: один раз на маунт контейнера; перезапуск через key (id урока/программы/индекс вопроса/id агента); НЕ scroll-triggered; НЕ на каждый элемент списка. См. §8.17 DS MD.