Создавайте визуальные сцены для YouTube и Shorts с помощью React и Remotion. Предпросмотр и MP4-рендер выполняются на вашем устройстве.
remotion и react. Анимация должна зависеть от useCurrentFrame(), а не от CSS transitions.
Добавьте логотип, фотографию, фон или иллюстрацию, чтобы использовать файл внутри TSX-композиции. Изображение обрабатывается локально и не отправляется на сервер.
assets в свойствах компонента.<Img src={…} />.import {AbsoluteFill, Img} from 'remotion';
type Props = {assets?: Record<string, string>};
const Composition = ({assets = {}}: Props) => (
<AbsoluteFill>
{assets['logo'] ? <Img src={assets['logo']} /> : null}
</AbsoluteFill>
);
export default Composition;Файлы хранятся только в памяти вкладки. После обновления страницы добавьте их снова.
Генератор превращает TSX-компонент в готовое MP4-видео. Вы описываете внешний вид и движение элементов кодом, проверяете результат в проигрывателе и запускаете локальный рендер — исходники и добавленные изображения не отправляются на сервер.
Такой способ подходит для заставок, Shorts, Reels, анимированных карточек, инфографики, титров и коротких рекламных сцен. В отличие от обычного видеоредактора, здесь каждый кадр рассчитывается программно: текст, фигуры, цвета и эффекты легко менять без ручного перестроения всей временной шкалы.
Компонент Remotion превращает номер кадра в точное состояние React-интерфейса. Проигрыватель показывает композицию, а браузерный рендер собирает последовательность кадров в H.264 MP4 без аудиодорожки.
Используйте React, SVG, Canvas и покадровые функции Remotion.
Запустите Player или перемещайтесь по временной шкале вручную.
Добавьте музыку, голос, монтаж и финальные эффекты к скачанному MP4.
Знать React необязательно: опишите идею ИИ-агенту и попросите вернуть готовый файл Composition.tsx. Чем точнее вы зададите формат, длительность, стиль, палитру и эффекты, тем меньше правок потребуется перед рендером.
Заполните идею и выберите параметры — готовый запрос появится справа.
Один и тот же файл используется дважды: Gem анализирует его внешний вид, а ToolKitch подставляет локальное изображение в предпросмотр и MP4.
logo.png, product.png, background.jpg.logo.png → assets['logo'].assets, без Base64, локальных путей и внешних ссылок.
Скопируйте запрос из конструктора и отправьте его нейросети, которая умеет писать код. После ответа удалите пояснения и Markdown-ограждения ```tsx, оставив только код компонента.
Выберите задачу, добавьте исходную тему или фразу и скопируйте запрос. Нейросеть предложит идею на английском языке, которую затем можно передать Gem-боту.
Сохраните системные инструкции в Gem или персонаже Алисы. После этого достаточно описать ролик, чтобы получать код для вставки в ToolKitch.
Промт адаптирован под ToolKitch: кроме React и Remotion доступны @remotion/paths, @remotion/shapes, @remotion/noise и chroma-js. Остальные npm-пакеты и CDN заблокированы.
| Метод | Как работает | Где применять |
|---|---|---|
interpolate() | Связывает диапазон кадров с координатой, масштабом, поворотом или прозрачностью. | Появление текста, пролёты, зум и плавная смена цвета. |
spring() | Имитирует движение пружины с ускорением и мягкой остановкой. | Карточки, логотипы, кнопки и выразительные заголовки. |
| Сцены по кадрам | Условия показывают разные элементы на выбранных отрезках временной шкалы. | История из 2–3 сцен, смена тезисов и финальный призыв. |
| SVG и CSS | Фигуры, градиенты, маски и фильтры рассчитываются внутри компонента. | Инфографика, диаграммы, свечение и декоративный фон. |
Основой анимации должен быть useCurrentFrame(). Не используйте CSS transitions и анимации, зависящие от реального времени: при покадровом рендере они могут дать другой результат, чем в предпросмотре.
Один тезис на сцену, 1–2 шрифта, много свободного пространства и спокойные переходы. Подходит для объяснений и продуктовых демонстраций.
Крупные слова становятся главным визуальным объектом. Ритм создают масштаб, смещение, маски и последовательное появление строк.
Контрастный свет, затемнённый фон, крупные титры, частицы и резкие акценты. Хорош для анонсов, историй и драматичных вступлений.
Полупрозрачные панели, размытие, тонкие светлые границы и цветной фон. Используйте умеренно, чтобы текст сохранял контраст.
Тёмный фон, неоновые акценты, сетки, свечение и геометрия. Подходит для технологий, игр, ИИ и цифровых продуктов.
Модульная сетка, строгая типографика, цифры, диаграммы и последовательная подача фактов. Удобно для образовательных роликов.
| Формат | Размер | Подходит для |
|---|---|---|
| 9:16 | 1080 × 1920 | YouTube Shorts, VK Клипы и вертикальные ролики. |
| 16:9 | 1920 × 1080 | YouTube, презентации и горизонтальные заставки. |
| 1:1 | 1080 × 1080 | Карточки, публикации и универсальные анонсы. |
Composition.tsx, использовать только модули из системного промта и добавить export default.assets['logo']. Примите объект assets в свойствах компонента и передайте ключ в <Img src={assets['logo']} />. После обновления страницы файлы нужно добавить снова.assets во время предпросмотра и рендера. Gem не возвращает исходный файл вместе с кодом.