624「목표까지 몇 칸?」 — 100칸 판이 채워지고, 남은 칸이 남은 날만큼 줄을 서서 하루씩 지워지는 11초

Make a short vertical data-motion video as one self-contained HTML file and render it to MP4. The idea: how many squares are left to the goal? A board of 100 squares fills up to where you are now, the filled squares fold away into a progress bar, and the empty squares line up as one row per remaining day, so the viewer sees exactly what has to be done each day. Then the rows get checked off day by day and a flag lands on the very last square. It must look like a clean, calm data film from a top motion studio, with every number readable. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【이름】" — default 프롬프트판
Goal: "【목표 이름】"
Current value: "【지금 값】" · Target value: "【목표 값】" · Unit: "【단위】" (numbers only in the value fields)
Days left: "【마감까지 남은 날】" — use 1 to 10 rows (cap at 10)
End line: "【끝 한 줄】" — a part wrapped in *asterisks* is the emphasis word; if empty, write "하루 *N unit*이면 끝" with the real per-day number
End button text: "【끝 단추】" — default: the name
Palette: "【색 조합】"
  민트 = paper #F3F1EC, ink #151515, empty #D9D5CC, accent #18B57A to #0E7A52, flag #FFC93C
  코랄 = paper #F3F1EC, ink #151515, empty #D9D5CC, accent #FF6A4D to #C2412A, flag #2E6BFF
  블루 = paper #F3F1EC, ink #151515, empty #D9D5CC, accent #2E6BFF to #1A45B8, flag #FF5A1F
Tempo: "【박자】" — default 120 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).
Compute everything from the inputs: filled squares = round(current / target × 100), left = target − current, per day = ceil(left / days). Never invent numbers.

[Structure — 4 scenes of 6, 5, 6, 5 beats]
1. Fill. Frame 0 is already a finished picture: the goal title on top, a 10 × 10 board of soft gray rounded squares, and "0 / target unit" in a tabular monospace under it. The filled squares spring in as a diagonal wave from the top-left (accent color shading slightly darker toward the bottom-right) while the big number rolls up with them and stops crisply on the current value; a small percent pill pops in.
2. What is left. The filled squares shrink and fly, in order, into a progress bar under the title ("current unit 완료" rises above it), while each empty square slides and grows into its place in a grid of rows — one row per remaining day, as many squares per row as the per-day share — with small "1일, 2일…" labels at the left. A large "남은 left unit" rises from a mask line at the bottom.
3. Day by day. On an even rhythm across the scene each row fills with the accent color square by square (each square pops on a small spring), the progress bar grows with it, and a check mark pops in at the end of each finished row. The bottom line reads "하루 per unit". At the end a small flag drops onto the last square, lands with a squash and a soft shockwave.
4. End. The accent color floods out from the flag, the end line types in large with its emphasis word in a contrasting serif italic, the name rises from a mask line, a dark end button springs in, a cursor glides to its arrow and clicks it on the beat, and a ring spreads.

[Motion rules]
Nothing pops in: entrances are closed-form springs with a small overshoot, mask-line rises or floods. Numbers roll only while moving and are read from the frame time (never from motion-blur sub-samples), so they never smear. One slow camera push per scene plus a very slight handheld float, so nothing freezes for more than half a second. Real motion blur on fast moves only; text stays crisp.

[Always-on details]
No timecode, no progress bar along the frame edge, no corner labels, no HUD. Light film grain. Typefaces: Noto Sans KR for words, a tabular monospace for numbers and day labels, Black Han Sans (stretched 1.3× wide) for the big "남은" line, from Google Fonts. Keep a 6% safe margin; long numbers must shrink to fit, never clip.

[Sound]
If you can generate music, add a light, optimistic track at the given tempo with a soft tick for each filled square, a chime for each finished row and a thud when the flag lands, 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 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 one still per beat into a contact sheet and look at it: frame 0 is a finished picture, the filled count, left value and per-day value are all correct for the inputs, every number is sharp when it stops, the rows match the number of days, the flag lands on the last square, 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.