# MOTION — правило плавности для всего Remotion-пайплайна

> Обязательно для ЛЮБОЙ анимации в проекте. Цель: движение как в физическом мире —
> объект не стартует с мгновенной скоростью, всегда есть разгон и замедление.
> Код-воплощение правила — `src/motion.ts`. Эталон применения — `src/KineticCaption.tsx`.

## Железные правила
1. **Никогда `linear`.** Линейное движение = робот. Всё через пружину или easing-кривую.
2. **Вход объектов — `spring()`** (Remotion, физическая инерция). Пресеты: `SPRING.smooth`
   (дефолт, без овершута), `SPRING.gentle` (лёгкая посадка), `SPRING.pop` (акцент, слабый овершут).
3. **`interpolate` только с `easing`** из `EASE` (`out` = expo-out: быстрый старт → долгое мягкое
   торможение; `inOut`; `softOut`). Плюс `extrapolate: clamp` по обоим краям.
4. **Двухуровневый easing** (kinetic-стандарт): recipe-level — общий прогресс сцены;
   selector-level — кривая стаггера между элементами.
5. **Стаггер** между словами/буквами ≈ **1.5–3 кадра** (40–60 мс/символ) — глаз успевает прочесть,
   пауза между словами создаёт «анонс».
6. **Читаемость**: слово держится статично **≥ 0.5 с (15 кадров)** после посадки, прежде чем уходит.
7. **Комбинируй** прозрачность + трансформ. Длительность входа ≈ 14–24 кадра. Не «щёлкать».
8. **Никакого мультяшного bounce** (кроме намеренного `pop`-акцента). Разгон/замедление, не пружина-игрушка.

## Как это выглядит в коде
```tsx
import { SPRING, EASE, enter, ramp, stagger } from "./motion";
// вход слова: прозрачность по easing, сдвиг по пружине
const p  = enter(frame, fps, startFrame, SPRING.smooth);      // 0..1 с инерцией
const y  = (1 - p) * 46;                                      // разъезжается плавно
const op = ramp(frame, startFrame, 16, 0, 1, EASE.out);       // фейд с торможением
// побуквенно: стаггер + пружина на каждый символ
chars.map((c,i) => enter(frame, fps, stagger(i, 3, base), SPRING.pop));
```

## Палитра эффектов входа (разные на разные слова — но easing единый)
- **fade + подъём** — `opacity` (EASE.out) + `translateY` (spring).
- **свайп снизу под маской** — `overflow:hidden` + `translateY` (spring).
- **рукописная прорисовка** — курсив-шрифт (Cyrillic: MarckScript/Caveat/BadScript) + `clip-path inset`
  слева-направо (EASE.inOut) = эффект «пишется».
- **побуквенно** — стаггер по символам, каждый с `SPRING.pop`.
- **обводка/подчёркивание** — SVG-путь, draw-on через `strokeDashoffset` (pathLength=1, EASE.inOut).

## Запрещено
`linear` · мгновенное появление (`opacity` 0→1 за 1 кадр) · резкий `translate` без пружины/easing ·
дёрганые поскадровые рандом-глитчи · разные easing-логики в одной сцене.