# Dùng Claude tạo video minh họa từ code web

[Duy Luân](https://homus.dev/speakers/duy-luan) · [Duy Luân Dễ Thương](https://homus.dev/orgs/duy-luan-de-thuong)

> Cách nhờ Claude viết animation bằng code web, render từng frame qua trình duyệt headless và FFmpeg, chạy song song trên máy mình để ra video 4K 60fps.

Topics: Workflow, Skills, Dev Tools

Canonical: https://homus.dev/talks/cach-dung-claude-de-tao-video-minh-hoa-ai-gio-xin-ghe

## 1. Một ước mơ cách đây 1-2 năm còn không dám nghĩ tới

Duy Luân mở đầu video bằng lời giới thiệu ngắn: anh sẽ chia sẻ cách mình đang dùng **Claude** để tạo ra những video minh họa. Theo anh, đây là điều mà cách đây khoảng 1-2 năm anh gần như không thể nghĩ tới, nhưng bây giờ cuối cùng nó đã hiện thực hóa được ước mơ của anh.

Lý do anh quan tâm chuyện này rất cụ thể. Kênh của anh làm khá nhiều video giải thích, từ công nghệ trong điện thoại tới các khái niệm kỹ thuật. Để giải thích một khái niệm cho dễ hiểu thì cần hình động minh họa, nhưng tự tay vẽ được những đoạn video minh họa như vậy thì chắc chắn là anh không làm nổi. Còn nếu đem dự án đi outsource thì cũng phải mất 1-2 tuần cho một đoạn animation ngắn. Bây giờ nhờ có AI, thời gian để anh làm ra được sản phẩm mong muốn rút ngắn đi rất nhiều. Anh nghĩ không chỉ mình anh mà nhiều người khác cũng sẽ có nhu cầu tương tự.

![Duy Luân ngồi trong phòng làm việc, chữ trên màn hình: Chia sẻ, Làm video bằng Claude AI](https://homus.dev/photos/UDE5eIT2CQk-0003.jpg)

Duy Luân mở đầu video, dòng chữ trên màn hình: "Chia sẻ: Làm video bằng Claude AI".

Không nói nhiều nữa, anh chia video thành hai phần: xem thành phẩm trước, sau đó mới nói về quá trình anh làm ra các video này như thế nào, nguyên lý phía sau là gì, và cách để người xem tự làm theo.

## 2. Thành phẩm đầu tiên: tản nhiệt buồng hơi trên điện thoại

Ví dụ đầu tiên là một trong những video đầu tiên anh dựng bằng Claude. Mục tiêu của video này là mô phỏng lại cách **tản nhiệt buồng hơi** (vapor chamber) trong điện thoại hoạt động như thế nào, theo một cách minh họa trực quan.

Claude làm ra cho anh một đoạn animation mà anh khen là "rất đẹp luôn". Bên trái là hai chiếc điện thoại đặt cạnh nhau để so sánh: một máy không có buồng hơi, một máy có buồng hơi. Bên phải là phần giải thích nguyên lý hoạt động của tản nhiệt buồng hơi, và anh nhấn mạnh là nó giải thích đúng. Đầu tiên có một con chip; chip nóng lên; nhiệt làm chất lỏng bốc lên thành hơi; hơi nóng lan ra khắp buồng; rồi hơi ngưng tụ, chuyển lại thành chất lỏng và chảy ngược về.

![Animation so sánh điện thoại không có và có buồng hơi, mặt cắt bên trong buồng hơi và biểu đồ FPS](https://homus.dev/photos/UDE5eIT2CQk-0123.jpg)

Khung "Bên trong buồng hơi" được khoanh đỏ, với bốn bước: chip nóng, chất lỏng bốc hơi; hơi nóng lan ra khắp buồng; nhả nhiệt diện rộng, ngưng tụ; nước chảy về qua lớp mao dẫn. Bên dưới là hai thẻ số liệu (40 FPS so với 60 FPS, điểm nóng nhất 40,3 °C, nhãn "-8 °C") và biểu đồ FPS khi chơi game lâu với nhãn "+47% FPS".

Có một phần anh không hề yêu cầu nhưng Claude vẫn tự thêm vào: ảnh hưởng của buồng hơi tới **FPS**. Khi chơi game lâu, máy có tản nhiệt buồng hơi giữ được hiệu năng trong thời gian dài hơn và ổn định hơn, nên đường FPS chạy thẳng một mạch. Trong khi máy không có buồng hơi thì đường FPS bị giảm dần. Trên màn hình, đường màu đỏ của máy có buồng hơi nằm ngang ở mức 60, còn đường màu vàng của máy không có buồng hơi tụt xuống quanh mức 40 sau khoảng 20 phút; góc dưới khung ghi rõ đây là mô phỏng minh họa nguyên lý, không phải số đo thực tế.

Đây là một thành phẩm mà với mục đích sử dụng bình thường, anh không thể tự làm được. Ngay cả mấy anh em editor trong team, mỗi lần muốn làm những đoạn như thế này cũng tốn rất nhiều thời gian.

Dĩ nhiên, đây chưa phải là một sản phẩm hoàn hảo. Anh hoàn toàn có thể chỉnh thêm, chẳng hạn muốn góc camera phải như thế này thế kia, hay muốn hình dáng của buồng hơi bên trong điện thoại đẹp hơn. Khi đó anh chỉ việc viết prompt tiếp để Claude sửa.

## 3. Chỉ một prompt, sau khi đã dựng sẵn môi trường render

Duy Luân mở lại đoạn chat trong ứng dụng Claude để cho thấy anh đã viết prompt đơn giản tới mức nào. Phần đầu đoạn chat là các bước dựng môi trường: anh viết một prompt kiểu "dựng sẵn một môi trường có thể dùng các file này để test". Claude trước tiên cho anh xem qua một số video ban đầu anh đã test, rồi sắp xếp lại các file thành một môi trường dùng lại được.

Trên màn hình là câu anh gõ cho Claude: "Tui copy rồi, bạn scan nha, bạn có thể sắp xếp lại file cho hợp lý, reusable nhất có thể". Claude trả lời rằng nó đã dựng xong môi trường `uv` trong folder `render_animation` và dọn lại folder; clip Adreno Neural Fusion đã được render lại bằng môi trường mới, ra file 4K 60fps dài 13 giây, màu so với bản cũ lệch không quá 1/255.

![Đoạn chat UV render video environment trong ứng dụng Claude, có các lệnh uv để render animation](https://homus.dev/photos/UDE5eIT2CQk-0223.jpg)

Đoạn chat "UV render video environment": Claude liệt kê lệnh chạy một lần trên Mac, các lệnh hay dùng (`uv run anim list`, `preview`, `render`, `new`) và cách sắp xếp: mỗi video một thư mục, mỗi clip gồm `index.html` và `clip.toml`. Bảng bên phải hiện file đầu ra `buong_hoi_vs_khong_4k.mp4`.

Phần Claude hướng dẫn chạy một lần trên Mac gồm ba lệnh, đúng như trên màn hình:

```
cd ~/claude_cowork/render_animation
uv sync
uv run playwright install chromium
```

Các lệnh hay dùng sau đó gồm `uv run anim list` để liệt kê clip, `uv run anim preview snapdragon_8_elite_gen_6/adreno_neural_fusion` để xem trên trình duyệt, `uv run anim render snapdragon_8_elite_gen_6` để render mọi clip của một video, `uv run anim render <clip> -f prores` để xuất kiểu ProRes, `uv run anim render <clip> --from 3 --to 6` để render một đoạn, và `uv run anim new pixel_11_review/camera_zoom` để tạo clip mới. Theo cách sắp xếp Claude đề xuất, mỗi video là một thư mục trong `projects/<video>/<clip>/`, mỗi clip gồm `index.html` và `clip.toml` (kích thước, fps, thời lượng).

Sau khi môi trường đã sẵn, anh chỉ viết thêm đúng một prompt: render một video minh họa cho việc sử dụng tản nhiệt buồng hơi thì có lợi hơn không có lợi như thế nào. Tức là anh chỉ tốn một prompt duy nhất để ra được đoạn video người xem vừa coi. Những thứ ở phía trên đoạn chat chỉ là để "đắp" môi trường cho nó chạy nhanh hơn.

Câu trả lời của Claude cho prompt đó mô tả lại mạch video: từ 0 tới 2,5 giây là hai chiếc điện thoại nhìn xuyên mặt lưng, thấy chip, cụm camera và pin, máy bên phải hiện thêm tấm buồng hơi màu đồng phủ vùng quanh chip; từ 2,5 giây có nhãn "Tải game nặng" và bản đồ nhiệt bắt đầu hiện lên; khung bên phải trên là mặt cắt buồng hơi với bốn bước; khung bên phải dưới là biểu đồ FPS trong 20 phút chơi, máy không có buồng hơi tụt từ 60 xuống khoảng 41 FPS vì chip bị bóp xung; kết luận là hai badge "-8 °C" và "+47% FPS". Claude cũng ghi rõ các con số nhiệt độ và FPS là từ mô phỏng khuếch tán nhiệt, không phải số đo máy thật, và nếu có số đo thật của một mẫu máy cụ thể thì có thể chỉnh lại cho khớp. File thành phẩm là bản 4K 60fps dài 16 giây.

Với anh, kết quả này "quá là bất ngờ".

## 4. Video về Snapdragon 8 Elite Gen 6: khả năng quay video

Chưa hết. Trong video về con chip **Snapdragon 8 Elite Gen 6**, anh cũng có một số đoạn minh họa do Claude làm, chẳng hạn minh họa về khả năng quay video và sự khác biệt giữa Snapdragon 8 Elite Gen 6 với bản **Snapdragon 8 Elite Extreme Gen 6**.

Nếu chỉ nói suông thì người xem khó hình dung. Còn nếu bây giờ anh cần gấp, hỏi editor có làm được đoạn animation như thế này hay không, thì câu trả lời là được, nhưng sẽ tốn rất nhiều thời gian. Trong khi anh chỉ có một ít thời gian để edit và phải lên video rất sớm.

Đoạn minh họa này có tiêu đề "Khả năng quay video", phụ đề "Bản Extreme quay được gấp đôi số khung hình mỗi giây". Hai thẻ đặt cạnh nhau: 8 Elite Gen 6 quay 8K ở 30 fps và slow-motion 4K ở 120 fps; 8 Elite Extreme Gen 6 quay 8K ở 60 fps và slow-motion 4K ở 240 fps, mỗi dòng có nhãn "x2". Góc dưới ghi nguồn số liệu là Qualcomm công bố.

Điểm anh thấy xuất sắc: anh còn đưa cho Claude một tấm hình, rồi bảo nó dùng tấm hình đó làm hình nền, và nó làm được. Sau đó, anh dặn Claude lưu lại phong cách này để lần sau dùng tiếp.

![Đoạn chat Snapdragon 8 Elite Gen 6 và phiên bản Extreme, Claude cập nhật memory preferences.md với phong cách video](https://homus.dev/photos/UDE5eIT2CQk-0243.jpg)

Claude ghi phong cách video vào memory (`preferences.md`): nền là hình press làm mờ và tối lại, chỉ có chữ và số, thẻ tối bán trong suốt đặt cạnh nhau, font Be Vietnam Pro, màu vàng cho bản thường và đỏ cho bản cao cấp, số đếm lên, thẻ trượt vào, chạy 60fps và xuất 4K. Sau đó anh sửa lại: phong cách này chỉ dùng khi anh nói "text only".

Hai câu anh gõ trong đoạn chat này, đúng như trên màn hình:

```
Tui thích style video này, bạn lưu lại để các lần sau sử dụng nha
```

```
Thật ra style này là minh họa cho text only thôi, khi cần thì vẫn phải có hình chứ. Khi nào tui kêu text only thì bạn hãy áp dụng
```

Claude trả lời rằng nó đã sửa lại: phong cách này giờ chỉ dùng khi anh kêu "text only"; còn bình thường, nội dung nào cần hình minh họa (như animation Neural Fusion hay biểu đồ cột) thì nó vẫn làm có hình như trước.

## 5. Adreno Neural Fusion: minh họa kiểu DLSS cho điện thoại

Một vài ví dụ khác, và đây là đoạn anh "cực kỳ thích". Đầu tiên, anh đưa cho Claude những thông tin liên quan tới tính năng tên là **Adreno Neural Fusion**. Nó giống như DLSS trên card đồ họa NVIDIA, nhưng có mặt trên mấy con Snapdragon mới.

Claude đưa ra trước một bản minh họa để chính anh hiểu trước: nếu chỉ render bằng GPU thì trông như thế này; nếu có AI đưa vào thì nó sẽ chạy nhanh hơn, mượt hơn. Trong đoạn chat, Claude mô tả animation chạy vòng lặp khoảng 13 giây, chia ba bước: GPU render hình vỡ hạt ở độ phân giải thấp, khung hình giật nhẹ; một vạch "AI" quét ngang màn hình, phần đã quét trở nên nét; các khung AI màu đỏ chèn vào giữa các khung GPU màu vàng ở dải dưới cùng, chuyển động mượt hẳn.

![Animation Adreno Neural Fusion bước 1: chiếc xe pixel trên nền trời đêm, nhãn độ phân giải thấp 30 FPS, dải khung GPU bên dưới](https://homus.dev/photos/UDE5eIT2CQk-0355.jpg)

Bước 1 của animation Adreno Neural Fusion: "GPU chỉ render ở độ phân giải thấp để đỡ tốn sức", nhãn "Độ phân giải thấp" và "30 FPS", dải dưới cùng chỉ có các khung GPU màu vàng xen ô trống. Ở bước 3, AI chèn khung hình vào giữa, nhãn đổi thành "Độ phân giải cao" và "60 FPS", game mượt gấp đôi.

Sau đó anh bảo Claude: ok, xuất thành video cho mình luôn. Anh cho người xem coi thành phẩm video Claude render ra: anh chỉ việc kéo thả file đó vào trong phần mềm dựng video là có thể bắt đầu sử dụng rồi. Trên màn hình là dự án dựng video Snapdragon 8 Elite Gen 6 với clip `adreno_neural_fusion_4k` nằm trong thư viện, phát ở bước 3 "AI chèn khung hình vào giữa, game mượt gấp đôi".

Và đây cũng chỉ là mới có 1-2 prompt. Nếu muốn, anh có thể viết prompt để nó đẹp hơn, nhìn sci-fi hơn, lung linh hơn chẳng hạn. Nhưng vì thời gian hạn chế, anh chỉ dùng có một prompt duy nhất, và nó đã ra được như thế rồi. Như vậy là tốt.

## 6. Video giới thiệu Elton DataUtils, có cả nhạc do Claude làm

Thêm một ví dụ nữa. Anh đang có một sản phẩm của Elton tên là **Elton DataUtils**, một agent platform để phân tích dữ liệu, và anh muốn có một video giới thiệu về nó. Trước khi chiếu, anh cho thấy anh đã làm rất nhiều iteration khác nhau cho video này. Anh định mở bản V7 là bản cuối, rồi sửa lại: V7 Epic mới là bản cuối cùng.

![Màn hình mở đầu video giới thiệu: logo Elton DataUtils, Nền tảng AI phân tích và chẩn đoán dữ liệu, các icon nổi xung quanh](https://homus.dev/photos/UDE5eIT2CQk-0443.jpg)

Màn hình mở đầu của bản V7 Epic: logo Elton DataUtils với dòng "Nền tảng AI phân tích và chẩn đoán dữ liệu", các icon biểu đồ, cơ sở dữ liệu, cloud và code nổi xung quanh.

Video đi qua nhiều cảnh: "Data nhiều mà chưa tận dụng, khó khai thác"; "Một câu prompt → dashboard hoàn chỉnh" với bảng chi tiết hiệu quả bán hàng theo vùng và kênh, các biểu đồ đường và cột, cột bên phải hiện các bước agent đang chạy; "Mô tả bằng lời, nhận câu SQL tối ưu", AI cũng truy vấn được dữ liệu chính xác mà không phải chờ đội kỹ thuật; và "Tối ưu chi phí cho doanh nghiệp" với ba ý: giảm chi phí nhân sự phân tích nhờ tự động hóa, cắt giảm thời gian làm báo cáo thủ công, tận dụng hạ tầng sẵn có mà không phải đầu tư phức tạp.

Video có nhạc. Nhạc đó cũng do Claude tạo ra luôn. Thật ra ban đầu anh có dùng một số bản nhạc trong thư viện nhạc bản quyền của mình, nhưng chưa hài lòng lắm. Nên anh nói với Claude thử làm ra một âm thanh như thế nào đó để nghe cho epic, cho sôi động một chút, và nó làm được. Trong đoạn chat "Product introduction video", phần Outputs liệt kê hai bản nhạc thử là một bản "epic" và một bản "upbeat", cùng ảnh thumbnail cho video. Claude cũng làm luôn thumbnail ở hai kích cỡ 2560×1440 (khoảng 330KB) và 1280×720 (khoảng 150KB), cả hai đều dưới giới hạn 2MB của YouTube.

Theo anh, đây là một cách mà người xem có thể dùng Claude và code để tạo thành video, rất tuyệt vời.

## 7. Trước đó: một công cụ web làm animation biểu đồ cho team

Trước đây, anh từng dùng nguyên lý tương tự để làm ra một công cụ nền web, để anh và anh em trong team làm animation liên quan tới biểu đồ. Nguyên lý hoạt động của nó giống hệt cách làm video ở trên, và anh hứa sẽ giải thích nguyên lý ngay sau đó.

![Công cụ web Tech Benchmark Generator với bảng Chart Setup và biểu đồ thời gian dùng pin tác vụ văn phòng của sáu laptop](https://homus.dev/photos/UDE5eIT2CQk-0603.jpg)

Công cụ "Chart Setup, Tech Benchmark Generator": chọn tỷ lệ khung hình ngang 16:9 hoặc dọc 9:16, bấm "Chạy Anim", chỉnh tốc độ xuất hiện, thời lượng cột, khoảng cách giữa các nhóm, rồi bấm "Tải video 4K (MP4) 3840×2160". Biểu đồ mẫu là "Thời gian dùng pin tác vụ văn phòng" của Laptop A tới Laptop F.

Công cụ đó cần những khuôn cố định: một loại biểu đồ, các thanh trượt để chỉnh. Nhưng bây giờ Claude làm được những thứ thậm chí còn phức tạp hơn, không cần phải có khuôn cố định gì hết mà vẫn làm ra được. Vậy tại sao nó làm được tất cả những thứ như thế này? Để giải thích, theo anh không gì tuyệt vời hơn là bằng một video do chính Claude tạo ra.

## 8. Nguyên lý: AI viết code animation, trình duyệt ghi lại thành video

Anh chiếu video giải thích do Claude làm, mở đầu bằng tiêu đề "Render animation từ web ra video". Câu hỏi: làm cách nào nó tạo ra được những animation như thế này? Câu trả lời: tất cả đều dựa trên nền web.

Khi truy cập vào những trang web khác nhau, mọi người thấy người ta có những chuyển động: hình bay vào, chữ trượt ra, đủ thứ. Trên những trang web đó thật ra vẫn là những đoạn code CSS, HTML và JavaScript làm được chuyện đó. Bây giờ, thay vì dùng những công cụ như **diffusion model** để sinh ra hình ảnh, AI sinh ra code, và code đó chạy animation. Sau đó nó dùng trình duyệt ghi lại chuỗi animation đó thành một đoạn video. Một cách làm rất đơn giản nhưng rất thông minh.

Cách làm trong video: Claude viết code animation chạy trên web, trình duyệt chạy và ghi lại thành video; vì tất cả là code nên có thể quản lý phiên bản bằng git.

Thậm chí, vì tất cả mọi thứ đều là code, nên chúng ta có thể track version của nó. Thấy bản này chưa tốt thì thay đổi; thấy bản này tạm được rồi thì commit lên git; sau đó tiếp tục chỉnh sửa, chỉnh sửa mà không được như ý thì revert lại. Anh gọi đó là "quá đã". Theo anh, đây là điều mà trước đây những model khác về video hay hình ảnh rất khó làm được.

## 9. Vì sao render từng frame thay vì quay màn hình

Trong video, Claude giải thích tại sao nó phải dùng một số công cụ để render từng frame một, thay vì làm theo cách bình thường chúng ta nghĩ là quay lại màn hình. Thật ra quay màn hình cũng ra được thành phẩm. Nhưng theo Claude giải thích, nếu quay màn hình thì đôi khi video bị rớt một vài frame. Còn nếu render từng frame một, vì một video vốn là một chuỗi những hình ảnh nối tiếp nhau, thì chỉ cần ghép các hình đó lại là xong.

![Slide Vì sao không quay màn hình cho nhanh: quay màn hình rớt 2 frame, render từng frame rớt 0 frame](https://homus.dev/photos/UDE5eIT2CQk-0703.jpg)

Slide "Vì sao không quay màn hình cho nhanh?": cùng một animation, hai cách lấy khung hình. Quay màn hình chạy theo thời gian thật, máy không kịp vẽ thì rớt frame (ví dụ rớt 2 frame, bóng đứng hình rồi giật cóc). Render từng frame dùng thời gian ảo, máy chậm thì render lâu hơn nhưng không mất frame nào (rớt 0 frame, chuyển động đều).

Anh tiếp tục coi video giải thích và nhận xét rằng cách Claude làm video minh họa cho anh rất đẹp và rất dễ hiểu, trong khi prompt của anh siêu giản dị, không có gì phức tạp.

## 10. Chiếm quyền điều khiển đồng hồ, chụp từng frame, ghép bằng FFmpeg

Quy trình trong video giải thích gồm bốn bước. Đầu tiên, Claude viết code animation, rồi dùng một trình duyệt headless, tức là trình duyệt không có giao diện, để chạy đoạn code đó. Trong đoạn chat, Claude ghi rõ: dùng Chromium không giao diện, điều khiển bằng Puppeteer hoặc Playwright, viewport đặt đúng kích thước đầu ra, ví dụ 3840×2160.

Bước thứ hai, được slide đánh dấu là quan trọng nhất, là "chiếm quyền điều khiển đồng hồ". Animation trên web tính trạng thái theo thời gian, nên nếu mình quyết định "bây giờ là mấy giờ" thì mình quyết định được khung hình trông ra sao. Slide đặt cạnh nhau "Thời gian thật" (trôi liên tục theo máy, không kiểm soát được) và "Thời gian ảo" (t = 0.000s, frame 0), kèm đoạn code ghi đè các hàm thời gian:

```
// Thời gian do mình nắm giữ
let now = 0
performance.now = () => now
Date.now = () => T0 + now
```

Bước thứ ba là chụp từng frame: nhích đồng hồ 1/60 giây, chụp một tấm, lặp lại đến hết video. Trình duyệt render xong frame này thì di chuyển qua frame kế tiếp, cứ làm như vậy cho tới hết đoạn video.

![Slide Bước 3 trên 4, Chụp từng frame: vòng lặp đặt t bằng f chia 60, trang vẽ xong, chụp ảnh, f cộng 1](https://homus.dev/photos/UDE5eIT2CQk-0823.jpg)

Slide "Bước 3/4: Chụp từng frame": vòng lặp "Đặt t = f / 60" (tua đồng hồ ảo), "Trang vẽ xong" (chờ render ổn định), "Chụp ảnh" (PNG/JPEG), "f = f + 1" (frame kế tiếp). Bên phải là dải phim các frame 0001 tới 0012; dòng chú thích: 10 giây × 60fps = 600 frame, máy chậm chỉ khiến render lâu hơn.

Bước thứ tư là ghép. Công cụ Claude dùng để ghép các frame lại với nhau là **FFmpeg**, một công cụ rất nổi tiếng liên quan tới video. Tính năng nó dùng là `image2pipe`: trình duyệt render liên tục những hình ảnh, đẩy qua pipe vào FFmpeg, và FFmpeg ghép lại thành một thành phẩm. Anh gọi đó là "quá đã luôn". Trong đoạn chat, Claude ghi thêm đầu ra có hai loại: MP4 H.264 và ProRes 4444 có kênh alpha.

Ở ví dụ Snapdragon trước đó, Claude cũng đóng gói mọi thứ thành một file zip để render trên Mac: trang animation `nf.html` dựng cho khung 3840×2160, hai file font Be Vietnam Pro để chữ tiếng Việt hiển thị đúng, script `render.py` và file `README.md`. Lệnh cài đặt một lần và lệnh render, đúng như trên màn hình:

```
brew install ffmpeg
pip3 install playwright
python3 -m playwright install chromium

cd nf_render
python3 render.py            # H.264 MP4
python3 render.py --prores   # ProRes 422 HQ .mov, better for editing
```

Claude giải thích script lưu từng frame vào thư mục `frames/` trước khi encode, nên nếu đang render mà bị ngắt thì chạy lại sẽ tiếp tục từ chỗ dừng; video xong thì có thể xóa thư mục `frames/`. Nó cũng ghi rằng lúc test, chữ tiếng Việt trong phụ đề bị lỗi mã hóa thành ký tự lạ, và lỗi đó đã được sửa trong bản zip.

## 11. Máy ảo của Claude Cowork chậm: render song song trên máy mình

Có một điều nữa: khi render bằng Claude, nó sẽ dùng máy ảo của **Claude Cowork** để render. Cách đó cũng được. Nhưng nếu video dài hoặc phức tạp thì sẽ tốn rất nhiều thời gian, đôi khi còn bị time out luôn. Vì vậy anh bảo Claude viết thành một lệnh để anh render ngay trên máy tính của mình. Máy của anh chắc chắn mạnh hơn cái máy ảo nho nhỏ mà Claude Cowork được cấp quyền sử dụng, nên anh có thể render song song nhiều thứ cùng lúc.

Đoạn "mẹo tăng tốc" trong video giải thích minh họa với 4 worker. Mỗi worker render một khúc trong video, sau đó các khúc được ghép lại. Khi chạy được song song thì đồng nghĩa với tiết kiệm thời gian hơn. Nếu chỉ có 1 worker, phải render tuần tự từng frame một, thì một video 1-2 phút có thể bắt người ta ngồi chờ rất lâu, có khi tới cả 45 phút chỉ để ngồi chờ. Khi tăng lên chạy song song, đôi khi chỉ tốn khoảng vài chục giây.

![Slide Mẹo tăng tốc, Render song song: 1 worker so với 4 worker, mỗi worker render 150 frame](https://homus.dev/photos/UDE5eIT2CQk-0903.jpg)

Slide "Render song song": mỗi frame độc lập nên chia cho nhiều worker, xong nối lại thành một video. Dòng "1 worker" chạy frame 0 tới 600, trong khi Worker 1 tới 4 mỗi worker lo 150 frame (0-150, 150-300, 300-450, 450-600). Chữ chèn bên dưới: "Nên tạo lệnh yêu cầu Claude render bằng máy tính của mình sẽ nhanh hơn".

Xong rồi nó nối các đoạn đó lại (concat) là xong. Ở cuối cảnh này, slide ghi: cùng lúc 4 worker đã ghép xong `video_4k.mp4` thì 1 worker mới chạy được 25%. Đó là toàn bộ nguyên lý hoạt động.

## 12. Cách dùng: một câu lệnh, xem ảnh preview, chỉnh rồi mới xuất

Còn cách dùng thì không có gì phức tạp hết. Vào Claude, chỉ cần nói một câu lệnh là tạo một video theo ý muốn của bạn. Hoặc trước đó bạn có thể nghiên cứu một số thứ rồi mới yêu cầu. Chẳng hạn, ở đây anh bảo Claude giải thích nguyên lý hoạt động của việc render animation từ web sang video:

```
Giải thích nguyên lý hoạt động của việc render animation từ web sang video
```

![Đoạn chat Nguyên lý render animation web sang video, bên phải là ảnh preview dọc Trình duyệt vẽ, Mình giữ đồng hồ](https://homus.dev/photos/UDE5eIT2CQk-1003.jpg)

Đoạn chat "Nguyên lý render animation web sang video": Claude giải thích ý chính (video là chuỗi ảnh tĩnh, cái khó nằm ở chỗ kiểm soát thời gian trong trình duyệt), vì sao không quay màn hình, và cách làm đúng gồm chạy trình duyệt headless và chiếm quyền điều khiển đồng hồ. Bên phải là ảnh preview cảnh kết "Trình duyệt vẽ, Mình giữ đồng hồ" với ba nhãn Remotion, Puppeteer + FFmpeg, timesnap / timecut.

Claude giải thích, giải thích, giải thích. Khi anh đã hiểu được cách hoạt động, anh bảo nó tạo một video 4K minh họa cho mình, vậy là xong. Trong câu trả lời, Claude liệt kê thêm vài cách giữ thời gian: ghi đè các hàm thời gian như `requestAnimationFrame`, `performance.now()`, `Date.now()`, `setTimeout` bằng phiên bản giả; với CSS animation và Web Animations API thì tạm dừng mọi animation rồi đặt `animation.currentTime = t` cho từng cái; dùng virtual time của Chrome qua DevTools Protocol; hoặc cách của Remotion, nơi animation được viết như một hàm của số frame.

Ở đây anh còn bảo Claude đưa cho anh xem một số hình minh họa ban đầu, để biết video render ra trông như thế nào. Nếu chưa hài lòng thì chỉnh lại. Lần này anh thấy nhìn ok rồi, nhưng nền gradient thì anh không thích; anh thích nền phẳng hơn. Anh bảo Claude bỏ đi, và nó chỉnh lại cả video lẫn code của nó.

Câu trả lời tiếp theo của Claude trên màn hình tóm lại các cảnh trong video: bước 3 chụp từng frame (một vòng lặp 4 bước chạy liên tục, mỗi vòng chụp thêm một frame vào dải phim, bộ đếm cuối cảnh chạy nhanh lên 600 frame); bước 4 FFmpeg (frame chạy qua pipe vào FFmpeg, ra MP4 H.264 và ProRes 4444 có alpha); render song song (4 worker mỗi cái render 150 frame rồi gộp lại); và cảnh tóm lại "Trình duyệt vẽ, Mình giữ đồng hồ". Claude cũng ghi cách render: bấm đúp `run.command` trong thư mục project, script làm theo cách giống project DataUtils trước đó, mở nhiều Chrome headless song song và encode bằng VideoToolbox; muốn render thử một đoạn thì chạy `node render_mac.mjs --from 22.5 --to 33`; để file `music.wav` vào thư mục project thì nhạc tự được ghép vào; mở thẳng `index.html` trong trình duyệt để xem bản chạy thời gian thực, thêm `?t=31` vào đường dẫn để dừng ở một giây bất kỳ.

Sau khi đã hài lòng, anh chạy một lệnh để xuất thành video. Mấy việc này, kể cả lệnh xuất video, đều cứ nói Claude làm. Ví dụ ở đây chính là video giải thích người xem vừa coi. Bản 16:9 thì đã có, mọi người vừa xem rồi. Bây giờ anh sẽ bảo Claude render thêm một bản 9:16 theo dạng dọc.

## 13. Kinh nghiệm: làm trong Claude Cowork để file nằm ngay trên máy

Lý do anh viết file run command riêng là vì anh muốn kiểm soát được số worker chạy, để thử những cấu hình khác nhau. Còn khi người xem tự dùng thì không cần phức tạp như thế. Máy của anh có khá nhiều nhân CPU, nên anh cho số worker là 14.

Anh bắt đầu cho chạy, nhưng nó vẫn render bản 16:9. Có lẽ file command này chưa được cập nhật. Anh dừng lại một chút, rồi bảo Claude tạo thêm một file run command để xuất video 9:16:

```
Tạo thêm 1 file run command để xuất video 9:16
```

Claude trả lời rằng nó đã tạo file `Render_9x16.command` ngay trong thư mục `web_to_video_explainer`, cạnh file video 16:9: bấm đúp vào file, nhập số worker (hoặc Enter để dùng mặc định) là render ra `Web_to_Video_Explainer_4K_9x16.mp4`. Script chỉ chạy trong `project_9x16` nên không đụng tới bản 16:9, dùng lại thư viện `node_modules` đã cài sẵn nên không phải cài lại, và xong thì tự mở Finder, chọn sẵn file video 9:16. Claude cũng nói rõ nó chưa chạy thử file trên máy anh, mới kiểm tra cú pháp, nên anh cứ chạy và báo nếu lỗi.

Nhân đó, anh chia sẻ thêm một kinh nghiệm. Bình thường mọi người sẽ dùng tính năng này trong khung chat thông thường. Nhưng theo kinh nghiệm của anh, nên chuyển qua dùng **Claude Cowork**, vì nó có thể truy cập trực tiếp vào folder trên máy của bạn. Nếu bạn là developer, bạn còn có thể nối folder đó với git. Còn nếu không rành, ít nhất bạn hiểu là bây giờ nó có thể tạo nhiều file, nhiều folder cho bạn, và bạn có thể lưu những file đó ngay trên máy của mình. Khi nắm được tất cả những thứ này, sau đó bạn nhờ nó chỉnh tiếp thì sẽ tiện hơn.

Chưa kể, như anh nói lúc nãy, render bằng máy ảo của Claude thì lâu lắm. Nên hãy bảo nó tạo một file lệnh để bạn chạy trực tiếp và xuất video bằng máy tính của mình, sẽ tiết kiệm thời gian hơn.

Lời khuyên lặp lại trong video: để Claude viết file lệnh, rồi render trên máy mình với nhiều worker thay vì trên máy ảo nhỏ của Claude Cowork.

## 14. Thực hành: render bản dọc 9:16 với 14 worker

Anh vào project 9:16 và chạy file run command này, chọn số worker là 14. Anh nhắc lại: mấy bước chọn worker là vì bản thân anh cần thôi; bình thường mọi người chỉ cần bấm vào file run command là nó chạy.

![Cửa sổ Terminal chạy run.command trong project_9x16, hỏi số worker, bên dưới là Finder với các file của project](https://homus.dev/photos/UDE5eIT2CQk-1245.jpg)

Cửa sổ Terminal mở `run.command` trong thư mục `project_9x16`: cài 99 package trong 7 giây, in dòng "Web → Video explainer · 9:16 · 4K 60fps renderer" và hỏi "Số worker [10]". Finder bên dưới hiện các file của project: `fonts`, `index.html`, `package.json`, `render_mac.mjs`, `run.command`, `node_modules`.

Tốc độ render khoảng hơn 70 frame mỗi giây. Tổng số frame cần render ra là 3840 frame, và lúc đó nó đã chạy được khoảng 15-16 giây. Trong lúc chờ, anh chỉ vào thông số: video này là video 60 FPS chứ không phải 30 FPS, tức là mỗi giây phải có 60 khung hình ghép lại với nhau, "khủng" như vậy. Bình thường những video anh quay cho mọi người coi như thế này chỉ là 30fps thôi.

## 15. Từ ước mơ thuê animator đến bộ skill cho team editor

Độ phân giải thì mọi người cũng có thể thấy là 4K. Nhưng lần này anh xuất bản dọc, để lát nữa dùng chính video này làm phiên bản TikTok của bản 16:9. "Quá đã."

Ngày xưa, ước mơ của anh là có đủ tiền để thuê một bạn chuyên làm animation full time: anh cần gì thì bạn ấy làm, và làm rất nhanh. Tuy nhiên chuyện đó rất khó, vì chi phí siêu cao, anh không thể afford được. Bây giờ nhờ có AI, anh đã hiện thực hóa được ước mơ đó.

Tuy vậy, anh tự nhận mình làm không thể đẹp bằng các bạn editor hay những người có kinh nghiệm trong lĩnh vực này. Nên anh sẽ đóng gói những thứ này thành một bộ **skill**, rồi đưa cho anh em editor của mình. Các bạn ấy có kỹ năng, có năng lực về màu sắc, về hình họa, nên các bạn làm chắc chắn sẽ tốt hơn anh.

Bước tiếp theo Duy Luân dự định: đóng gói quy trình thành bộ skill để các editor trong team dùng, vì họ giỏi màu sắc và hình họa hơn anh.

Đúng lúc đó, quá trình render chạy xong.

## 16. Thành phẩm bản dọc, và loại video hợp với cách làm này

Anh quay lại xem thành phẩm. Vẫn là nội dung giống bản nãy giờ, nhưng bây giờ là video dạng dọc, phù hợp với việc làm video dọc. Anh xem mà thốt lên "sướng thiệt", khi thấy nó tự nối mấy đường gạch, mấy chi tiết lại với nhau. Và anh nhấn mạnh: anh đâu có viết prompt gì đặc biệt, chỉ bảo nó tạo một video minh họa cho cái này cái kia.

Theo anh, với cách làm này, nó sẽ hoạt động tốt nhất với những video minh họa: video giải thích, video khái niệm, video mô tả nguyên lý hoạt động. Còn những video cần có người thật xuất hiện, hay cần sản phẩm thật xuất hiện, thì anh nghĩ sẽ phức tạp hơn. Khi đó nó không đơn giản chỉ là chữ hay những đường nét có thể vẽ được trên web nữa, mà phải có hình ảnh thật. Nếu muốn thì mọi người có thể thử; riêng anh chưa có nhu cầu về chuyện đó nên chưa thử. Ai có nhu cầu thì cứ thử để xem kết quả có ok hay không, và nếu có gì hay thì nhớ comment chia sẻ lại với anh.

Đánh giá cuối video: cách làm bằng code chạy trên web hợp nhất với chữ, số và đường nét; cảnh cần hình ảnh thật thì phức tạp hơn.

## 17. Tóm lại: cho càng nhiều thông tin, video càng sát ý

Vậy thôi, rất đơn giản, không cần prompt cầu kỳ gì phức tạp. Tóm lại, mọi người chỉ cần yêu cầu Claude tạo video minh họa cho một điểm nào đó mình muốn. Càng cung cấp nhiều thông tin thì nó càng render ra một video sát với ý muốn hơn, về màu sắc, về ý tưởng.

Thậm chí nếu có sẵn những icon, những video hay screenshot ở đâu đó, cứ bỏ vào; Claude sẽ dùng chúng làm nguồn và dựng video lên luôn. Dĩ nhiên không phải mọi thứ nó đều dựng ra được. Chẳng hạn nếu anh muốn quay giới thiệu một phần mềm của mình, thì phần đó chắc chắn anh phải tự quay. Nhưng mấy việc đó rất đơn giản.

Lưu ý cuối cùng: nhớ chạy lệnh trực tiếp để render bằng máy tính của mình. Chắc chắn nó sẽ nhanh hơn so với máy ảo (VM) của Claude.

Duy Luân cảm ơn người xem, chào và hẹn gặp lại.

## Nguồn và liên kết

- Tên gốc: Cách dùng Claude để tạo video minh họa, AI giờ xịn ghê
- Sự kiện: [YouTube](https://homus.dev/events/youtube)
- Video gốc: [https://www.youtube.com/watch?v=UDE5eIT2CQk](https://www.youtube.com/watch?v=UDE5eIT2CQk)

- Kênh YouTube Duy Luân Dễ Thương (Duy Luân): [youtube.com/channel/UCQ0jSGgYMLmRMeTE6UaPPXg](https://www.youtube.com/channel/UCQ0jSGgYMLmRMeTE6UaPPXg)

- Claude Cowork, chế độ làm việc của Claude có quyền truy cập folder trên máy: [claude.com/product/cowork](https://claude.com/product/cowork)

- FFmpeg, công cụ ghép frame thành video: [ffmpeg.org](https://ffmpeg.org/)

- FFmpeg wiki, ghép ảnh thành video, có ví dụ dùng `image2pipe`: [trac.ffmpeg.org/wiki/Slideshow](https://trac.ffmpeg.org/wiki/Slideshow)

- Playwright, điều khiển trình duyệt headless: [playwright.dev](https://playwright.dev/)

- Puppeteer, điều khiển Chrome headless: [pptr.dev](https://pptr.dev/)

- Remotion, làm video bằng code React (một trong các cách được nêu trên màn hình): [remotion.dev](https://www.remotion.dev/)

- uv, công cụ quản lý môi trường Python dùng trong các lệnh trên màn hình: [docs.astral.sh/uv](https://docs.astral.sh/uv/)

Nguồn: https://homus.dev/talks/cach-dung-claude-de-tao-video-minh-hoa-ai-gio-xin-ghe · cập nhật 2026-10-13