Tóm tắt: Nút bấm thành vòng xoay tải, thành trình phát nhạc, thành thanh trượt, thành biểu đồ: tất cả là một khối hình biến dạng liên tục theo nhịp nhạc.
Video vuông, một hình khối duy nhất đi suốt từ đầu tới cuối, không có cú cắt nào. Nó bắt đầu là cái nút, rồi thành vòng tải, dấu tích, trình phát nhạc, thanh âm lượng, công tắc, thanh tab, biểu đồ tự vẽ, hộp lệnh tìm kiếm, thông báo nhỏ, rồi quay lại cái nút. Một con trỏ chuột điều khiển mọi thay đổi bằng cú bấm và kéo thật. Khung cuối giống khung đầu nên video lặp mãi.
Vì sao nhiều người dừng lại xem?
Kiểu video này hay gặp trên Dribbble, nơi dân thiết kế giao diện khoe tay nghề. Prompt chỉ ra những mẹo nhỏ làm nên chất lượng: hai mép của thanh tab chạy theo hai lò xo khác nhau nên mép trước kéo dài ra trước mép sau; kéo quá mức thì thanh trượt giãn ra rồi bật lại. Những chi tiết này người xem không gọi tên được, nhưng cảm thấy được.
Cách dùng với Claude Opus 5.5
Prompt này mở đầu bằng việc để Claude hỏi bạn trước. Dán vào Claude Code (chọn Opus 5.5), trả lời từng câu Claude hỏi, duyệt bảng phân cảnh rồi mới cho viết code. Phần render cần ffmpeg, Playwright và Python có numpy. Bạn chuẩn bị danh sách 8 đến 12 trạng thái giao diện muốn có, chọn đen trắng hay thêm một màu, và một bài nhạc khoảng 120 BPM. Prompt gốc dài, mình viết lại gọn bên dưới.
Prompt
Prompt mình viết lại theo ý của tác giả (không phải nguyên văn):
Ask me first for: 8 to 12 UI states for the shape to become, black and white or one accent color, and a royalty-free song around 120 BPM.Direction: one shape, never cut. Every state is the same element morphing size, radius and color while its content swaps. A cursor drives every change with real clicks and drags. Light warm-gray canvas, black and white components, one UI font. Springs everywhere, tiny overshoot at most. The camera zooms so each state fills the frame. Last frame = first frame, so it loops.Banned: bouncy easing, particle bursts, glows, gradients on UI, dead time, anything that looks like a template.Example flow: button, loader, check, music player, progress bar, volume slider that stretches past max, toggle, tab indicator, chart that draws itself, command palette, toast, back to the button.Build: one square HTML file 1440x1440, every style computed from time in seek(t). Springs are closed-form so each value is a pure function of time. The tab indicator's two edges ride different springs. Analyze the song for the beat grid. Render with Playwright and ffmpeg motion blur at 60fps.Show me the state list on the beat grid before writing code.Prompt by @__morse, via Skillry / awesome-opus5-5-videos (MIT)
Câu hỏi thường gặp
Prompt này tạo ra cái gì?
Video vuông, một hình khối duy nhất đi suốt từ đầu tới cuối, không có cú cắt nào.
Muốn tự làm cảnh 3D này, bạn chuẩn bị những gì?
Bài này không gói gọn trong một file HTML: quy trình dùng ffmpeg, Playwright, Python. Bạn cần để Claude chạy được lệnh trên máy, ví dụ Claude Code mở trong một thư mục trống, và cài sẵn ffmpeg nếu máy chưa có. Mình dùng Claude Opus 5.5; Claude tự viết code, tự chạy và xuất ra file video.
Prompt của @__morse có được sửa lại cho việc của bạn không?
Được. Prompt là của @__morse, mình lấy qua Skillry và bộ awesome-opus5-5-videos (giấy phép MIT). Chỗ nên đổi trước là vật thể, ánh sáng, góc máy hay tốc độ quay. Khi chia sẻ lại, bạn ghi nguồn @__morse là đủ.