Motion Design · 2026
MOTION
DESIGN
Не таймлайны. Не After Effects. Remotion + TypeScript — код превращается в видео кадр за кадром.
Стек
Remotion · TypeScript
Формат
1920×1080 · 60fps
Видео
3 ролика
—01 — Demo Reel
ТРИ РОЛИКА.
ОДИН НАВЫК.
Три видео — три техники. Каждое снято с нуля через Remotion: от пустого компонента до финального MP4.
Motion Teaser
Kinetic typography, icon animation, typewriter effect, blur transitions, sparkle particles — полный демо-рил навыков
Vivid Gradient
Gradient wipe transitions, scene cuts, 60fps smooth motion
Article Highlight
Text highlight animation, word-by-word reveal, editorial style
—02 — Как это работает
REMOTION +
TYPESCRIPT
Remotion превращает React-компоненты в видео. Каждый кадр — это рендер. Никаких GUI-таймлайнов, только код.
01→
spring()
physics-based easing вместо cubic-bezier
02→
interpolate()
frame-based значения для любого свойства
03→
useCurrentFrame()
текущий кадр как единственный источник истины
04→
Sequence & Series
монтаж из независимых сцен
05→
renderMedia()
CLI-рендер в MP4 / WebM / GIF
typewriter.tsx
const frame = useCurrentFrame();
const opacity = spring({
fps: 60,
frame: frame - delay,
config: { damping: 200 },
});
return (
<span style={{ opacity }}>
{char}
</span>
);highlight.tsx
const progress = interpolate(
frame,
[start, start + 20],
[0, 1],
{ extrapolateRight: "clamp" }
);
return (
<mark style={{
background: `rgba(124,58,237,${progress})`
}}>
{word}
</mark>
);—03 — Подход
CODE-DRIVEN
MOTION
Motion-дизайн через код даёт что-то недоступное в After Effects: версионирование, тесты, переиспользование, генерацию серий.
01
Git-версионирование
Каждая итерация анимации — это коммит. Откат, ветка, merge request — как в обычной разработке.
Dev workflow02
Серии из массива
Нужно 20 вариантов с разным текстом? map() по массиву — и renderMedia() рендерит все параллельно.
Scalability03
Параметрические сцены
Цвет, скорость, текст — всё через пропсы. Один компонент — бесконечно кастомизируемая сцена.
FlexibilityСтек
Remotion 4
React → Video
TypeScript
Type-safe
spring()
Physics easing
renderMedia()
CLI render
—04 — О проекте
О ПРОЕКТЕ
Задача
Доказать что motion-дизайн через код работает — без After Effects, без GUI-таймлайнов. Remotion + TypeScript от идеи до готового MP4.
Motion DesignCode-drivenRemotionTypeScript
3видеоразные техники
60fpssmooth motion
0AEтолько код
Что сделано
01Kinetic typography
02Gradient wipe
03Typewriter effect
04Word-by-word reveal
05Sparkle particles
06CLI batch render
Инструменты
Remotion 4TypeScriptReact 19Node.jsFFmpegClaude
Весь пайплайн code-native: от компонента до готового MP4 без сторонних приложений.
Нужен motion?
Kinetic typography, product animation, promo reel — от концепта до рендера. Код даёт скорость и масштаб.