626「記念バッジを開ける」— タップで銅・銀・金にランクアップして弾け、記念の数字が出るゲーム風ごほうび演出11秒

Make a short vertical celebration video as one self-contained HTML file and render it to MP4, staged like the reward moment in a top mobile game. The idea: a medal badge is tapped, levels up from bronze to silver to gold, gathers energy, bursts open and reveals the anniversary number with confetti, then says thank you. Every phase must be clearly readable even with ten effects on screen. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【名前】" — default Promptpan
Number: "【記念の数字】" (digits only) · Unit: "【単位】"
Headline: "【記念の文言】" — a part wrapped in *asterisks* is the emphasis word (in gold)
Opening hint: "【最初の案内】"
Thank-you line: "【感謝のひとこと】"
End button text: "【最後のボタン】" — default: the name
Background: "【背景色】"
  夜 = #141019 with pink #FF5C93 and violet #7C5CFF ribbons
  ネイビー = #0F1730 with cyan #4CC9F0 and blue #3A5BFF ribbons
  ワイン = #24101A with orange #FF8A3D and rose #E0457B ribbons
Tiers: bronze #E09A62 / #9B5A2E / #5E3218, silver #E4E8EE / #A3ABB8 / #5D6573, gold #FFD86B / #D9A332 / #8A5A12 (light, mid, dark).
Tempo: "【テンポ】" — default 120 BPM. Aspect ratio: 出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。 (default 9:16).

[The badge]
A scalloped medal (18 soft bumps) with a diagonal metal gradient in the tier colors, an inner disc with a thin light rim, a dark star in the middle, and two ribbon tails in the background's ribbon colors. It turns around its vertical axis by scaling its width with the cosine of the angle (the back face is darker and hides the star). A soft violet light pool glows on the floor under it.

[Structure — 22 beats in 4 scenes of 5, 4, 6, 7 beats]
1. Idle and level up (beats 0–5). Frame 0 is already a finished picture: the bronze badge floating with a slow bob, the hint line under it, a cursor at the lower right. The badge gives a small shake as a hint. The cursor glides to it and taps on beat 2.4 and again on beat 3.8: each tap makes the badge jump, spin one full turn and land with a squash, switching to the next tier color (bronze → silver → gold) with a ring rippling from the tap. The hint slides out and the cursor leaves.
2. Charge (beats 5–9). The gold badge shakes harder and harder, light leaks out around it as soft blurred rays, small sparks are sucked inward from all around, the camera trembles slightly, and in the last fraction of a beat the badge squeezes down.
3. Burst and reveal (beats 9–15). On beat 9: a radial bloom flash from the badge (never above 0.8 opacity, never a full white frame), two layered shockwave rings (wide and faint, medium, thin and bright), thin light streaks shooting outward, a camera punch-in that settles, and one single shower of confetti (rectangles in the ribbon colors, gold and white, flipping as they fall). The badge springs bigger; inside it the number rolls up from 0 and stops crisply on the target, with the unit under it; slow soft light rays rotate behind it in two layers at different speeds. The headline types in under it with its emphasis word in gold.
4. Thanks (beats 15–22). The badge rises a little and settles, the name rises letter by letter at the top, the thank-you line rises under the headline, a gold end button springs in, a cursor glides to its arrow and clicks it on the beat, and a ring spreads. The rays keep turning slowly.

[Motion rules]
Nothing pops in: closed-form springs with small overshoot, mask-line rises and the burst only. Numbers are read from the frame time (never from motion-blur sub-samples), so they never smear. The glow stays behind the badge and only spills past its edges; nothing covers the number. Confetti only once. A slow camera push in each scene plus a very slight handheld float, so nothing freezes for more than half a second. Real motion blur on fast moves only.

[Always-on details]
No timecode, no progress bar, no corner labels, no HUD. Light film grain. Typefaces: Black Han Sans stretched 1.3× wide for the number and the name, Noto Sans KR for the lines, from Google Fonts. Keep a 6% safe margin; the badge and number are never clipped.

[Sound]
If you can generate music, add an exciting game-reward cue at the given tempo: a pop and rising chord on each tap, a rising whoosh during the charge, a big soft hit on the burst, ticking while the number rolls and a short victory fanfare, muxed into the MP4 as AAC. If you cannot generate audio files with a music model, write the backing track yourself in code instead: synthesize an original instrumental (kick, snare, hi-hats, bass, a chord pad and a light arpeggio, no vocals) at the given tempo with a simple chord loop, sample by sample into a WAV, then mux it into the MP4 as AAC. Never use a placeholder or someone else's recording.

[Build]
One HTML file, everything on a single canvas. The script starts with a `const CONFIG` object holding every input plus fps 60 and a seed. All drawing comes from a pure `seek(t)` — no timers, no CSS animation, randomness only from the seed — so any frame renders identically. A settings panel above the preview (hidden with ?render=1) with Japanese labels: text inputs for every text input, selects for background, tempo and ratio, play/pause, a scrubber, and a "設定をコピー" button that copies CONFIG as code. Edits re-render instantly.
Write render.mjs: open the page with ?render=1 in headless Chromium (Playwright), wait for document.fonts.ready, step seek(frame / 60) through every frame, screenshot the canvas at 1080 px on the short side, and pipe into ffmpeg (libx264, yuv420p, crf 18) to make motion.mp4. Close the browser at the end. Accept an optional JSON file argument that overrides CONFIG.

[Check before finishing]
Render one still per beat into a contact sheet and look at it: frame 0 is a finished picture, each tap visibly changes the tier, the charge builds, the flash never whites out the frame, the number is sharp and correct when it stops, confetti appears only once, nothing covers the badge, nothing is clipped. Fix and re-render if anything fails. Finish with the file paths and the single command to re-render after editing settings.

[Final output format]
出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。
This selected output format takes priority over any fixed canvas size or aspect ratio elsewhere in this template. Adapt the composition, text zones and margins to the selected canvas without stretching or cropping essential content. Device safe areas apply only when a device is selected. Never print these format instructions on the image.