Tạo app biến ảnh manga thành video bằng Claude Code và HyperFrames

1. Làm video chuyển động bằng AI

Hoàng Tùng mở đầu bằng một nhận xét: có rất nhiều bạn đang muốn làm video chuyển động bằng AI để dựng nội dung, nhưng chưa biết bắt đầu từ đâu (video đăng ngày 31/10/2026). Anh kể rằng trong thực tế anh đang dùng AI để edit rất nhiều nội dung khác nhau của mình.

Vì thế trong video này anh chia sẻ cách dùng Claude Code và HyperFrames để tạo ra bất kỳ chuyển động nào theo nhu cầu của người xem (video đăng ngày 31/10/2026). Nói xong câu đó, anh đi vào nội dung chính.

2. Claude Code và HyperFrames làm gì

Đầu tiên anh giải thích nhanh hai công cụ. Với Claude Code, anh nói chắc không cần nói nhiều: theo anh (video đăng ngày 31/10/2026), đây là AI hỗ trợ vibe coding thuộc top đầu ở thời điểm đó.

Còn HyperFrames, theo Hoàng Tùng (video đăng ngày 31/10/2026), là một dự án mã nguồn mở có khả năng render ra video từ những chuyển động của website. Trên màn hình lúc anh giới thiệu là logo "HeyGen HyperFrames".

Cách hai công cụ phối hợp khi làm video chuyển động, như anh mô tả trong video đăng ngày 31/10/2026: Claude Code lập trình ra các website có hiệu ứng và chuyển động, sau đó HyperFrames render những hiệu ứng chuyển động trên website đó ra video. Mọi người có thể đưa các video này vào dùng cho nội dung sáng tạo của mình.

README của repo HyperFrames trên GitHub tóm tắt dự án bằng dòng "Write HTML. Render video. Built for agents." và ghi giấy phép Apache 2.0 (đọc ngày 02/11/2026).

3. Bài toán manga animation

Hoàng Tùng chia sẻ thêm rằng đây là một bài toán một bạn muốn nhờ anh giải quyết: dùng Claude Code và HyperFrames để tạo chuyển động cho manga animation, tức là chuyển động cho truyện tranh (video đăng ngày 31/10/2026).

Anh nói thực ra anh không dùng ứng dụng này trong thực tế. Nhưng anh tin rằng rất nhiều bạn có hứng thú với nội dung kiểu truyện tranh, hay các nội dung sáng tạo nói chung, có thể áp dụng cách này để tạo chuyển động và đăng lên các nền tảng mạng xã hội một cách rất hiệu quả (theo Hoàng Tùng, video đăng ngày 31/10/2026).

Vì thế, nhân dịp muốn chia sẻ về Claude Code và HyperFrames, anh dùng chính kỹ thuật này để giải bài toán tạo manga animation, theo cách anh gọi là hết sức đơn giản (video đăng ngày 31/10/2026).

4. Khởi động Claude Code và bước một: mô tả ngắn và đầu vào

Bước đầu tiên, Hoàng Tùng khởi động Claude Code trên máy tính của mình. Vì đây là một ứng dụng khá đơn giản và dễ làm, anh chat trực tiếp trên khung Terminal của Claude để yêu cầu Claude Code tạo ra ứng dụng có khả năng tạo chuyển động cho truyện tranh và xuất ra được video để anh dùng (demo trong video đăng ngày 31/10/2026).

Trong lúc làm ứng dụng này, anh cũng hướng dẫn cách vibe coding các ứng dụng tương tự. Anh chia sẻ ba bước hết sức đơn giản để vibe coding bất kỳ ứng dụng nào (theo Hoàng Tùng, video đăng ngày 31/10/2026).

Bước một là mô tả ngắn ứng dụng. Ở đây là tạo một ứng dụng manga animation, tức chuyển động của truyện tranh. Truyện tranh thì đi từ file hình ảnh, nên anh mô tả là từ một file hình ảnh được upload lên. Rồi anh viết "hãy tạo giao diện để tôi upload", bởi vì anh cần một giao diện để upload và một nút để bấm tạo. Theo anh (video đăng ngày 31/10/2026), như vậy là xong bước đầu vào.

5. Bước hai và ba: cách ứng dụng hoạt động và đầu ra

Bước hai là mô tả ứng dụng hoạt động như thế nào; anh gọi đó là tính năng của ứng dụng. Khi anh upload một hình ảnh truyện tranh, ứng dụng sẽ dùng Claude Code để phân tích hình ảnh và tự động tạo ra mô tả animation, anh giải thích là mô tả chuyển động, và có thể edit được mô tả đó trên giao diện (theo lời mô tả trong video đăng ngày 31/10/2026).

Khi bấm vào nút tạo video, ứng dụng sẽ tạo ra chuyển động theo đúng mô tả và hình ảnh đầu vào, rồi dùng HyperFrames để xuất ra video, và video có thể download ngay trên ứng dụng. Theo Hoàng Tùng (video đăng ngày 31/10/2026), như vậy là đã đủ để mô tả từ đầu vào, đến tính năng xử lý, rồi đầu ra là một video chuyển động có thể download trực tiếp trên ứng dụng.

Prompt anh gõ vào Claude Code, như trên màn hình:

hãy tạo ra 1 ứng dụng để tạo ra manga animation từ file hình ảnh upload lên, hãy tạo giao diện để tôi upload và nút để bấm tạo. Khi tôi upload một hình ảnh truyện tranh thì ứng dụng sẽ sử dụng claude code để phân tích hình ảnh và tự động tạo ra mô tả animation và có thể edit được mô tả đó trên giao diện, khi bấm vào nút tạo video thì ứng dụng sẽ tạo ra chuyển động theo đúng mô tả và hình ảnh đầu vào rồi sử dụng hyperframes để xuất ra video và có thể download ở trên ứng dụng.

6. Chạy prompt: Claude Code tự cài những gì cần

Rồi anh chạy câu lệnh này để xem Claude Code tạo ra ứng dụng như thế nào. Anh chỉ cho người xem thấy Claude Code đang load HyperFrames và một số ứng dụng cần thiết (demo trong video đăng ngày 31/10/2026). Trên màn hình, ngay dưới prompt là dòng "Skill(hyperframes)" với kết quả "Successfully loaded skill", rồi một lệnh Bash kiểm tra node, npm, npx, claude, hyperframes và ffmpeg trên máy.

Theo Hoàng Tùng (video đăng ngày 31/10/2026), phần này khá đơn giản, vì về cơ bản Claude Code hoàn toàn có thể chủ động cài đặt những ứng dụng cần thiết để giải bài toán của anh. Nếu dùng Claude Code, bạn chỉ cần approve những yêu cầu của Claude Code, và tất cả phần mềm cần thiết để xây dựng ứng dụng này sẽ được chạy hoàn toàn tự động.

Anh cho rằng đây là một ứng dụng hết sức thực tế và đơn giản để mọi người thực hành vibe coding, cũng như tạo ra được các video chuyển động phục vụ mục đích sáng tạo nội dung (theo Hoàng Tùng, video đăng ngày 31/10/2026).

7. Anh đang dùng Claude Code và HyperFrames để edit video

Trong lúc Claude Code chạy, Hoàng Tùng chia sẻ thêm rằng gần đây anh dùng Claude Code khá nhiều để edit video tự động, từ video ngắn đến video dài (video đăng ngày 31/10/2026). Lý do anh đưa ra: theo anh, ở thời điểm đó AI rất thông minh và có thể hỗ trợ anh những công việc mà anh thậm chí không có quá nhiều kinh nghiệm hay năng khiếu để làm.

Anh kể các video gần đây của mình có những đoạn như head text ở phía trên, những icon hay logo pop lên, những đoạn chạy chữ kiểu karaoke, hoặc những mô hình mô phỏng nội dung trong video. Theo anh (video đăng ngày 31/10/2026), tất cả những thứ đó đều đang được làm bằng Claude Code và HyperFrames.

8. Tự vibe coding thay vì dùng style và skill có sẵn

Theo Hoàng Tùng (video đăng ngày 31/10/2026), đó là kỹ thuật rất nhiều người đang dùng để edit video tự động ở thời điểm đó, và cũng có rất nhiều người đang chia sẻ những skill như vậy.

Nhưng mỗi người làm sáng tạo nội dung lại có style và cách làm khác nhau. Vì thế, trong các video của mình, anh muốn hướng dẫn cách để người xem tự vibe coding ra những ứng dụng đó và giải bài toán thực tế của chính mình, thay vì dùng những style hoặc những skill có sẵn của người khác (theo Hoàng Tùng, video đăng ngày 31/10/2026).

Anh đoán Claude sẽ mất một vài phút để lập trình ra ứng dụng này (video đăng ngày 31/10/2026). Trong lúc chờ, anh đi tìm vài ảnh manga để lát nữa kiểm tra xem ứng dụng tạo ra video chuyển động như thế nào.

9. Tìm một ảnh Naruto để thử

Hoàng Tùng search cụm từ "naruto black and white" trên Google, ở mục hình ảnh. Anh nói Naruto chắc là nhân vật khá nổi tiếng, dù chính anh cũng không xem bộ truyện tranh này; anh nghĩ chắc có khá nhiều bạn muốn làm chuyển động với nhân vật trong bộ truyện đó (video đăng ngày 31/10/2026).

Anh lướt qua một số hình ảnh, chọn một ảnh trông khá đẹp, rồi download ảnh đó xuống làm nguyên liệu để kiểm tra ứng dụng tạo video chuyển động khi Claude Code làm xong (demo trong video đăng ngày 31/10/2026). Ảnh anh chọn là một ảnh đen trắng Naruto và Sasuke đứng tựa lưng nhau dưới vầng trăng.

10. Đọc kỹ các câu hỏi xin quyền

Hoàng Tùng lưu ý rằng trong quá trình phát triển, Claude Code hay có những câu hỏi về việc dùng các quyền trên máy (theo anh, video đăng ngày 31/10/2026). Lời khuyên của anh là hãy đọc kỹ rồi mới trả lời.

Anh đưa ví dụ: cho Claude Code dùng quyền ở những folder nằm ngoài dự án của mình, hay dùng các công cụ khác để chạy lệnh trên dự án. Theo Hoàng Tùng (video đăng ngày 31/10/2026), bạn cần chú ý trước khi approve một thứ gì đó.

Với các bạn không có nền tảng công nghệ, anh gợi ý có thể cài Claude Code trên một máy tính khác, để đảm bảo bảo mật dữ liệu trên máy tính cá nhân của mình (lời khuyên trong video đăng ngày 31/10/2026).

11. Claude Code render thử và mục đích của bài hướng dẫn

Lúc này Claude Code đã chạy đến mức tự động render thử ảnh ra video, và anh nghĩ có lẽ chỉ khoảng một phút nữa là có thể kiểm tra ứng dụng (demo trong video đăng ngày 31/10/2026). Anh lướt nhanh qua phần Claude Code chạy để có ứng dụng và kiểm tra luôn.

Trên màn hình lúc đó, Claude Code viết từng phần của ứng dụng. Một đoạn nó ghi "Giờ đến giao diện. Tôi theo phong cách trang manga: nền giấy, viền mực đen, điểm nhấn đỏ.", rồi ghi file public/index.html với tiêu đề "Manga Animator" (demo trong video đăng ngày 31/10/2026).

Anh chia sẻ rằng vì anh không có quá nhiều trải nghiệm với việc làm chuyển động cho truyện tranh, về cơ bản anh chỉ làm ra một ứng dụng chạy được (video đăng ngày 31/10/2026). Còn để tuỳ chỉnh, tối ưu, hay tạo ra chất lượng gọi là đẹp mắt, thì theo kinh nghiệm của mình, các bạn có thể áp dụng cách này và tuỳ chỉnh lại: đưa cho Claude Code thêm thông tin đầu vào, giúp nó hiểu kỳ vọng của bạn về video đầu ra sẽ như thế nào.

Theo Hoàng Tùng (video đăng ngày 31/10/2026), mục đích của anh là qua bài hướng dẫn này, người xem biết cách dùng Claude Code và HyperFrames để tạo bất kỳ chuyển động nào theo nhu cầu thực tế: từ truyện tranh chuyển động, đến những mô phỏng để edit video tự động, chèn chữ, thêm logo, icon, hay các quy trình mô phỏng. Tuỳ mục đích của mỗi người mà có thể tạo ra những ứng dụng tương ứng để giải bài toán của mình.

12. Ứng dụng chạy ở localhost:3000

Claude Code đã hoàn thành quá trình phát triển ứng dụng và chạy nó trên cổng localhost 3000 (demo trong video đăng ngày 31/10/2026). Phần tổng kết cuối của Claude Code trên màn hình ghi "Ứng dụng đã chạy được trọn quy trình: tải ảnh lên → Claude Code phân tích → sửa mô tả → HyperFrames render → tải MP4", kèm kết quả lần chạy thử với file naruto.jpg: Claude Code tự chia ảnh thành 4 cảnh, lần đó tốn khoảng 0,22 USD, và HyperFrames xuất video 18,5 giây trong khoảng 15 giây (số trên màn hình của video đăng ngày 31/10/2026).

Trên cùng màn hình đó, mục "Những điểm bạn nên biết" ghi rằng vùng khung do Claude ước lượng nên đôi khi lệch một chút, video hiện chưa có âm thanh, và mỗi lần phân tích hoặc đồng bộ đều tính phí Claude Code (màn hình trong video đăng ngày 31/10/2026). Trước đó anh đoán Claude sẽ mất một vài phút; dòng cuối trên màn hình ghi "Cogitated for 10m 6s".

Anh vào địa chỉ đó để kiểm tra ứng dụng chạy như thế nào. Theo anh (demo trong video đăng ngày 31/10/2026), Claude Code cũng tự vẽ ra một giao diện trông khá ổn. Trang chủ có tên "MANGA ANIMATOR", dòng "CLAUDE CODE × HYPERFRAMES", ô "Tải lên một trang truyện tranh" và nút "Chọn ảnh".

Anh chỉ cần bấm nút "Chọn ảnh", rồi đưa lên ảnh đã tìm được trên mạng. Sau đó Claude Code tự động phân tích bức ảnh để tạo ra nội dung chuyển động (demo trong video đăng ngày 31/10/2026). Trong lúc chờ, màn hình hiện "Claude Code đang phân tích trang truyện..." và dòng "Thường mất 30-90 giây."

13. Bốn cảnh chuyển động, sửa được trên giao diện

Hoàng Tùng nhắc lại rằng thật ra anh không có kinh nghiệm làm truyện tranh chuyển động, nên để ứng dụng tự phân tích. Theo anh (video đăng ngày 31/10/2026), các bạn có nhiều kinh nghiệm sẽ có thể chỉnh sửa lại những animation này theo ý mình, và như vậy sẽ hay hơn rất nhiều.

Kết quả, Claude Code tự phân tích bức ảnh thành 4 cảnh chuyển động, với giao diện anh nói là khá đẹp (demo trong video đăng ngày 31/10/2026). Trên ảnh gốc, mỗi cảnh là một khung màu đánh số. Bên phải, mỗi cảnh có một thẻ: thời lượng và hiệu ứng, ô "Mô tả animation" và mục "Thông số chuyển động". Ví dụ cảnh 1 ghi "3.5s · Lia xuống · Mờ dần · Tối viền, Lấp lánh, Bụi sáng" và mô tả mở đầu trong bóng tối với vầng trăng tròn hiện dần giữa những đám mây đen; cảnh 2 là cận mặt Sasuke với "3.5s · Zoom vào · Màn mực quét · Tối viền, Screentone".

Anh nói trên giao diện này anh hoàn toàn có thể chỉnh sửa trực tiếp (demo trong video đăng ngày 31/10/2026). Mỗi thẻ cảnh có nút mũi tên lên, xuống và nút xoá, phía dưới danh sách có nút "+ Thêm cảnh". Lần này anh không chỉnh sửa gì cả, vì thật ra anh không có kinh nghiệm chỉnh sửa truyện tranh, nên anh tạo luôn video để xem kết quả.

14. Bấm Tạo video và xem kết quả

Anh bấm vào nút tạo video và đoán phải chờ có lẽ vài chục giây; anh lướt nhanh đoạn chờ này (demo trong video đăng ngày 31/10/2026). Anh nói Claude Code hiện luôn phần trăm để biết video đang render đến đâu; trên màn hình, ô "Video" ghi "HyperFrames đang render video... 5%", kèm một thanh tiến trình và log bên dưới. Theo anh (video đăng ngày 31/10/2026), tốc độ render video của các ứng dụng ở thời điểm đó khá nhanh.

Render xong, anh có một video chuyển động hoàn chỉnh; ô Video ghi "Xong! Video dài 15 giây." và có nút "Tải video MP4" (demo trong video đăng ngày 31/10/2026). Anh chạy video ngay trên ứng dụng cho người xem cùng xem. Theo anh, video có những hiệu ứng chuyển động, hoàn toàn tự động.

Theo Hoàng Tùng (demo trong video đăng ngày 31/10/2026), chỉ bằng một câu lệnh hết sức đơn giản, Claude Code đã tạo ra một ứng dụng hoàn chỉnh để upload một ảnh truyện tranh và tạo ra video chuyển động một cách hoàn toàn tự động.

15. Phát triển tiếp và lời cảm ơn

Tương tự như vậy, theo Hoàng Tùng (video đăng ngày 31/10/2026), các bạn có thể tiếp tục phát triển những ứng dụng như thế này, dùng Claude Code và HyperFrames để giải các bài toán tạo nội dung chuyển động phục vụ nhu cầu sản xuất nội dung của mình.

Anh cũng nói có thể sẽ đẩy source code của ứng dụng lên GitHub ở chế độ public, cho những bạn không muốn tự dùng Claude Code để phát triển nhưng vẫn muốn dùng ứng dụng này (video đăng ngày 31/10/2026).

Theo anh (video đăng ngày 31/10/2026), qua video này người xem đã học được cách dựng những chuyển động hết sức đơn giản với Claude Code và HyperFrames để phục vụ việc sáng tạo nội dung. Anh kết thúc bằng lời cảm ơn mọi người đã quan tâm theo dõi.