HTML sang video
Biến mã hoạt ảnh web, Canvas, Three.js thành MP4
Chọn một mẫu để bắt đầu
- Khung giảng trực tiếp Khung người nói bo góc + nhãn LIVE + bảng tên; tiếng video cũng lên dòng thời gian
- Khung tệp bo góc Khung viền trắng phát sáng + nhãn góc; phóng to khi vào và có thể zoom vào một vùng
- Tường ảnh Ảnh dọc lần lượt hiện cạnh nhau, mỗi ảnh có chú thích
- Bộ ba cận cảnh Các ảnh xếp cạnh nhau tràn khung, mỗi ảnh có nhãn, bên dưới là số chương và tiêu đề
- Thư viện ảnh kèm dải Hình thu nhỏ bên dưới lần lượt sáng, ảnh lớn đổi theo
- Phân cảnh + khung chính Cột phân cảnh bên trái, khung chính có nhãn bên phải
- Giảng chia đôi màn hình Chữ lớn bên trái (dòng hai màu nhấn), tệp bên phải, mốc dòng thời gian bên dưới
- Chữ lớn lồng hình Video hoặc ảnh hiện trong chữ khổng lồ, có tiêu đề nhỏ phía trên và phụ đề bên dưới
- Khung điện thoại Cảnh quay trong khung điện thoại, khẽ trôi
- Huy hiệu góc Logo và tên luôn ở góc
- Nền chuyển màu hạt Chuyển màu chậm từ xanh mòng két sang cam kèm hạt phim — đặt ở dưới cùng làm nền
- Tiêu đề bật Tiêu đề lớn kèm gạch chân và phụ đề
- Từng chữ Từng chữ bật lên theo nhịp
- Tăng trưởng số liệu Cột tăng dần, con số chạy lên
- Thanh tên phía dưới Thanh tên và vai trò
- Quét sáng Một vệt sáng lướt qua khung hình
- Đếm ngược 3, 2, 1 bật lên trong khi vòng tròn chạy hết
- Máy đánh chữ Gõ từng chữ với con trỏ nhấp nháy
- Vòng tiến độ Vòng tròn lấp đầy đến phần trăm của bạn, con số tăng theo
- Khoanh tròn Vòng tròn vẽ tay khoanh điểm quan trọng
- Khối 3D xoay Nút thắt ánh kim xoay chậm (Three.js)
- Thanh nhạc Các thanh nhún theo nhạc trên dòng thời gian và lóe sáng theo nhịp
- Thẻ phụ đề Phụ đề cùng thời điểm hiện thành từng thẻ có vạch nhấn; ẩn track phụ đề để chỉ còn thẻ
- Tiêu đề tô sáng Thanh dạ quang quét qua nền kem khi chữ lớn rơi xuống từng chữ
- Chữ động mạnh Mỗi màn một chữ đập vào, các mảng đen/vàng/kem quét chéo
- Thẻ câu hỏi Nhãn nhỏ + hai dòng chữ lớn, dòng hai trên dải sáng
- Nhãn dán nghiêng Dải giấy màu kem nghiêng lần lượt hiện ra (ngăn bằng |)
- Đếm ngược khối màu Số lớn đếm lùi, mỗi số đẩy vào một khối màu mới
- Thẻ viên nang Tiêu đề lớn, một hàng thẻ viên nang tối lần lượt nổi lên và một kết luận nổi bật bên dưới
- Thẻ trạng thái Cột thẻ bên trái lần lượt cuộn vào giữa để làm nổi bật, bên phải là phần so sánh chữ lớn
- Bảng đối chiếu thẻ Bảng tối liệt kê “thẻ → ý nghĩa” từng dòng, cột trái dùng phông đơn cách
- Thẻ trích dẫn Một nhãn nhỏ góc trên trái và một đoạn trích dài hiện dần từng dòng
Bấm một cái là vào trình chỉnh sửa, hiệu ứng chuyển động đã được thêm sẵn. Với mẫu có ô tư liệu, kéo video hoặc ảnh lên thẻ, hoặc bấm “Dùng tệp của tôi”, tệp sẽ được đặt sẵn khi trình chỉnh sửa mở ra. Tệp chỉ nằm trên thiết bị của bạn, không tải gì lên.
Dán hoạt ảnh web Canvas, SVG, GSAP, Three.js; vẽ từng khung hình, chồng lên video và xuất MP4 hoặc GIF. Ngay trên trình duyệt, miễn phí, không hình mờ.
Dán một đoạn mã hoạt ảnh web hoặc nhập một tệp .html, nó sẽ trở thành một đoạn chuyển động trên dòng thời gian: nền trong suốt, chồng lên video hoặc ảnh của bạn, và cũng di chuyển, thu phóng, chỉnh độ trong suốt, thêm keyframe và hoạt ảnh vào/ra được như mọi đoạn khác.
Trình chỉnh sửa vẽ nó từng khung hình theo thời gian chứ không quay màn hình: cùng một thời điểm luôn cho ra cùng một khung hình, nên xem trước thế nào thì xuất ra thế ấy. Math.random, Date và requestAnimationFrame trong mã được thay bằng đồng hồ xác định; GSAP và Three.js đã có sẵn, không cần chèn script liên kết ngoài.
Mã chạy trong sandbox cô lập, không kết nối mạng, nên ảnh và phông chữ liên kết ngoài sẽ không tải được; khi cần, hãy nhúng trực tiếp bằng địa chỉ data:. Các tham số do chính tác phẩm khai báo (chữ, màu, số) sẽ hiện trong bảng tham số bên phải, sửa xong là xuất MP4 hoặc GIF ngay.
Câu hỏi thường gặp
- Hỗ trợ những cách viết nào?
- Bốn cách viết phổ biến đều dùng được ngay: định nghĩa window.__seek(t) để vẽ một khung hình theo thời gian tính bằng giây; tạo một timeline GSAP đang tạm dừng rồi đưa vào window.__timelines; sắp xếp cảnh Three.js theo thời gian trong __seek rồi render; hoặc một vòng lặp requestAnimationFrame thông thường. Nếu cả trang chỉ có một canvas thì lấy thẳng từ canvas, nếu không thì vẽ cả trang (SVG, CSS, chữ) thành một khung hình.
- Có dùng được thư viện trên CDN không?
- GSAP (gồm các plugin CustomEase, MotionPath, MorphSVG, DrawSVG, SplitText) và Three.js đã có sẵn; địa chỉ CDN trỏ tới chúng trong mã sẽ tự động được thay bằng bản có sẵn. Các thư viện ngoài khác không tải được vì sandbox không kết nối mạng.
- Video xuất ra có âm thanh không?
- Bản thân hiệu ứng chuyển động không có âm thanh, âm thanh do mã phát cũng không được ghi lại. Bạn có thể thêm nhạc hoặc lồng tiếng riêng trên dòng thời gian rồi xuất cùng với hiệu ứng.
- Mã bị lỗi thì làm sao?
- Phía trên khung xem trước và trên đoạn sẽ báo lỗi, nội dung lỗi gốc hiện trong hộp thoại mã; bấm “Nhờ AI sửa”, AI sẽ đọc mã của bạn, sửa xong rồi xem lại kết quả. Trong lúc chưa sửa xong, khung xem trước dừng ở khung hình bình thường cuối cùng, không ảnh hưởng các đoạn khác.
- Mã có bị tải lên không?
- Không. Mã được lưu cùng dự án trong trình duyệt của bạn, render và xuất ngay trên máy của bạn. Chỉ khi bạn chủ động lưu dự án lên đám mây thì nó mới được tải lên cùng dự án.