Сам бы в жизни не поверил, но твиттерская мода вайбкодить на React с целью клипать видосы — чудесна.
Это моя такая студенческая работа, где я пару часов все переделывал, потому что хотел посмотреть как можно, что можно еще запихнуть. Я просто хотел показать вам как можно сделать.
Люди вот такие маркетинговые шедевры создают в твиттере: тык, тык и в целом зайдите в поиске поищите:
React + Claude. Там люди не только примеры своих работ выкладывают, но и обучающие видео по 16 минут (видел что-то такое).
Ну либо глянуть в основном репозитории, что вообще технически возможно реализовать. Это эдакий потолок до которого нейросеть сможет допрыгнуть, я не сомневаюсь.
Мои руки только кидали в папку файлы для видоса, от скринов и картинок до музыки. А далее писали инструкции нейросети, банальную просьбу: добавь тут переход, а тут текст, а тут эффект бдыщ!
По факту прописать и сгенерировать ряд сцен, а после подрезать косяки + добавить музыку от Суно.. ну край полчаса?
Так, че как установить?
Шутка ли, но это устанавливается практически в одну команду терминала. Для тех кто не шарит, можно все скормить Claude Code (пора про него мега гайд написать публично).
Сначала нужно установить NodeJS, для разных систем это делается по разному. Но там ничего сложного.
npx create-video@latest --blank
Вводим название нашего будущего проекта, это создаст папку с ним и туда положит все нужные файлы.
И мы в дальнейшем будем сюда скидывать наши карточки, что нам потребуются в ролике. Сюда же идет музыка и звуковые файлы. Все ограничивается только вашей фантазией.
Ассеты:
- Все файлы (картинки, музыка, видео, шрифты) → в public/
- Подпапки для порядка: public/images/, public/audio/, public/video/
- Референсы тоже в public/ — Claude прочитает изображение и воспроизведёт стиль
Структура:
- public/ — твои файлы (ассеты)
- src/ — код (Claude пишет сюда)
- out/ — готовые MP4 (после рендера)
- CLAUDE.md — инструкции для Claude Code
npx skills add remotion-dev/skills
Добавляем скиллы в наш Claude Code, чтобы он собственно шарил как правильно писать на реакте наши будущие видео шедевры.
npm run dev
Запускаем сайт студию локально, тут в реальном времени можно посмотреть весь наш ролик, все правки в нем, что и где лежит.
Если все устраивает то просто жмете кнопку "Render", либо оставляете процесс на Claude и даете ему такую команду. Просто по кнопке сильно больше контроля над итоговым роликом.
Но не все так просто..
С Reaction потребовалось и версию Node JS на 22 поменять, да и в конфинге вырезать IPv6 дабы корректное запускался MyComp, иначе бы пришлось каждый раз рендерить ролик, а не нормально монтировать.
Надо понимать, что в видео не будет звука. Его прикрутить руками минуту делов, но люди уже отдельные пайплайны прописали, чтобы процесс автоматизировать.
Это какие-то подводные камни, которые я словил в своей практике, пока тестировал и расписывал гайд от А до Я. Ну и фишки, которые люди не будут пихать в ТГ пост и грузить аудиторию.
Вот и я не буду. Кто не хочет ебаться, ресерчить и фиксить у себя проблемный запуск — добро пожаловать на борт за $39 долларов. Это в целом для тех, кто хочет шарить за AI. Я для понта одну из возможностей показал.
Там же можем обменяться лучшими практиками монтажа, советов по промпту и прописыванию настроек дать. В будущем я довезу какие-то свои наработки и примеры проектов, как это делают прочие.
С любовью, ваш Киса.