README có thể cung cấp nội dung cho video demo, nhưng cần chuyển từ tài liệu sang một chuỗi hành động người xem hiểu được. Chọn một vấn đề, một luồng sử dụng và một kết quả có bằng chứng, rồi mới thiết kế chuyển động.
A README supplies material for a demo video, but documentation needs to become a sequence viewers can follow. Choose one problem, one workflow and one evidenced outcome before designing motion.
Trong bài nàyOn this page
1. Tách thông tin đã xác nhận khỏi lời hứa1. Separate established facts from claims
Chuẩn bị README tại một commit xác định, lệnh chạy đã kiểm tra, dữ liệu demo được phép dùng và tài nguyên hình/âm thanh có quyền sử dụng. Ghi rõ người xem là ai, họ cần làm được gì và dự án còn giới hạn nào. Không tự thêm số liệu tốc độ, khách hàng hoặc lợi ích mà nguồn chưa chứng minh.
Đọc claude-awesome-video-creation và các references đi kèm. Skill gồm hướng dẫn và helper; Node.js, React/Remotion, trình duyệt render, FFmpeg hoặc dịch vụ âm thanh vẫn cần được chuẩn bị riêng. Kiểm tra điều kiện sử dụng của Remotion và các dịch vụ đã chọn.
Prepare the README at a known commit, verified commands, approved demo data and licensed visual/audio assets. Define the audience, what they should accomplish and the project’s limitations. Do not invent performance figures, customers or benefits that the source does not establish.
Read claude-awesome-video-creation and its references. The skill supplies instructions and helpers; Node.js, React/Remotion, rendering browsers, FFmpeg or audio services remain separate prerequisites. Check the usage terms of Remotion and selected services.
Đọc README tại commit đã chỉ định và đề xuất video demo cho developer.
Chọn một luồng sử dụng có thể chạy lại; dẫn nguồn cho các tuyên bố.
Viết storyboard và lời thoại trước, chưa gọi dịch vụ trả phí hoặc render dài.
Phân biệt footage thật, mockup tái dựng và phần còn thiếu.
Giữ nguyên dữ liệu gốc và không tự đăng video.Read the README at the specified commit and propose a developer demo.
Choose one reproducible workflow and source the claims.
Write the storyboard and narration first; do not call paid services or render
a long video yet. Separate real footage, reconstructed mockups and missing assets.
Preserve original data and do not publish the video automatically.2. Đổi mục lục README thành một câu chuyện ngắn2. Turn documentation into a short narrative
Với bản demo mục tiêu khoảng 60 giây, có thể bắt đầu bằng năm cảnh bên dưới. Đây là ngân sách thời lượng dự kiến; sau khi đo lời thoại và thao tác thật, điều chỉnh timeline cho đủ thời gian đọc.
- Vấn đề: tác vụ người xem đang mất công thực hiện.
- Đầu vào: repository, tệp hoặc giao diện sẽ dùng trong demo.
- Thao tác: một chuỗi bước ngắn, lệnh đầy đủ và nhìn rõ.
- Kết quả: đầu ra thực và một cách kiểm tra nó.
- Bước tiếp theo: nơi đọc hướng dẫn hoặc chạy lại ví dụ.
Không cần đưa mọi mục README lên màn hình. Chọn một trường hợp đại diện và dẫn liên kết tới tài liệu cho các biến thể khác. Nếu lệnh chỉ chạy trên một hệ điều hành, ghi rõ phạm vi ngay trong cảnh liên quan.
For a roughly 60-second target, start with the five scenes below. This is an initial duration budget; adjust the timeline after measuring narration and real actions so viewers have time to read.
- Problem: a task that currently costs the viewer effort.
- Input: the repository, file or interface used in the demo.
- Action: a short sequence with complete, readable commands.
- Result: real output and a way to verify it.
- Next step: where to read the guide or reproduce the example.
Every README heading does not need its own scene. Choose one representative case and link to documentation for other variants. Label operating-system requirements in the relevant scene when a command is platform-specific.
3. Chuẩn bị footage và một timeline thống nhất3. Prepare footage and a shared timeline
Chạy lại luồng demo với dữ liệu thử trước khi quay màn hình. Ẩn token, thông tin tài khoản và đường dẫn riêng; giữ độ phân giải đủ để chữ rõ sau khi xuất video. Gắn nhãn mockup là bản tái dựng nếu chưa có cảnh quay thật.
Đo lời thoại trước khi chốt độ dài cảnh. Ghi âm bằng giọng có quyền sử dụng hoặc dùng TTS theo điều kiện dịch vụ; tiếng Việt cần kiểm tra dấu và cách đọc tên kỹ thuật. Giữ lời thoại, phụ đề và chuyển cảnh trên cùng timeline để một lần sửa không làm các phần lệch nhau.
Nếu component Remotion nhận props, có thể lưu dữ liệu demo trong JSON. Ví dụ cấu trúc sau là một hợp đồng dữ liệu cần được component hỗ trợ, không tự biến thành video khi chỉ lưu tệp:
Re-run the workflow with test data before recording. Remove tokens, account details and private paths, and keep enough resolution for readable text after export. Label reconstructed mockups when real footage is unavailable.
Measure narration before finalizing scene durations. Use a voice you are authorized to record or an appropriately licensed TTS service; check Vietnamese diacritics and technical names. Keep narration, captions and scene transitions on one timeline so edits remain synchronized.
If the Remotion component accepts props, keep demo data in JSON. This example is a proposed contract the component must implement; saving the file alone does not create a video:
{
"title": "A reproducible project demo",
"sourceRevision": "replace-with-the-reviewed-commit",
"steps": [
"Prepare the sample input",
"Run the verified command",
"Inspect the generated result"
],
"footageLabel": "RECONSTRUCTED"
}4. Render bản thử trước khi xuất đầy đủ4. Render a draft before the final export
Trong dự án đã có Remotion, entry point src/index.ts và composition Demo tương thích với props, thêm script như sau. Điều chỉnh các tên theo project thật; không chép đè các script đang có.
In a project with Remotion installed, an entry point at src/index.ts and a Demo composition accepting these props, add a script like this. Adapt the names to the actual project and preserve existing scripts.
{
"scripts": {
"video:render": "remotion render src/index.ts Demo out/demo.mp4"
}
}npm run video:render -- --props=demo-props.json --scale=0.5 --concurrency=1Props dạng tệp tránh khác biệt escape JSON giữa các shell. Kiểm tra một bản nhỏ để phát hiện chữ tràn, footage thiếu và lệch tiếng trước khi xuất độ phân giải mục tiêu. Cảnh nặng có thể cần giảm concurrency hoặc render theo đoạn; đọc helper trong skill trước khi dùng, đối chiếu composition ID và số frame.
Lệnh trên giả định runtime và composition đã được chuẩn bị; nó không cài dependency hoặc dựng toàn bộ ứng dụng Remotion. Khi đã kiểm tra bản nhỏ, xuất bản đầy đủ theo script của dự án và kiểm tra tệp mới tạo.
File-based props avoid JSON escaping differences between shells. Inspect a small render for overflowing text, missing footage and timing errors before the target-resolution export. Heavy scenes may need lower concurrency or segmented rendering; read skill helpers first and confirm composition IDs and frame ranges.
The command assumes the runtime and composition already exist. It does not install dependencies or create a Remotion application. After inspecting the draft, use the project script for the full export and check the newly generated file.
5. Đối chiếu video với nguồn trước khi bàn giao5. Compare the video with its sources
- Xem đủ mọi cảnh: chữ, phụ đề, dấu tiếng Việt, vị trí con trỏ và đầu/cuối clip.
- Đối chiếu lệnh và kết quả trên màn hình với lần chạy thật tại revision đã ghi.
- Kiểm tra thời lượng, độ phân giải, âm lượng và các đoạn đứng hình ngoài ý muốn.
- Giữ danh sách nguồn, giấy phép, footage thật/tái dựng và các phần chưa hoàn thành.
Bàn giao video cùng source, props, revision và lệnh render. Chỉ ghi thời gian render hoặc mức cải thiện nếu đã đo. Hướng dẫn này mô tả quy trình và mẫu lệnh, không kèm một video mẫu đã render; xem bài nền về video với Claude Code và Remotion để chuẩn bị workflow rộng hơn.
- Inspect every scene: text, captions, Vietnamese diacritics, cursor position and clip boundaries.
- Compare onscreen commands and results with an actual run at the recorded revision.
- Check duration, resolution, loudness and unintended frozen frames.
- Retain sources, licenses, footage/mockup labels and unfinished items.
Hand over the video with source, props, revision and render command. Report rendering time or improvements only when measured. This guide provides a workflow and command examples, not a rendered sample video; see the Claude Code and Remotion introduction for broader preparation.