Tự động tạo video ngắn (9:16) giải thích kiến thức với Remotion và AI.

Giao diện video dọc 9:16 chuẩn mobile với thương hiệu ⚡ CƯỜNG IT, bố cục căn giữa và phụ đề 1 dòng

▶️ Xem Video Demo trên Reels

✨ Tính năng nổi bật • 🚀 Cài đặt nhanh • 🎙️ Cấu hình Voiceover • 🤖 Tích hợp AI Skills • 🎬 Lệnh Render • 💬 Cộng đồng & Hỗ trợ

• Tác giả: Cường IT (Cuongyd196)
• 🎵 TikTok: @cuongit96
• 🌐 Facebook Reels: Cường IT Reels
• 👥 Nhóm Facebook: facebook.com/groups/1010029065373486
• 👥 Nhóm Zalo: zalo.me/g/8bfeotyh5ewtkzxmp5gt

• ⚡ Lập trình Video bằng Code (Video-as-Code): Dựng toàn bộ animation, transition, visual effects hoàn toàn bằng React và Remotion.
• 🎙️ Tích hợp Giọng đọc AI Miễn phí (edge-tts-universal): Tự động sinh giọng đọc tự nhiên (tiếng Việt vi-VN-HoaiMyNeural, vi-VN-NamMinhNeural, tiếng Anh, tiếng Nhật, v.v.), không cần API key.
• ⏱️ Đồng bộ Frame Timing chính xác (Frame-Accurate): Tự động phân tích thời lượng file âm thanh MP3 để tính số frame khớp 100% cho từng cảnh.
• 📱 Thiết kế Chuẩn Mobile 9:16 (1080x1920 @ 30fps):
  • Khối nội dung trung tâm (Centered Layout): Thẻ trích dẫn, so sánh, sơ đồ luồng luôn nằm ở trọng tâm mắt nhìn.
  • Thương hiệu Kênh (Brand Header): Huy hiệu ⚡ CƯỜNG IT cố định tại top: 150px, an toàn tuyệt đối, không bị che bởi thanh tìm kiếm.
  • Phụ đề 1 Dòng (Single-Line Chunked Subtitle): Tự động ngắt 5–7 từ/lần, cỡ chữ lớn text-4xl, nhảy cụm từ mượt mà theo nhịp đọc.
  • Nhịp chuyển cảnh nhanh (Snappy Buffer): Độ trễ giữa các cảnh chỉ +3 frames (~0.1s), giữ nhịp điệu video dồn dập, giữ chân người xem.
• 🤖 Sẵn sàng cho AI Agent: Tích hợp bộ Skill sẵn có cho Google Antigravity, Anthropic Claude và ChatGPT Plus (Codex).

Video ngắn áp dụng mô hình tâm lý thu hút người xem gồm 6 phân cảnh:

[Scene 1: Hook (0s-5s)]       -> Gây chú ý tức thì bằng câu hỏi tò mò & Title lớn 8xl
[Scene 2: Pain Point (5s-12s)] -> Trích dẫn nỗi đau thực tế & so sánh Local vs Server
[Scene 3: Solution (12s-20s)]  -> Giới thiệu giải pháp cốt lõi (Container 3D Box)
[Scene 4: Workflow (20s-29s)]  -> Quy trình hoạt động 3 bước (Dockerfile -> Image -> Run)
[Scene 5: Benefits (29s-37s)]  -> 3 lợi ích vượt trội (Nhẹ 10x, Tiết kiệm RAM, Multi-Cloud)
[Scene 6: Outro & CTA (37s-43s)]-> Tổng kết đắt giá + Kêu gọi Thả tim & Follow kênh

git clone https://github.com/Cuongyd196/remotion-cuongit-template.git
cd remotion-cuongit-template
npm install

Sao chép file .env.example thành .env:

cp .env.example .env

Nội dung cấu hình trong .env:

# Chọn giọng đọc: edge (online, miễn phí) | cit (CIT Voice Studio, offline)
TTS_PROVIDER=edge
TTS_OUTPUT_DIR=public/audio

# Edge TTS
EDGE_TTS_VOICE=vi-VN-HoaiMyNeural
EDGE_TTS_RATE=+10%

# CIT Voice Studio
CIT_TTS_BASE_URL=http://127.0.0.1:8001
CIT_TTS_VOICE=Hải Đăng
CIT_TTS_SPEED=1.1

# Thương hiệu kênh (Hiển thị góc trên giữa video)
CHANNEL_NAME="CƯỜNG IT"

Hỗ trợ nhiều giọng đọc AI chất lượng cao:

• Tiếng Việt Nữ (Truyền cảm): vi-VN-HoaiMyNeural
• Tiếng Việt Nam (Trầm ấm, rõ ràng): vi-VN-NamMinhNeural
• Tiếng Anh (Kể chuyện / Tin tức): en-US-ChristopherNeural, en-US-GuyNeural, en-US-AriaNeural

Sinh giọng đọc thủ công qua terminal:

# Sinh giọng đọc cho 1 đoạn văn bản đơn
npm run tts -- --text "Xin chào các bạn, hôm nay chúng ta cùng tìm hiểu về Docker." public/audio/test.mp3

Muốn dùng giọng tiếng Việt của CIT Voice Studio (25+ giọng, chạy offline trên máy):

1. Tải ứng dụng và đọc hướng dẫn cài đặt tại: github.com/Cuongyd196/cit-voice-studio
2. Mở ứng dụng (API mặc định chạy tại http://127.0.0.1:8001).
3. Đặt trong .env:

   TTS_PROVIDER=cit
   CIT_TTS_VOICE=Hải Đăng

4. Chạy script sinh audio như bình thường (file xuất .wav).

Danh sách giọng đầy đủ & tham số API: xem docs/cit-voice-studio.md.

Repository đi kèm bộ Skill định nghĩa sẵn giúp AI tự động tạo video hoàn chỉnh:

1. Trong VS Code với Claude Extension / Claude Code: Gõ trực tiếp slash command:

/remotion-topic-explainer Docker
/remotion-topic-explainer Kubernetes
/remotion-topic-explainer Redis Caching

2. Với ChatGPT Plus (Codex): Đăng nhập Codex bằng tài khoản ChatGPT Plus, mở Codex tại thư mục repo rồi gọi skill:

$remotion-topic-explainer Docker

3. Bằng câu lệnh tự nhiên (Natural Language Prompt):

"Tạo video ngắn 50-60s giải thích về [Chủ đề của bạn: Docker, Redis, Kubernetes, Git Rebase, WebSocket...]"

1. Soạn kịch bản chuẩn 6 phân cảnh (Hook, Problem, Solution, Workflow, Benefits, Outro & CTA).
2. Gọi script TTS (generate-tts.ts) để sinh audio giọng đọc và đo chính xác frame duration cho từng cảnh.
3. Thiết kế visual mobile (căn giữa nội dung, huy hiệu thương hiệu ⚡ CƯỜNG IT, subtitle 1 dòng gãy gọn).
4. Code React Remotion với animation spring nảy mượt mà và đăng ký Composition vào src/Root.tsx.

npm run dev

Mở trình duyệt tại http://localhost:3000 để xem và tinh chỉnh timeline theo thời gian thực.

npx remotion still DockerExplainer out/preview.png --frame 200

npx remotion render DockerExplainer out/DockerExplainer.mp4

remotion-cuongit-template/
├── .agents/skills/          # AI Skill cho Google Antigravity & Codex (ChatGPT Plus)
├── .claude/skills/          # AI Skill cho Anthropic Claude
├── .env.example             # File mẫu cấu hình biến môi trường
├── public/
│   └── audio/               # Thư mục lưu trữ voiceover MP3 được sinh ra
├── scripts/
│   ├── generate-tts.ts      # Engine sinh Voiceover TTS tự động & tính frame
│   └── generate-docker-audio.ts # Kịch bản mẫu cho Docker
├── src/
│   ├── DockerExplainer/     # Composition video giải thích Docker
│   │   ├── DockerExplainer.tsx  # Sequence Master & Animated Background
│   │   ├── types.ts             # Schema & Props
│   │   ├── audioData.ts         # Metadata thời lượng audio từng cảnh
│   │   ├── components/
│   │   │   ├── BrandHeader.tsx  # Huy hiệu kênh CƯỜNG IT (top: 150px)
│   │   │   └── SubtitleBox.tsx  # Subtitle 1 dòng (5-7 từ/lần, mt-64)
│   │   └── scenes/
│   │       ├── Scene1Hook.tsx
│   │       ├── Scene2Problem.tsx
│   │       ├── Scene3Container.tsx
│   │       ├── Scene4ImageDockerfile.tsx
│   │       ├── Scene5Benefits.tsx
│   │       └── Scene6Outro.tsx
│   ├── Root.tsx             # Đăng ký Composition Remotion
│   └── index.css            # TailwindCSS styles
└── remotion.config.ts       # Cấu hình render Remotion

• Link repo tạo video từ 1 đường Link/Bài viết: 🔗 github.com/Cuongyd196/auto-video-gen
• Link tạo video so sánh kiến thức: 🔗 github.com/Cuongyd196/auto-compare-video

Mình tạo nhóm này cho các bạn trao đổi về Làm Video với AI nhé.
Với các repo mình công khai, có vướng mắc mình sẽ giải đáp cho các bạn.

• 👥 Nhóm trên Facebook: facebook.com/groups/1010029065373486
• 👥 Nhóm trên Zalo: zalo.me/g/8bfeotyh5ewtkzxmp5gt

⭐ Nếu hữu ích với các bạn thì cho mình 1 star GitHub nhé 🌟

Mã nguồn template này được chia sẻ miễn phí cho mục đích học tập và phát triển cộng đồng. Tuy nhiên, dự án sử dụng framework Remotion.

Remotion License Notice:
Be aware of that Remotion has a special license and requires obtaining a company license in some cases. Read the LICENSE page for more information.