Tóm tắt: Một bản yêu cầu rất dài, chia đủ năm nhịp: chờ, lên cấp, tích lực, bùng nổ, nhận thưởng. Kèm cả danh sách tự kiểm trước khi giao.
Tác giả viết bằng tiếng Trung một bản yêu cầu cho hiệu ứng "khoảnh khắc cao trào" kiểu game mobile: mở rương, lên hạng, mở khóa thành tích. Tất cả nằm trong một trang HTML, bấm một lần là chạy trọn, chất lượng ngang màn trao thưởng của game thương mại. Rương được dựng 3D thật bằng Three.js, có viền đen kiểu hoạt hình, đổi màu theo cấp (xanh lá, xanh dương, tím, vàng), âm thanh tổng hợp bằng Web Audio.
Vì sao nhiều người dừng lại xem?
Đây là mẫu prompt dài đáng học nhất trong đợt này. Tác giả không chỉ nói muốn gì, mà ghi luôn những lỗi Claude hay mắc và cách tránh: viền đen dày mỏng không đều, hào quang che mất nhân vật, ánh sáng cháy trắng màn hình. Phần cuối bắt Claude tự chụp màn hình bốn thời điểm và tự kiểm trước khi giao.
Cách dùng với Claude Opus 5.5
Mở Claude, chọn Opus 5.5, dán prompt bên dưới. Nhắc thêm một câu: "gói tất cả trong một file HTML, không cần cài gì". Lưu đoạn code Claude trả về thành file .html, mở bằng Chrome. Muốn có video để đăng, bạn quay màn hình lúc nó chạy. Thay phần trong ngoặc vuông ở dòng đầu bằng chủ đề của bạn (ví dụ: mở khóa huy hiệu học xong một khóa).
Prompt
Prompt gốc tiếng Trung, mình dịch sang tiếng Anh:
Make me an original mobile-game "highlight moment" animation: [subject, e.g. opening a chest / rank promotion / achievement unlock / boss drop / character level-up].
Build it as a single web page you can open directly (HTML + CSS + JS). One click plays the whole thing, and it should match the reward/results sequences of commercial mobile games.
[World and style]
- Original art. Do not imitate any existing game's IP, characters or logos.
- Cartoon mobile-game style: high-saturation colours, a consistent dark outline (e.g. #1A1033), chunky rounded shapes.
- The palette upgrades with the tier: [tier ladder, e.g. common green → rare blue → epic purple → legendary gold]. Every tier-up switches the main colour, the light-effect colour and the background tone.
- Titles in a round, chubby game font (e.g. Titan One / Lilita One) with a black outline and drop shadow; letters "slam" into the frame one by one with a bounce.
[The main object: make it real 3D]
- Model it in Three.js, not flat SVG sprites. It needs thickness, bevels and structural details that fit the subject (plank seams, rivets, metal trim, gem facets, latches, etc.). Build details like plank seams from real geometry, not painted black lines.
- Shade with cartoon steps (MeshToonMaterial with a 3–4 step gradient map) and three lights: key light, sky light, and a rim light in the tier colour.
- Outline with post-process edge detection: render a normal map + depth map, then draw lines with a shader. Thick outer silhouette, thin lines where parts meet, consistent width throughout; also add 1.5x supersampling and multisample anti-aliasing.
Don't use the "scaled-up black back-face" outline: the width is uneven and it breaks at corners.
Loosen the depth threshold and rely mainly on normals for seams, otherwise surfaces seen at an angle sprout fine diagonal streaks.
- Moving parts must really move, e.g. the lid swings open on its hinge, a medal spins on its vertical axis.
- At idle the object slowly turns left and right so you see its side and thickness, while bobbing slightly; it casts a soft shadow underneath that changes with its height.
[If the scene has 2D illustrations (card faces, reward icons, characters)]
- Three-layer cel shading: base colour, a block shadow colour, a highlight colour. Not just one gradient.
- Vary line weight: thick outer outline, thin inner structure lines.
- Every character or item has its own expression and pose; don't give everything the same face.
- Draw a shadow underneath so the subject "stands" in the frame; vary background patterns by attribute instead of using the same radial lines everywhere.
[Pacing: five phases, none can be skipped]
1. Ready: the object idles and bobs, shakes every few seconds to hint it can be tapped, and a "Tap" prompt shows at the bottom.
2. Upgrade: each tap makes the object jump, spin once in the air, squash on landing and bounce back; at the same time it switches to the next tier's colours, flashes, puffs a ring of particles, and the title updates.
3. Charge (about 1 second): the object shakes harder and harder, light leaks from its seams, particles are sucked toward the centre, the sound keeps rising in pitch; at the last moment it squashes hard.
4. Burst: a bloom flash spreading out from the burst point, screen shake, a camera push-in, layered shockwaves, long thin light streaks, sparkle stars, coins and gems (spinning). Higher tiers get a clearly stronger burst. Confetti only once, at the peak; no screen full of confetti.
5. Reveal and results:
- Reward cards fly out of the object along arcs and settle with overshoot and a wobble; numbers roll up.
- Rare items get a rainbow shimmer border and a "NEW!" badge.
- After tapping Claim, coins and gems fly along Bézier curves into the balance in the top right, which bumps each time one arrives.
[Reveal stage: let the hero own the frame]
- For the top-rarity reveal, other elements tuck away or fade, and the background becomes a clean gradient backdrop with slowly rotating soft light. Don't leave the hero on a cluttered background.
- When the backdrop appears, hide the other 3D objects in the scene, otherwise the post-process outline draws their silhouettes on the backdrop.
- Put the hero's outer glow behind it so it only spills from the edges; it must not sit in front and wash the object out to white.
- You may add a stardust trail circling the hero, but the orbit must stay entirely outside the hero's silhouette and never sweep across its front.
[Light effects: soft, never hard-edged]
- Background rays: a conic-gradient with soft transitions, not hard-cut colour wedges; stack 2–3 layers with different densities and rotation speeds.
- Light pillars: 5–7 blurred beams fanning out, each flickering slightly; a soft glowing core at the base, with light dust drifting slowly upward.
- Flash: a radial bloom outward from the burst point (mix-blend-mode: screen), intensity no more than 0.8; never blow the whole screen out to pure white.
- Particles: every spark gets a low-opacity halo; shockwaves use three strokes (wide and faint, medium, thin and bright).
[Materials and UI]
- Frames, name plates and buttons need material: brushed-metal gradients, bevel lighting bright at top left and dark at bottom right, inner shadows; swap the inlays by rarity (steel rivets → silver frame with gems → gold frame with diamonds and a small crown).
- Don't cram small stat numbers onto small cards; put detailed stats in the info panel at reveal, where numbers roll up and pop a "▲+value".
- Textures drawn on Canvas must be at least 1.5x the largest on-screen size, or they go blurry when scaled.
[Animation principles]
- Orchestrate with GSAP timelines. Every move gets squash and stretch, overshoot and elastic settle; nothing at constant speed.
- Write the particle system yourself in Canvas 2D: gravity, drag, lifetime, additive blending, plus three motions: "suck in", "curved flight" and "orbit".
- Don't use CSS 3D perspective to flip large elements: scaled up and tilted, they get projected into a flat plane covering the screen. Do every 3D flip in WebGL.
- For every looping "shake" or "breathe" tween, kill it and reset to zero on a state change first, so it can't finish one frame after the stop command and set the value back.
[Sound]
- Synthesize everything live with Web Audio, no audio files: jump, land, tier-up chord, rising charge tone, explosion low end plus noise, pop, count tick, coin clink, victory fanfare.
- Initialize audio only on the first tap; put a mute toggle in the top right.
[UI and engineering]
- Top HUD: mode switch, coin and gem balances, mute button.
- Must work at phone width; respect the "reduce motion" setting (turn off screen shake, fewer particles).
- The animation state machine must be rigorous: ignore taps while an animation plays; no swallowed taps or broken states.
- Target 60fps. The first load shows the full idle scene, never a blank screen.
[Self-check before delivery]
Take a screenshot at each of these moments: charge, burst, reveal, results. Check each one:
- Is the hero blocked by glow, particles or text?
- Is anything blown out to white?
- Is the background cluttered, are there stray outline lines?
- Is small text readable?
- After results, is anything still shaking when it shouldn't?
Finally, tell me how long each phase lasts and which parameters adjust the intensity of the show.Prompt by @op7418, via Skillry / awesome-opus5-5-videos (MIT)
Câu hỏi thường gặp
Prompt này tạo ra cái gì?
Tác giả viết bằng tiếng Trung một bản yêu cầu cho hiệu ứng "khoảnh khắc cao trào" kiểu game mobile: mở rương, lên hạng, mở khóa thành tích.
Trang tương tác này được dựng bằng công cụ nào?
Chỉ cần Claude Opus 5.5 và Chrome. Bạn dán prompt, xin Claude trả về một file HTML duy nhất, lưu rồi mở lên. Code dùng Three.js, WebGL, GSAP, SVG, Canvas, mở là chạy ngay trong trình duyệt. Cần file video thì quay lại màn hình.
Muốn biến trang tương tác này thành phiên bản của riêng bạn thì đổi chỗ nào?
Được. Prompt là của @op7418, 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 @op7418 là đủ.
