Tóm tắt: Bản yêu cầu chia khối gọn: đầu vào, định hướng, cấu trúc, cách dựng, lỗi hay gặp, thứ tự làm. Dùng số thay cho tính từ.
Prompt xin một vòng lặp motion giao diện liền mạch dài 14 giây, khung 1440x1440, 60fps. Chỉ một hình, không cắt: hình đó biến từ trạng thái này sang trạng thái khác (linh vật pixel, nút play, thanh tải, dấu tích, thanh thời gian, trình chỉnh đường cong, bộ đếm khung, lệnh "export mp4", thông báo "840 frames rendered") rồi quay về linh vật. Prompt chia thành các khối: đầu vào, định hướng, cấu trúc, cách dựng, lỗi hay gặp, và thứ tự làm việc.
Vì sao nhiều người dừng lại xem?
Bố cục bằng thẻ như <inputs>, <direction>, <gotchas> đang là kiểu viết prompt dài phổ biến cho Opus. Khối "gotchas" ghi sẵn cách sửa những lỗi tác giả đã gặp, ví dụ con trỏ nhảy khi vòng lặp quay về đầu. Khối cuối bắt Claude cho xem storyboard trước, rồi tự kiểm 5 khung quanh mỗi nhịp.
Cách dùng với Claude Opus 5.5
Dán nguyên prompt vào Claude Code. Claude sẽ hỏi bạn phần đầu vào (màu nền, màu hình, font...); trả lời bằng mã màu và con số như prompt dặn. Nếu chỉ dùng Claude trên web, bỏ phần encode H.264 và quay màn hình file HTML.
Prompt
Prompt gốc của tác giả:
<inputs>
Give me:
* canvas color
* shape color
* accent color
* shape radius
* fonts
* the states the shape should morph through
Use hex codes, seconds, damping ratios and pixel sizes instead of adjectives.
</inputs>
<direction>
Make a 14 second, 1440x1440, 60fps seamless UI motion loop.
One shape, zero cuts.
The shape morphs from state to state and is never replaced.
Each state fills 50% of the frame.
The camera starts on the beat and settles slower than the shape.
Use closed-form springs.
Shape damping 0.72, settle time 0.35s.
Camera damping 1.0, settle time 0.6s.
Content swaps use 12px blur and fade over 0.15s.
The cursor tip stays locked to whatever it drags.
</direction>
<structure>
Use a 0.5s beat grid.
0.0 - pixel mascot idles
1.0 - mascot squashes into play button
1.5 - loader
2.0 - check draws
2.5 - timeline scrub
4.0 - keyframe stretches past the end and snaps back
5.0 - bezier editor
7.0 - counter rolls F 000 to F 840
8.5 - render bar fills
10.0 - command palette types "export mp4"
11.0 - toast says "840 frames rendered"
12.0 - toast shrinks back into the mascot
The last frame must be the first frame.
</structure>
<build>
Write one HTML file with Canvas 2D.
window.renderAt(t) must be a pure function of time.
No Math.random.
No clock.
No carried state.
?t= must freeze the exact moment.
Render every frame from renderAt(frame / 60).
Use 4 subframes for motion blur.
Encode to H.264 at 60fps.
</build>
<gotchas>
Fix the cursor jump at the loop wrap with:
t - 14*floor(t/14)
Do not cross-fade orange into ink.
Use a ripple from the center at 1.5s and from the click point at 12.0s.
Roll word swaps vertically.
Start draw-on after blur-in.
Aim the cursor at where the target will be when it lands.
Keep cursor speed under 65 px/frame.
</gotchas>
<start>
First show me the storyboard.
Then write the code.
After the first render, check 5 frames around every beat and fix the issues before the final render.
</start>Prompt by @flxrnc, 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 xin một vòng lặp motion giao diện trơn tru dài 14 giây, khung 1440x1440, 60fps.
Làm vòng lặp motion giao diện 14 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.
Prompt của @flxrnc có được sửa lại cho việc của bạn không?
Được. Prompt là của @flxrnc, mình lấy qua Skillry và bộ awesome-opus5-5-videos (giấy phép MIT). Chỗ nên đổi trước là tên thương hiệu, câu chữ, màu và thời lượng. Khi chia sẻ lại, bạn ghi nguồn @flxrnc là đủ.
