063「칸 채우면 완성」 — 내 서비스 사용 과정을 그대로 보여 주는 15초 제품 시연 쇼츠

Make a 15-second vertical 2D product demo as one self-contained HTML file and render it to MP4. The idea: one living app screen. A person fills three fields, every value they enter instantly changes the result, and the finished result comes out. It must look like a dense, premium editing tool in motion, not a slideshow. Stay flat 2D on a canvas: no 3D, no WebGL, no light simulation, so it renders fast on an ordinary PC. Do the whole job now without asking questions.

[Inputs]
Name: "【이름】"
Problem line: "【문제 한 줄】"
Three field labels: "【입력 칸 3개】"
Three field values: "【칸에 넣는 값 3개】"
Result: "【결과물】"
Closing line: "【끝 한 줄】"
Palette: "【색 조합】" — the meaning of color is fixed: red = problem, orange = in progress, green = done:
  어두운 판 = background #0B1016, panels #151C24, text #F2F4F7
  밝은 판 = background #F2F1EC, panels #FFFFFF, text #17171A
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).

[One world]
The whole film is one screen that never changes place. Top: a two-line caption with a small status pill such as "칸 0/3 · 완성도 8%". Middle: the input panel with the fields, sliders, swatches and a live prompt preview. Under it: a slowly scrolling timeline of small tags that always keeps moving. Bottom: the result preview with a round progress gauge and live numbers.

[Story]
0 to 3 s: empty dashed fields, a big question mark in the result, red tags, the progress low, the problem line in the caption.
3 to 7 s: the camera snaps in on the panel. A cursor fills the three fields one by one, letter by letter; each field gets a green check and a small "+16" chip, and the gauge climbs.
7 to 10 s: the cursor flips options and swatches; the result recolors instantly, in sync. The camera snaps in on the result; measuring marks and green tags appear around it.
10 to 13 s: the camera snaps to the copy button, it is pressed, and lines of text get checks one by one. Back to the result: the outline fills with color piece by piece until 100%.
13 to 15 s: focus pulls back; the name, the closing line and three small summary chips appear. Hold, with the timeline still moving.

[Motion rules]
The world always flows; no pause over 0.5 s. Small events follow each other about every 0.3 s: a tag, a number, a check. The camera has only two states, full view and close-up; it moves in about 0.2 s with blur and then stays still. No slow push-ins, and never zoom back with a visible cut. Reading text never moves: only the current word changes color. A flash or burst appears once, only at a meaningful moment. Scene changes are depth changes in the same space: the old layer blurs away while the new focus sharpens. No HUD decoration without meaning. Korean text in Black Han Sans and Noto Sans KR from Google Fonts. Keep a 6% safe margin. No sound.

[Build]
One HTML file, one canvas. The script starts with a `const CONFIG` holding every input plus fps 60 and a seed. All drawing comes from a pure `seek(t)`, with no timers and no CSS animation. A settings panel above the preview (hidden with ?render=1) with Korean labels for the inputs, play/pause, a scrubber and a "설정 복사" button that copies CONFIG as code.
Write render.mjs: open ?render=1 in headless Chromium (Playwright), wait for fonts, step every frame through seek(frame / 60), 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 that overrides CONFIG.

[Check before finishing]
Look at stills every 0.5 s. Check that text is readable at phone size, nothing overlaps or clips, and motion never stops. 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.