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: 出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。 (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. Japanese text in Noto Sans JP 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 Japanese 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]
出力サイズは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.