Это симулятор автопечати кода, который идеально подойдёт для создания видео в жанре «кодинг-шортс». Приложение позволяет эффектно имитировать процесс набора кода с последующей демонстрацией красивого HTML-элемента — как это делают дизайнеры и разработчики в популярных роликах на YouTube Shorts, TikTok и Reels.

ytubshorts — Демо-симулятор набора кода для YouTube Shorts

Интерактивное Next.js-приложение для создания эффектных видео-демонстраций кода в стиле YouTube Shorts.
Поддерживает автопечать, шаблоны, баннеры, визуальные эффекты, мультиязычность и адаптивный дизайн.

Возможности

• Симуляция набора кода с регулируемой скоростью и ошибками
• Реалистичный интерфейс «телефона» с анимацией
• Переключение языков интерфейса (русский, английский, французский)
• Готовые шаблоны кода для быстрого старта
• Яркие баннеры и брендирование для видео
• Современный дизайн с поддержкой светлой/тёмной темы телефона
• Адаптивность: отлично смотрится на ПК и мобильных
• Статистика кода: количество символов, примерное время, предупреждения

Запуск

npm install
npm run dev

Откройте http://localhost:3000 в браузере.

Как использовать

1. Выберите язык интерфейса и тему телефона.
2. Введите или выберите шаблон кода.
3. Настройте скорость печати, ошибки, баннер и другие параметры.
4. Нажмите Старт — наблюдайте за автопечатью кода!
5. Запишите видео экрана для публикации в Shorts/Reels/TikTok.

Технологии

• Next.js 14
• React
• Tailwind CSS
• Custom Hooks & Components

Автор

Сергей Каманов (mrKamanov)

---

Всё возможно!

---

Поддержать проект

Если вам понравился проект, поддержите его:

• ⭐️ Поставьте звезду на GitHub: https://github.com/mrKamanov/ytubshorts
• Bitcoin: 19i9JauVSyDzv9KNDKV1Da9v36GwiZ6at3
• Toncoin: UQB2pUhI3rUKiy-hR3mHMAcXvQ4_QNVGDEuFZcRU9qa7MMeA