A structured brief for game reward animations in one HTML file
Guizang’s shared prompt for treasure-chest and gacha effects, condensed: real 3D toon objects, a five-beat rhythm, and a screenshot self-check.
Guizang (@op7418) posted a mobile-game payout animation made with Claude Opus 5.5, and so many people asked for the prompt that the author published it along with a new gacha version. The prompt is long and specific. It asks for a single HTML, CSS, and JavaScript page that plays a highlight moment, such as opening a treasure chest or unlocking an achievement, with the polish of a commercial game.
The original is in Chinese and is linked below; this note summarizes its structure from a machine translation rather than reproducing it. Its value is as a checklist, since the same skeleton works with any central object.
Make the object real 3D
The brief rules out flat SVG art for the main object. It asks for Three.js geometry with thickness, bevels, and structural details such as seams and rivets built as real geometry; toon shading with MeshToonMaterial and a three- or four-step ramp; and outlines drawn by a post-processing edge pass over normal and depth buffers, so the line width stays consistent. Moving parts move for real, such as a lid that opens on its hinge.
A five-beat sequence
Idle: the object floats and hints that it can be clicked. Upgrade: each click bounces and flips it and moves it up a rarity tier with a new color. Charge: about a second of shaking, leaking light, and rising sound. Burst: a flash, screen shake, layered shock rings, streaks, coins, and gems. Reveal and payout: reward cards fly out, numbers count up, and coins arc into the balance. Higher tiers get visibly bigger bursts, and confetti is saved for the peak.
Keep the light soft and the hero clear
Background rays use soft conic gradients in two or three layers rather than hard-edged wedges, flashes stay below full white, and particles carry faint halos. At the top-rarity reveal, other elements clear away behind a clean backdrop, and any glow sits behind the object instead of washing over it.
Engineering rules
Animate with a GSAP timeline, using squash, stretch, and overshoot instead of even motion. Write the particle system in Canvas 2D. Synthesize every sound with the Web Audio API, start audio only on the first click, and include a mute switch. Use a strict state machine that ignores clicks during playback, respect reduced-motion settings, and aim for 60 fps.
A condensed brief to adapt
A shorter brief in our own words, built on the same structure. Replace the bracketed parts.
Create an original mobile-game highlight animation for [treasure chest opening / rank up / achievement unlock / boss drop] as a single HTML, CSS, and JavaScript page that plays fully on click. Use original art only. Build the main object in Three.js as real 3D geometry with toon shading and outlines from a normal-and-depth edge pass. Structure the sequence in five beats: idle, upgrade through rarity tiers [common, rare, epic, legendary], charge, burst, and a reveal with reward cards and a count-up payout. Keep the lighting soft, never blow out to white, and keep the main object unobstructed at the reveal. Use a GSAP timeline, a Canvas 2D particle system, and sound synthesized with Web Audio, plus a mute switch. Enforce a strict state machine, respect reduced motion, and target 60 fps. Before delivering, take a screenshot at the charge, burst, reveal, and payout moments and check each one. Finally, list the duration of each beat and the parameters that control the intensity.
Why a page instead of a video
One reply named the practical upside: a single file that replays on click is easy to screen-record, easy to tune, and easy to review with a planner, which suits iteration better than asking for a finished MP4.