Tóm tắt: Chấm cam bắt đầu ở giao diện, thành dấu chấm trên chữ i, vẽ đồ thị lò xo, lớn thành hình khối rồi quay về thẻ kết. Cuối khớp đầu để lặp.
Prompt viết theo khung đầu vào, định hướng, cấu trúc và cách dựng. Video 2D 16:9 khoảng 15 giây: con trỏ bấm nút "Reduce Motion", chữ uốn lại chỉ còn "Motion" với chấm cam trên chữ i; chấm nhảy xuống vẽ đồ thị lò xo, lao thành vòng tròn cam phủ kín khung, các chữ xoay quanh chấm, lưới chấm bán sắc mở ra thẻ kết, rồi chấm quay ngược về đầu.
Vì sao nhiều người dừng lại xem?
Một vật thể dẫn dắt cả phim là mẹo hay của dân motion: mắt người xem luôn có chỗ bám. Phần dựng yêu cầu mọi hình được tính từ thời gian trong một hàm seek(t), nên video xuất ra đều và chỉnh được từng khung. Danh sách cấm giữ phim gọn và có chủ ý.
Cách dùng với Claude Opus 5.5
Dán nguyên prompt vào Claude Code để Claude đo nhịp nhạc và xuất video 60fps. Claude sẽ hỏi nhãn nút, từ chính, con số phần trăm và màu nhấn của bạn. Chỉ có Claude trên web thì bỏ phần đo nhịp, mở file HTML rồi quay màn hình.
Prompt
Prompt gốc của tác giả:
<inputs>
Ask me for: a short label for the opening toggle, one hero word, a percentage for the graph, the text for the final card, one accent color, and a track with a clear beat.
</inputs>
<direction>
A 2D motion design film in 16:9. Use a warm off-white canvas, near-black backgrounds, bold typography and one vivid orange accent. The orange dot connects every scene: it starts in the UI, becomes the dot over a letter, traces a spring graph, grows into a shape and returns on the end card. A cursor makes the opening click feel real. Keep the motion sharp and controlled, with small spring overshoots and no dead time.
Banned: stock footage, gradients, glows, particle bursts, random transitions and motion that isn't connected to an element already on screen.
</direction>
<structure>
Around 15 seconds, with a visual change on every major beat.
Open: a cursor clicks the orange toggle beside "Reduce Motion". The letters bend and move into place until only "Motion" remains, with the orange dot above the "i".
Spring: the dot jumps away from the word and lands on a graph. Its path draws a spring response, overshoots the target and settles beside a "+22%" callout.
Shape: the dot shoots across a line, grows into an orange circle and fills the frame. A black rounded square rotates inside it, then stretches into a pill. The scene contracts to a single orange dot on black.
Type: words like "SPRINGS", "EASING", "KINETIC TYPE", "3D" and "SOUND" orbit the dot. The circle of type opens out into a field of tiny dots.
Reveal: the halftone field expands and flips to black, revealing the final card: "Opus 5.5", "Motion designer." and "0 keyframes".
Return: the orange dot moves back through the halftone, graph and toggle. Match the final frame to the first so the video loops cleanly.
</structure>
<build>
1. One HTML file, 1920x1080 at 60fps. Compute every visual from time inside seek(t): no CSS transitions, timers or state carried between frames.
2. Use closed-form springs for the toggle, bouncing dot and graph. Draw the graph from the same spring function that moves the dot.
3. Animate letters individually for the "Reduce Motion" to "Motion" transformation. Keep the orange dot attached to the "i" until it begins its jump.
4. Make the orange circle, rotating square and pill different states of the same shape. Preserve its position and motion through each transformation.
5. Place the orbiting words along a circular path, then move their letters outward to hand the frame over to the halftone grid.
6. Draw the halftone as a grid of dots whose sizes respond to the orange dot. Let it grow past the frame edges before revealing the end card.
7. Sync the click, dot landing, graph peak, shape changes and final title to measured beats.Prompt by @rossaxbt, via Skillry / awesome-opus5-5-videos (MIT)
Câu hỏi thường gặp
Prompt này tạo ra cái gì?
Prompt viết theo khung đầu vào, định hướng, cấu trúc và cách dựng.
Làm phim motion design 15 giây thì cần cài gì trên máy?
Bài này không gói gọn trong một file HTML: Claude cần tự chạy lệnh, tìm web hoặc điều khiển trình duyệt. 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. Mình dùng Claude Opus 5.5; Claude tự viết code, tự chạy và xuất ra file video.
Có được dùng lại prompt của @rossaxbt để đăng lên kênh của bạn không?
Được. Prompt là của @rossaxbt, mình lấy qua Skillry và bộ awesome-opus5-5-videos (giấy phép MIT). Chỗ nên đổi trước là dữ liệu, màu và cách người xem tương tác. Khi chia sẻ lại, bạn ghi nguồn @rossaxbt là đủ.
