631「一本の線で」— 一度も離れないペンの線が4つの絵を順に描いて使い方を見せる12秒

Make a short vertical "one line" explainer as one self-contained HTML file and render it to MP4. The idea: a single pen line never lifts. It snakes through a 2 × 2 grid and draws four pictures one after another — a phone, three input boxes, a picture frame with mountains and a sun, a heart — each picture fills with soft color when it is finished and gets its step caption, and the same line finally runs down to become the underline beneath the name. It must look like a calm, crafted hand-drawn explainer from a top studio. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【名前】" — default Promptpan
Opening title: "【最初のタイトル】" — a part wrapped in *asterisks* is the emphasis word
Four step captions (slash-separated): "【手順の説明4つ】"
End line: "【最後のひとこと】" — same *emphasis* rule · End address: "【最後のアドレス】"
Palette: "【配色】"
  紙 = paper #F6F1E7, ink #1D1B18, accents #FF6A3D, #4C8DFF, #2FB67C
  黒板 = paper #1F2B26, ink #F2EFE6, accents #FFB84D, #7FC8FF, #9BE58A
  青写真 = paper #1B3ED2, ink #FFFFFF, accents #FFD84D, #9FE8FF, #FFFFFF
Tempo: "【テンポ】" — default 120 BPM. Aspect ratio: 出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。 (default 9:16).

[The one line]
Build the whole path once as a list of points with cumulative length and draw only the part up to the current length, with round caps, plus a small glowing pen tip at its end while it moves. The line must never cross the inside of a picture: it enters each picture at a corner, travels around its outline, and leaves by retracing an edge it already drew. Connectors between pictures are smooth curves, and the line never ends in mid-air — it ends as the underline under the name.
- Phone (top left): a tall rounded rectangle; when finished it fills with a light accent tint, the name appears small on its screen and a home bar under it.
- Input boxes (top right): three stacked rounded boxes drawn one after another; when finished, colored text bars grow inside each box.
- Picture (bottom right): the frame, then a mountain ridge from the bottom left, then up the right edge to a small sun circle, then back along the edges; when finished, the sky fills with a soft gradient, the mountains with green, the sun with the accent.
- Heart (bottom left): entered and left at its bottom point; when finished it fills with the accent.

[Structure — 24 beats]
Frame 0 is already a finished picture: the opening title at the top and four faint dashed placeholders numbered 01 to 04 in the grid. The pen enters from the top left on beat 1 and draws the phone (beats 1–4.4), the boxes (5–9.6), the picture (10.6–15.4) and the heart (16.2–18.8), pausing briefly after each one while it fills and its caption rises from a mask line under it; the placeholders fade away as the drawing takes over. On beats 19.4–20.8 the line runs down around the left side (avoiding the captions) and draws a long underline; the name rises letter by letter above it, the end line types in below, and the address rises under that.

[Motion rules]
The drawing speed eases in and out within each picture but never stops while drawing. Fills and captions arrive on closed-form springs or mask lines — nothing pops in. 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, no corner labels, no HUD. Light film grain. Typefaces: Noto Sans KR for the title and captions, Black Han Sans stretched 1.3× wide for the name, a monospace for the numbers and address, from Google Fonts. Keep a 6% safe margin; captions never overlap the line or each other.

[Sound]
If you can generate music, add a light, playful track at the given tempo with a soft pencil-scratch texture while the line draws and a small chime as each picture fills, 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. Compute every size from the canvas size inside a setup step, never at script load. A settings panel above the preview (hidden with ?render=1) with Japanese labels: text inputs for every text input (steps slash-separated), 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 line is one unbroken stroke from start to underline, it never crosses inside a picture or through a caption, each picture fills only after it is complete, 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.