465숫자 · 성과 리포트 모션 — 숫자 네 개와 성장 기록을 15초 영상으로

Make a 15-second vertical results report video as one self-contained HTML file and render it to MP4. It should feel like a premium year-in-review / growth report from a top data-design studio: every number gets its own visual metaphor, nothing is a plain slide. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【이름】" — default 프롬프트판
Title: "【제목】" — words in *asterisks* are the emphasis word
Four numbers (slash-separated, each "value=label"; text in parentheses inside a label lists items, e.g. 3=언어 (한 · 영 · 일)): "【숫자 4개】"
Growth record (slash-separated "date=value"): "【성장 기록】" — if empty, skip the growth bar and give its bar to the summary
End button: "【끝 단추】" — default: the name
Palette: "【색 조합】"
  밤 · 형광 = background #0D0F14, text #F3F4F6, accent #B6F23A, second #5B8CFF, third #FF6A3D, card #171A22, dim #7D8494
  흰 · 빨강 = background #F7F7F5, text #151515, accent #E8322B, second #1F5EFF, third #F5B700, card #FFFFFF, dim #8A8A86
  남색 · 금 = background #0F1B33, text #F4EFE3, accent #E9C46A, second #6FB3FF, third #F07167, card #18284A, dim #8E9AB3
Tempo: "【박자】" — default 128 BPM. Aspect ratio: Output size 1080x1920 pixels, 9:16 portrait story. Keep all text inside the central 80% of the height: compress every zone percentage below into the 10-90% range. (default 9:16).
Use only the numbers given. Never invent, round up or decorate a number.

[Structure — 8 bars of 4 beats, every move on a beat]
1. Title: a small monospace "REPORT" tag, the title types in Noto Sans KR 900 with the emphasis word in Nanum Myeongjo 800 italic in the accent color, and a date card flips through the dates of the growth record.
2. Number 1 as a unit grid: one small square per unit (cap at 600 and say so in a legend like "■ = 1"), squares light up in random order while the big number counts up in sync, the newest squares flash white.
3. Number 2 with orbiting chips: the big number in the center of a thin ring, the items from the parentheses pop in as colored pill chips orbiting it.
4. Number 3 as a clock or dial: ticks light up one per step (for a daily count, from 10 o'clock clockwise), the hand sweeps with them and a counter below follows.
5. Growth: a baseline draws, bars rise one per beat with overshoot, values pop above them, the newest bar in the accent color, a line with dots connects the tops, and the growth multiple (last ÷ first, one decimal) lands big at the top.
6. Number 4 as a receipt: a white paper receipt prints downward with the name, three line items at the given value, a dashed rule and the total popping in the third color; a round stamp slams on at an angle if the value is free (0).
7. Summary: a 2 × 2 bento of rounded tiles pops in one per beat, the first tile in the accent color, each with its number and label.
8. End: the name rises through a mask in Black Han Sans stretched 1.3x wide with a particle burst, the numbers type underneath in one line, the end button grows in with a colored glow, a cursor clicks it and a ripple spreads. Hold the final frame.

[Always-on details]
A faint background grid, a thin monospace HUD (corner brackets, name, bar number, beat squares, timecode), subtle film grain, real motion blur on fast moves (average several sub-frame samples), overshoot and settle on arrivals. Three typefaces only (Noto Sans KR, Nanum Myeongjo, Black Han Sans) plus IBM Plex Mono for labels, all from Google Fonts. Keep a 6% safe margin; never clip a Korean syllable.

[Sound]
If you can generate music, add a background track at the given tempo whose accents land on the beats and chapter changes, and mux it 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, with the drums entering where the video's main section starts, 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 Korean labels: text inputs for every text input, selects for palette, 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, export one frame from the middle of every bar into a contact sheet and look at it: every number lands on exactly the given value, the grid count matches, bars are in proportion, the multiple is computed correctly, 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]
Output size 1080x1920 pixels, 9:16 portrait story. Keep all text inside the central 80% of the height: compress every zone percentage below into the 10-90% range.
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.