Tạo video quảng bá SaaS nổi bật với saas-motion-kit

saas-motion-kit là gì?

saas-motion-kit là một hệ thống sản xuất sáng tạo để tạo video quảng bá và video chuyển động cho các sản phẩm phần mềm với HyperFrames và Claude Code. Bộ công cụ kết hợp hướng dẫn lập kế hoạch, tham chiếu hình ảnh, mẫu storyboard, công cụ tự động hóa và các điểm kiểm duyệt trong cùng một kho mã.

Dự án được xây dựng dựa trên một nguyên tắc: không có hai bộ phim nào nên mang cảm giác giống nhau. Thay vì liên tục áp dụng những cách xuất hiện, chuyển cảnh và bố cục quen thuộc, bạn xác định thông điệp và sắc thái trước, rồi phát triển ngôn ngữ hình ảnh phù hợp với bộ phim cụ thể đó.

Bộ công cụ gồm 100 chủ đề thuộc 10 nhóm hình ảnh, cẩm nang 24 chuyển cảnh, quy trình bảy giai đoạn, chiến lược xây dựng component, các ví dụ hoàn chỉnh và công cụ kiểm tra độ đa dạng để phát hiện sự lặp lại trước khi bắt đầu sản xuất.

Tính năng chính

• Quy trình sản xuất bảy giai đoạn: Đi qua các bước brief, component, chủ đề, storyboard, xây dựng, âm thanh và bàn giao, với một điểm kiểm duyệt thủ công sau mỗi giai đoạn.
• 100 chủ đề hình ảnh: Khám phá các hướng phát triển dựa trên giao diện sản phẩm, typography, vật liệu 3D, quang học, phép ẩn dụ, kể chuyện bằng dữ liệu, nhân vật, trường phái nghệ thuật và ngữ pháp máy quay.
• Cẩm nang chuyển cảnh: Xem 24 chuyển cảnh kể chuyện, bao gồm match cut, chuyển tiếp liên tục, chuyển động máy quay, mặt nạ, chuyển đổi vật liệu và kỹ thuật dựa trên thời gian.
• Kiểm tra độ đa dạng: Kiểm tra storyboard để phát hiện chuyển cảnh lặp lại, cách xuất hiện lặp lại, đường cong easing, hướng chuyển động, thời lượng cảnh đồng đều, việc lạm dụng màu nhấn, thiếu bất ngờ, sắc thái không phù hợp và thiếu component nguyên bản.
• Bộ chọn chủ đề: Lập danh sách rút gọn các chủ đề theo đối tượng và sắc thái, đồng thời loại trừ những chủ đề vừa được sử dụng.
• Lịch sử chuyển động: Ghi lại các quyết định sáng tạo qua nhiều bộ phim và tạo báo cáo cho thấy những kỹ thuật bị lạm dụng hoặc chưa được khai thác.
• Chiến lược component: Dựng lại giao diện sản phẩm rõ ràng bằng HTML hoặc tạo các component giả lập đơn giản khi giao diện thực tế không phù hợp.
• Skill cho Claude Code: Sử dụng lệnh /saas-motion-video để tương tác và thực hiện toàn bộ quy trình.
• GitHub Action: Kiểm tra mọi tệp STORYBOARD.md trong các lần push và pull request.
• Tiện ích sản xuất: Giảm kích thước bản render bàn giao, kiểm tra điểm nối của vòng lặp, tổng hợp hiệu ứng âm thanh UI ấm áp và xây dựng thư viện hình ảnh.

Tìm hiểu quy trình bảy giai đoạn

Quy trình tách biệt công việc sản xuất khỏi phê duyệt sáng tạo:

1 Brief → 2 Components → 3 Theme → 4 Storyboard → 5 Build → 6 Sound → 7 Deliver
   gate       gate          gate         gate           gate      gate       gate

Agent có thể thực hiện phần lớn công việc sản xuất, nhưng mỗi giai đoạn đều kết thúc bằng một quyết định của con người. Đây là những điểm bạn xác nhận thông điệp, đánh giá hướng hình ảnh có phù hợp hay không và loại bỏ các lựa chọn chung chung hoặc lặp lại.

1. Brief: Xác định đối tượng, thông điệp, nền tảng, thời lượng, sắc thái và yêu cầu bàn giao.
2. Components: Quyết định nên tạo chuyển động cho giao diện sản phẩm rõ ràng hay thiết kế các component giả lập trung thực.
3. Theme: Chọn ngôn ngữ hình ảnh hỗ trợ sắc thái mong muốn.
4. Storyboard: Lập kế hoạch cho từng cảnh, hoàn thiện sổ cái sáng tạo và chạy kiểm tra độ đa dạng.
5. Build: Triển khai bộ phim dưới dạng hoạt ảnh tất định, an toàn khi tua đến bất kỳ vị trí nào.
6. Sound: Thêm nhạc và thiết kế âm thanh phù hợp khi cần.
7. Deliver: Render ở độ phân giải cao, tạo các kích thước đầu ra cuối cùng và xác minh các chi tiết kỹ thuật như điểm nối vòng lặp.

Cài đặt và thiết lập

Yêu cầu

Trước khi cài đặt bộ công cụ, hãy đảm bảo môi trường của bạn có:

• Node.js 22 trở lên
• ffmpeg
• Claude Code

HyperFrames tự tải Chrome không giao diện, vì vậy bạn không cần cài đặt riêng trình duyệt này để render.

Tùy chọn 1: sử dụng template của repository

Mở repository saas-motion-kit và chọn Use this template. Thao tác này tạo một repository phim chứa các quy tắc sáng tạo, công cụ, template và GitHub Action kiểm tra độ đa dạng được cấu hình sẵn.

Tùy chọn 2: clone repository

git clone https://github.com/tugrawork-creator/saas-motion-kit
cd saas-motion-kit

Cài đặt các skill HyperFrames cho Claude Code. Chúng không được đóng gói sẵn trong bộ công cụ:

npx skills add heygen-com/hyperframes

Xem trước ví dụ đi kèm

Repository bao gồm một dự án HyperFrames hoàn chỉnh cho vòng lặp booth 3D im lặng, liền mạch dài 40 giây. Mở thư mục của dự án và khởi chạy bản xem trước Studio:

cd examples/acme-suite-loop
npx hyperframes preview

Để render phiên bản ngang 4K đạt chất lượng bàn giao, hãy chạy:

npx hyperframes render --quality delivery --resolution landscape-4k --output renders/loop-2160.mp4

Tạo video quảng bá phần mềm đầu tiên

Bước 1: viết brief tập trung

Bắt đầu với template trong templates/BRIEF.md. Xác định điều người xem cần hiểu, đối tượng của bộ phim, nơi bộ phim sẽ xuất hiện và cảm giác mà bộ phim nên truyền tải.

Một câu sáng tạo hữu ích thường theo mẫu sau:

Tôi muốn truyền tải [thông điệp] với sắc thái [sắc thái].

Quyết định này nên được đưa ra trước các hiệu ứng hoặc chuyển cảnh. Ma trận sắc thái trong creative/tone-matrix.md ánh xạ sắc thái với tốc độ, hàm easing, hành vi máy quay, màu sắc, kiểu chữ, chuyển cảnh và âm thanh.

Bước 2: chọn chiến lược xây dựng component

Các video giới thiệu phần mềm phụ thuộc vào UI đáng tin cậy. Hãy áp dụng quy tắc sạch hoặc tưởng tượng của bộ công cụ:

1. Nếu sản phẩm có UI nhất quán, gọn gàng và hiện hành, hãy dùng nó làm tài liệu tham chiếu rồi xây dựng lại các card, bảng, biểu đồ và thông báo cần thiết bằng HTML, sử dụng các design token của sản phẩm.
2. Nếu giao diện đã lỗi thời, quá dày đặc hoặc chưa được thiết kế, hãy tạo các component tưởng tượng được giản lược theo ngôn ngữ hình ảnh của thương hiệu.
3. Giữ mọi component trung thực. Component có thể đơn giản hóa một khả năng thực tế, nhưng không được bịa ra khả năng, khách hàng hoặc các con số hiệu suất.

Dự án cũng yêu cầu mỗi video phải sáng tạo ít nhất một component nguyên bản. Xưởng component trong creative/component-forge.md cung cấp quy trình để phát triển một component nhanh chóng.

Bước 3: chọn chủ đề hình ảnh

Duyệt thư viện 100 chủ đề và chọn ra hai hoặc ba phương án phù hợp với yêu cầu. Mỗi bảng chủ đề bao gồm bốn khoảnh khắc chính—Móc câu, Hé lộ, Chứng minh và CTA—cùng các component đề xuất, kỹ thuật chuyển động theo thời gian, rủi ro, hướng dẫn điều chỉnh và tài liệu tham khảo.

Bạn cũng có thể chọn lọc chủ đề từ dòng lệnh. Ví dụ, lệnh này tìm các chủ đề vui nhộn dành cho nhà phát triển và loại trừ những chủ đề được ghi nhận trong lịch sử gần đây:

python tools/pick_themes.py --tone playful --audience "developers" --history ~/.motion-ledger.json

Các chủ đề được sắp xếp thành 10 nhóm:

• UI sản phẩm làm sân khấu
• Hệ thống kiểu chữ và đồ họa
• Vật liệu và 3D
• Ánh sáng, quang học và kết cấu
• Ý tưởng ẩn dụ
• Định hướng đặc trưng
• Kể chuyện bằng dữ liệu
• Nhân vật và linh vật
• Các trào lưu và thời kỳ nghệ thuật
• Ngữ pháp máy quay và dựng phim

Bước 4: xây dựng và kiểm tra storyboard

Tạo STORYBOARD.md từ mẫu được cung cấp. Bắt đầu bằng câu thông điệp và sắc thái, sau đó hoàn thiện sổ cái sáng tạo với mỗi cảnh quay một hàng. Ghi lại các lựa chọn như chuyển cảnh, cách xuất hiện, hàm easing, hướng chuyển động, thời lượng, điểm nhấn, bất ngờ và component nguyên bản.

Chạy kiểm tra sáng tạo bắt buộc trước khi xây dựng:

python tools/variety_audit.py STORYBOARD.md

Khắc phục các lựa chọn lặp lại được kiểm tra phát hiện. Nếu việc lặp lại là có chủ ý và có ý nghĩa trong mạch kể chuyện, hãy xác định đó là một motif: có chủ đích thay vì để nguyên mà không giải thích.

Kiểm tra cũng có thể sử dụng lịch sử chuyển động, giúp bạn tránh các kỹ thuật đã dùng trong những video gần đây. Khi thêm kết quả, tùy chọn --theme NNN sẽ ghi lại chủ đề được chọn vào lịch sử đó.

Bước 5: bắt đầu sản xuất với Claude Code

Mở Claude Code tại thư mục gốc của repository và gọi skill đi kèm bằng một yêu cầu cụ thể. Ví dụ:

/saas-motion-video  Make a 45 s LinkedIn promo for https://your-product.com — theme 055 (Bento Grid), music-driven, no voiceover.

Skill sẽ hướng dẫn bạn qua cả bảy giai đoạn và tạm dừng tại mỗi cổng đánh giá. Đừng xem những lần dừng này là thủ tục: hãy dùng chúng để đánh giá liệu sản phẩm có truyền đạt đúng yêu cầu hay không, và liệu các lựa chọn hình ảnh có đủ đặc trưng thay vì chung chung.

Bước 6: xem trước và kết xuất

Sử dụng HyperFrames Studio trong quá trình xây dựng:

npx hyperframes preview

Để xuất bản cuối cùng, hãy kết xuất ở 4K ngay cả khi mục tiêu là 1080p hoặc 2K:

npx hyperframes render --quality delivery --resolution landscape-4k --output renders/final-2160.mp4

Sau đó dùng tools/deliver.sh để thu nhỏ bằng Lanczos. Theo hướng dẫn của dự án, cách này tạo ra văn bản, đường biên và hình ảnh 3D sắc nét hơn so với kết xuất trực tiếp ở 1080p.

Sử dụng hệ thống đa dạng cho nhiều video

Theo dõi lịch sử sáng tạo

Một video có thể tránh lặp lại nội bộ nhưng vẫn giống với các sản phẩm trước đây của bạn. Các công cụ lịch sử giải quyết mô thức rộng hơn này bằng cách ghi lại chủ đề và quyết định chuyển động giữa các dự án.

Tạo báo cáo một trang bằng tools/history_report.py. Báo cáo hiển thị các kiểu chuyển cảnh, cách xuất hiện và hàm easing bạn thường dùng, cùng với các chuyển cảnh atlas và những chủ đề bạn chưa khám phá.

Kiểm tra storyboard trong tích hợp liên tục

Repository bao gồm .github/workflows/variety-audit.yml. Mỗi lần push và pull request, workflow sẽ kiểm tra từng STORYBOARD.md. Storyboard tự lặp lại chính nó sẽ không vượt qua kiểm tra, đưa hoạt động đánh giá sáng tạo lên sớm hơn trong quy trình sản xuất.

Bắt đầu với mẫu GitHub là cách dễ nhất để kế thừa workflow này. Nếu bạn sao chép bộ công cụ vào một dự án hiện có, hãy giữ lại workflow và bảo đảm storyboard tuân theo cấu trúc sổ cái được yêu cầu.

Rút kinh nghiệm từ so sánh sáu video

Thư mục examples/six-films sử dụng cùng một kịch bản dài 12 giây trong sáu chủ đề. Mỗi phiên bản giữ nguyên câu chuyện nhưng thay đổi ngôn ngữ hình ảnh và đưa vào một component độc đáo. Thư mục cũng bao gồm bản yêu cầu chung, cho phép bạn cung cấp cùng các ràng buộc cho một agent và thử tạo cách diễn giải thứ bảy.

Dự án examples/acme-suite-loop cũng mang lại một bài học hữu ích. Storyboard đầu tiên của dự án lặp lại cùng một chuyển động xoay, cách tiêu đề xuất hiện, hàm easing và thời lượng cảnh quay. Phiên bản chỉnh sửa thay đổi cách xuất hiện, chuyển động xoay, nhịp độ và hành vi máy quay, đồng thời bổ sung một bất ngờ hình ảnh có chủ đích.

Mẹo sản xuất nâng cao

Đảm bảo mọi khung hình đều an toàn khi tua đến

HyperFrames phải có khả năng kết xuất nhất quán mọi khung hình được yêu cầu. Hãy xem mỗi khung hình là một hàm thuần của thời gian. README khuyến nghị sử dụng một timeline GSAP bị tạm dừng và điều khiển Three.js từ hf-seek.

Tránh dùng Date.now() và tính ngẫu nhiên không được khởi tạo seed. Những đầu vào này có thể tạo ra kết quả khác nhau khi trình kết xuất chuyển thẳng đến một khung hình.

Thiết kế vòng lặp liền mạch bằng toán học

Đối với một bộ phim lặp, hãy để mỗi chuyển động môi trường thực hiện một số chu kỳ nguyên trong thời lượng vòng lặp. Dự án diễn đạt nguyên tắc này như sau:

sin(2π·n·t/LOOP)

Sau khi kết xuất, hãy kiểm tra điểm nối bằng tools/loop_check.py thay vì chỉ dựa vào việc quan sát bằng mắt.

Xử lý kiểu chữ đa ngôn ngữ cẩn thận

Khi bộ phim có các ký tự không thuộc hệ chữ Latinh, hãy đóng gói các tập con phông chữ latin-ext cục bộ. Phông chữ dự phòng tích hợp có thể âm thầm bỏ qua các glyph như ş, ğ và İ.

Đừng giả định rằng việc chuyển sang chữ hoa bằng CSS hoạt động nhất quán giữa các ngôn ngữ. Ví dụ, trong tiếng Thổ Nhĩ Kỳ, chuyển chữ i thường thành chữ hoa sẽ tạo ra İ. Hãy nhập nội dung hiển thị ở dạng chữ hoa vốn có và đặt giá trị lang phù hợp cho từng từ.

Giữ âm thanh ấm áp và có chủ đích

Âm thanh giao diện chỉ sử dụng sóng sin thuần có thể tạo cảm giác mỏng và bất an. Bộ công cụ bao gồm tools/warm_sfx.py để tạo các âm sắc được điều chỉnh ấm hơn, chẳng hạn như marimba hoặc khối gỗ, trong cùng một giọng với độ vang phòng ngắn.

Nếu bạn tạo nhạc bằng Meta’s MusicGen, hãy nhớ rằng trọng số của nó được cấp phép theo CC-BY-NC 4.0 và không dành cho mục đích thương mại. Hãy chọn nhạc có giấy phép phù hợp cho các bộ phim thương mại.

Giảm lượng chữ trên màn hình

Hãy để chuyển động và bố cục truyền tải câu chuyện. Chỉ giữ lại các nhãn và khoảng một dòng cho mỗi nhịp. Nếu người xem phải đọc các đoạn văn để hiểu bộ phim, phần hình ảnh chưa đảm nhiệm đủ vai trò kể chuyện.

Tránh thêm thanh tiến trình ở phía dưới. Dự án cảnh báo rằng cách xử lý này khiến một bộ phim thương hiệu trông giống bản quay màn hình.

Sử dụng chuyển cảnh để kể chuyện

Hãy tham khảo bản đồ chuyển cảnh thay vì chọn chuyển cảnh chỉ để trang trí. Mỗi trong số 24 mục của bản đồ giải thích sắc thái mà nó hỗ trợ và những cách kết hợp cần tránh. Hãy chọn các chuyển cảnh giúp làm rõ mối quan hệ giữa các ý tưởng, đưa một vật thể xuyên suốt các cảnh quay hoặc củng cố chất liệu và ngôn ngữ máy quay của bộ phim.

Danh sách kiểm tra đề xuất cho dự án đầu tiên

1. Cài đặt Node.js 22+, ffmpeg, Claude Code và các skill của HyperFrames.
2. Xem trước ví dụ Acme để xác minh môi trường kết xuất.
3. Viết bản tóm lược với một câu rõ ràng về thông điệp và sắc thái.
4. Quyết định nên dựng lại UI thực tế hay tạo các thành phần tưởng tượng nhưng chân thực.
5. Chọn sơ bộ hai hoặc ba chủ đề thư viện, sau đó phê duyệt một chủ đề tại cổng chủ đề.
6. Viết storyboard và hoàn thiện sổ ghi chép sáng tạo của storyboard.
7. Chạy tools/variety_audit.py và xử lý các lựa chọn bị lặp lại.
8. Xây dựng với hoạt ảnh xác định và an toàn khi seek.
9. Thêm âm thanh tiết chế, có giấy phép phù hợp.
10. Kết xuất ở 4K, giảm kích thước để phân phối và kiểm tra các điểm nối của vòng lặp khi cần.
11. Ghi thêm các lựa chọn của bộ phim vào lịch sử chuyển động để dự án tiếp theo bắt đầu từ những ý tưởng khác biệt.

Kết luận

saas-motion-kit không phải là một bộ sưu tập hiệu ứng để áp dụng máy móc. Đây là một phương pháp có cấu trúc nhằm tạo ra các bộ phim phần mềm truyền đạt rõ ràng mà vẫn có hình ảnh khác biệt. Bằng cách xác định sắc thái trước kỹ thuật, sáng tạo các thành phần dành riêng cho dự án, xem xét quyết định tại mỗi cổng và kiểm tra sự lặp lại trước khi sản xuất, bạn có thể xây dựng một quy trình có thể lặp lại mà không tạo ra công việc lặp đi lặp lại.