Beta

Генератор видео из TSX

Опишите идею нейросети, получите TSX-код, проверьте анимацию и скачайте MP4. Предпросмотр и рендер выполняются локально в браузере.

Без загрузки видео на сервер
Проверяю поддержку локального рендера…

Параметры видео

Формат
Экспорт в WebM с альфа-каналом. Композиция не должна рисовать сплошной фон.
GIF рендерится покадрово, без прозрачности и звука, и может быть медленнее видео на длинных роликах.
150 кадров · 1080 × 1920 · 30 FPS · 5 сек

Композиция.tsx

Можно импортировать API из remotion и react. Анимация должна зависеть от useCurrentFrame(), а не от CSS transitions.
Изображения для композиции

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

До 10 изображений, не более 10 МБ каждое и 30 МБ суммарно.

Как использовать изображение

  1. Добавьте файл и нажмите на появившийся ключ, чтобы скопировать его. Ненужный файл можно убрать кнопкой с урной.
  2. Примите assets в свойствах компонента.
  3. Передайте нужный ключ в <Img src={…} />.
  4. Нажмите «Обновить предпросмотр».
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 или используйте пример, затем обновите предпросмотр.

Проверка кода

Ожидает проверки

    Предпросмотр

    Remotion Player
    MP4 будет создан локально в браузере без аудиодорожки.
    Если скачанное видео отличается от предпросмотра, попробуйте другие способы рендера Remotion или запишите экран.

    Генератор видео из TSX: анимация на React прямо в браузере

    Генератор превращает TSX-компонент в готовое MP4-видео. Вы описываете внешний вид и движение элементов кодом, проверяете результат в проигрывателе и запускаете локальный рендер — исходники и добавленные изображения не отправляются на сервер.

    Такой способ подходит для заставок, Shorts, Reels, анимированных карточек, инфографики, титров и коротких рекламных сцен. В отличие от обычного видеоредактора, здесь каждый кадр рассчитывается программно: текст, фигуры, цвета и эффекты легко менять без ручного перестроения всей временной шкалы.

    Как создать видео из TSX-кода

    Компонент Remotion превращает номер кадра в точное состояние React-интерфейса. Проигрыватель показывает композицию, а браузерный рендер собирает последовательность кадров в H.264 MP4 без аудиодорожки.

    1. Напишите сцену

    Используйте React, SVG, Canvas и покадровые функции Remotion.

    2. Проверьте движение

    Запустите Player или перемещайтесь по временной шкале вручную.

    3. Доработайте в CapCut

    Добавьте музыку, голос, монтаж и финальные эффекты к скачанному MP4.

    Для стабильной работы создавайте отдельные сцены длительностью 3–30 секунд. Максимум одного рендера — 1800 кадров.

    Как получить TSX-код с помощью ИИ

    Знать React необязательно: опишите идею словами, а нейросеть превратит её в готовый файл Composition.tsx. Это подходит для поздравлений, презентаций, открыток, заставок и коротких рекламных роликов. Чем точнее вы зададите формат, длительность, стиль, палитру и эффекты, тем меньше правок потребуется перед рендером.

    ⚡ Главное отличие: боты (Gem и GPT) уже содержат системный промт — вы просто описываете идею. Обычные чаты (ChatGPT, Gemini, Qwen, Алиса) требуют полного промта с инструкциями — его собирает конструктор ниже.

    Gem-бот

    Готовый бот с системным промтом. Вставляете идею — получаете код. Быстрый старт, не нужно настраивать параметры.

    Открыть Gem-бота

    GPT-бот

    Готовый Custom GPT с системным промтом. Вставляете идею — получаете TSX-код. Работает через ChatGPT.

    Открыть GPT-бота

    Универсальный промт

    Собирается в конструкторе ниже. Работает с любой нейросетью: ChatGPT, Gemini, Qwen, Алиса. Больше контроля над параметрами.

    Открыть конструктор

    Что кидать в боты (Gem / GPT)

    Боты уже знают правила Remotion. Просто опишите видео:

    • Формат: 9:16, 1080×1920
    • Идея: Маскот-робот показывает, как работает сервис
    • Стиль: Flat mascot, неоновые цвета
    • Текст в кадре: «Попробуй бесплатно»
    • CTA: Ссылка в описании
    Пример запроса: «Создай вертикальный ролик на 5 секунд. Маскот-робот влетает слева, показывает экран с логотипом, затем CTA "Попробуй бесплатно". Стиль: flat mascot, неоновые цвета.»

    Что кидать в обычные чаты (ChatGPT / Gemini / Qwen / Алиса)

    Обычные чаты не знают правил Remotion. Им нужен полный промт с инструкциями — соберите его в конструкторе ниже.

    • Скопируйте готовый промт из конструктора
    • Вставьте в чат вместе с описанием идеи
    • Удалите из ответа Markdown-ограждения ```tsx
    • Вставьте код в поле «Композиция.tsx» на ToolKitch
    Почему так: обычный чат не знает, что нужно использовать только react, remotion и разрешённые библиотеки. Без системного промта он добавит неподдерживаемые пакеты и код не запустится.

    Соберите промт для TSX-видео

    Заполните идею и выберите параметры — готовый запрос появится справа.

    Быстрый старт — выберите сценарий:

    Опишите сюжет, главный объект и текст, который должен появиться в кадре.
    Продающая задача
    Персонаж и сцена
    Формат, FPS и длительность синхронизированы с панелью параметров видео.
    Дополнительные 2D-возможности
    Изображения не добавлены. Если добавить их в блоке «Изображения для композиции», ключи автоматически попадут в готовый промт.
    Добавьте идею, чтобы собрать промт.

    Как передать изображения боту и ToolKitch

    Один и тот же файл используется дважды: бот (Gem или GPT) анализирует его внешний вид, а ToolKitch подставляет локальное изображение в предпросмотр и MP4.

    1. Подготовьте файлы. Используйте понятные имена без случайных символов: logo.png, product.png, background.jpg.
    2. Добавьте файлы в ToolKitch. Откройте блок «Изображения для композиции». Сайт создаст ключи, например logo.png → assets['logo'].
    3. Соберите промт. Загруженные изображения и их ключи автоматически появятся в готовом запросе.
    4. Откройте Gem-бота для Remotion-анимаций или GPT-бота для Remotion. Прикрепите к сообщению те же файлы через кнопку добавления изображений, затем вставьте готовый промт.
    5. Получите TSX. Бот проанализирует изображения и вернёт код с ключами assets, без Base64, локальных путей и внешних ссылок.
    6. Вернитесь в ToolKitch. Вставьте код в поле «Композиция.tsx». Не обновляйте страницу, иначе локальные файлы придётся добавить снова.
    7. Проверьте ролик. Нажмите «Обновить предпросмотр», затем при необходимости скачайте MP4.
    📎 Файлы как ассеты: в нейросети можно загружать файлы, которые работают как набор поз или фреймов. Один файл с персонажем в разных позах — и персонаж уже «анимирован»: нейросеть видит все кадры и умеет двигать части тела, менять выражение, создавать последовательность движений. Это экономит время и даёт более естественный результат.
    Изображения в ботах обрабатываются внешними сервисами Google и OpenAI. На ToolKitch файлы остаются в памяти текущей вкладки и не отправляются на сервер ToolKitch.
    Открыть Gem-бота Открыть GPT-бота

    Куда вставить готовый промт

    Скопируйте запрос из конструктора и отправьте его нейросети, которая умеет писать код. После ответа удалите пояснения и Markdown-ограждения ```tsx, оставив только код компонента.

    Gemini ChatGPT Qwen Chat Алиса

    Нет идеи для видео?

    Выберите задачу, добавьте тему или фразу — получите готовый промт для обычной нейросети. Результат на русском, понятный и подробный.

    Приложите исходное изображение в выбранной нейросети. ToolKitch не загружает и не анализирует референс.
    GeminiChatGPTQwen ChatАлиса

    Как создать своего бота для генерации TSX

    Сохраните системные инструкции в Gem или персонаже Алисы. После этого достаточно описать ролик, чтобы получать код для вставки в ToolKitch.

    Промт адаптирован под ToolKitch: кроме React и Remotion доступны @remotion/paths, @remotion/shapes, @remotion/noise и chroma-js. Остальные npm-пакеты и CDN заблокированы.

    Примеры идей для бота

    Скопируйте одну из идей и отправьте в бота — он вернёт готовый TSX-код:

    🎬 Рекламный ролик

    Создай вертикальный ролик на 5 секунд. Маскот-робот влетает слева, показывает экран с логотипом, затем CTA "Попробуй бесплатно". Стиль: flat mascot, неоновые цвета.

    🎉 Поздравление

    Горизонтальная заставка на 3 секунды. Крупное имя "Алексей" появляется с конфетти и плавным масштабированием. Стиль: минимализм, пастельные цвета.

    📊 Инфографика

    Квадратное видео 1080x1080 на 8 секунд. Три ключевых числа появляются с анимацией счёта: "10K пользователей", "99% аптайм", "0₽ стоимость". Стиль: editorial, монохром.

    🚀 Заставка канала

    Горизонтальная заставка на 4 секунды. Неоновое название канала "TechFlow" появляется с энергетичным движением и частицами. Стиль: tech/neon, тёмный фон.

    ✏️ Редактирование идеи

    Если результат не совсем то, что нужно — отправьте боту правки:

    Сменить стиль

    "Сделай в стиле cartoon вместо flat mascot"

    Изменить длительность

    "Увеличь до 8 секунд, добавь ещё одну сцену"

    Добавить персонажа

    "Добавь второго персонажа — клиент, который радуется результату"

    Изменить CTA

    "Замени CTA на 'Скачать бесплатно' и добавь иконку загрузки"

    📋 Пошаговый план работы с ботом

    1. Выберите идею — скопируйте одну из примеров выше или напишите свою.
    2. Отправьте в бота — откройте Gem или GPT-бота и вставьте идею в чат.
    3. Получите TSX — бот вернёт код с ключами assets, без Base64 и внешних ссылок.
    4. Добавьте изображения — если в запросе были файлы, прикрепите их к сообщению в боте и в ToolKitch.
    5. Вставьте код — скопируйте TSX в поле «Композиция.tsx» на ToolKitch.
    6. Проверьте — нажмите «Обновить предпросмотр», затем скачайте MP4.
    7. Доработайте — если нужно, попросите бота внести правки.
    Gemini

    Gem-бот

    Готовый бот в Gemini. Нажмите кнопку — откроется чат с уже настроенным системным промтом.

    Открыть Gem-бота
    Алиса AI

    Персонаж Алисы

    Создайте своего персонажа в Алисе — вставьте промт в инструкцию.

    Открыть Алису AI
    Тестовый запрос: «Создай горизонтальную заставку на 5 секунд в стиле Minimalist. На экране появляется заголовок „ToolKitch“, затем подпись „Кухня знаний и инструментов“».

    Методы анимации в Remotion

    МетодКак работаетГде применять
    interpolate()Связывает диапазон кадров с координатой, масштабом, поворотом или прозрачностью.Появление текста, пролёты, зум и плавная смена цвета.
    spring()Имитирует движение пружины с ускорением и мягкой остановкой.Карточки, логотипы, кнопки и выразительные заголовки.
    Сцены по кадрамУсловия показывают разные элементы на выбранных отрезках временной шкалы.История из 2–3 сцен, смена тезисов и финальный призыв.
    SVG и CSSФигуры, градиенты, маски и фильтры рассчитываются внутри компонента.Инфографика, диаграммы, свечение и декоративный фон.

    Основой анимации должен быть useCurrentFrame(). Не используйте CSS transitions и анимации, зависящие от реального времени: при покадровом рендере они могут дать другой результат, чем в предпросмотре.

    Стили видео и дизайнерские приёмы

    Минимализм

    Один тезис на сцену, 1–2 шрифта, много свободного пространства и спокойные переходы. Подходит для объяснений и продуктовых демонстраций.

    Кинетическая типографика

    Крупные слова становятся главным визуальным объектом. Ритм создают масштаб, смещение, маски и последовательное появление строк.

    Trailer / cinematic

    Контрастный свет, затемнённый фон, крупные титры, частицы и резкие акценты. Хорош для анонсов, историй и драматичных вступлений.

    Glassmorphism

    Полупрозрачные панели, размытие, тонкие светлые границы и цветной фон. Используйте умеренно, чтобы текст сохранял контраст.

    Tech / neon

    Тёмный фон, неоновые акценты, сетки, свечение и геометрия. Подходит для технологий, игр, ИИ и цифровых продуктов.

    Editorial и инфографика

    Модульная сетка, строгая типографика, цифры, диаграммы и последовательная подача фактов. Удобно для образовательных роликов.

    Пять правил выразительной композиции

    • Выберите один главный объект. Заголовок, число или иллюстрация должны считываться первыми.
    • Соблюдайте безопасные поля. Не ставьте важный текст у краёв вертикального ролика — интерфейс площадки может его перекрыть.
    • Ограничьте палитру. Один фоновый, один основной и один акцентный цвет обычно дают более цельный результат.
    • Сохраняйте контраст. Проверяйте читаемость текста на каждом фоне, особенно при свечении и прозрачных панелях.
    • Подчините движение ритму. Используйте 1–2 характера анимации вместо набора несвязанных эффектов.

    Какой формат выбрать

    ФорматРазмерПодходит для
    9:161080 × 1920YouTube Shorts, VK Клипы и вертикальные ролики.
    16:91920 × 1080YouTube, презентации и горизонтальные заставки.
    1:11080 × 1080Карточки, публикации и универсальные анонсы.

    Часто задаваемые вопросы

    Это видео, кадры которого описаны React-компонентом на TSX. Код определяет расположение элементов и рассчитывает их состояние для каждого кадра, после чего генератор собирает результат в MP4.

    Нет. Получить стартовый компонент можно через Gem-бота, GPT-бота или другую нейросеть. Базовые знания React помогут исправлять ошибки, точнее настраивать движение и дорабатывать сгенерированный код.

    Чаще всего нейросеть добавляет неподдерживаемую библиотеку, создаёт несколько файлов или меняет имя экспорта. Попросите вернуть один Composition.tsx, использовать только модули из системного промта и добавить export default.

    Да. Откройте блок «Изображения для композиции», добавьте файл и скопируйте появившийся ключ, например assets['logo']. Примите объект assets в свойствах компонента и передайте ключ в <Img src={assets['logo']} />. После обновления страницы файлы нужно добавить снова.

    Нет, браузерный рендер создаёт видео без аудиодорожки. Музыку, голос, звуковые эффекты и финальный монтаж добавьте после скачивания MP4 в CapCut или другом видеоредакторе.

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

    Нет. Компиляция, предпросмотр и рендер выполняются локально в браузере. Но если вы создаёте код во внешней нейросети, учитывайте её правила обработки запросов и не передавайте в промпте конфиденциальные данные.

    Бот (Gem или GPT) получает изображение, чтобы понять его содержание, цвета и композицию и написать подходящий TSX-код. ToolKitch получает тот же файл, чтобы подставить его в assets во время предпросмотра и рендера. Бот не возвращает исходный файл вместе с кодом.