634「4コマ漫画」— 悩み・解決・ジャーン・早帰りまで、縦4コマが1コマずつ描かれる白黒網点漫画12秒

Make a short vertical four-panel comic video (a classic 4-koma, read top to bottom) as one self-contained HTML file and render it to MP4. The idea: a tiny story in four panels — a worry, a discovery, a big reveal, a happy ending — drawn panel by panel in black ink with halftone screentone and only one accent color. The camera moves in on each panel as it plays, then pulls back to show the whole finished page with a red stamp. It must look like a crisp, charming comic from a skilled artist. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【名前】" — default Promptpan (goes on the stamp)
Comic title: "【漫画のタイトル】"
Panel 1 line: "【1コマ目のセリフ】" · Panel 2 line: "【2コマ目のセリフ】" · Panel 3 shout: "【3コマ目の叫び】" · Panel 4 line: "【4コマ目のセリフ】"
End address: "【最後のアドレス】"
Palette: "【配色】"
  白黒・赤 = paper #F7F5F0, ink #141414, accent #E8322C
  白黒・青 = paper #F5F6F8, ink #121418, accent #2F5BFF
  セピア = paper #F1E6D2, ink #2A1E14, accent #D2452B
Tempo: "【テンポ】" — default 120 BPM. Aspect ratio: 出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。 (default 9:16).

[The page]
A paper page with the title at the top left and a short accent underline, and four wide panels stacked vertically with thick ink borders and small gutters. The character is the same in every panel: a round head with spiky black hair, simple eyes and mouth, and shoulders cut off by the panel edge. Shading is halftone dots only (no gradients). The accent color appears only in a few places: the title underline, the revealed poster and its burst lines, small blush marks and floating hearts, and the final stamp.
- Panel 1: worried face (small dot eyes, tilted brows, wavy mouth, a sweat drop that wobbles), a dark screentone corner, a speech bubble with line 1.
- Panel 2: focused face holding a phone whose screen fills with little text bars, radial speed lines behind, a bubble with line 2.
- Panel 3: a big poster in the accent color springs in with accent burst lines around it; the character has big shiny eyes and an open mouth; a jagged shout bubble with line 3.
- Panel 4: a happy face (closed smiling eyes, blush), one arm waving, three small accent hearts floating up, a bubble with line 4.
Speech bubbles are white with ink outlines and short tails that only point toward the speaker; they pop out of their tail on a spring and the words type in (read from the frame time).

[Structure — 24 beats]
Frame 0 is already a finished picture: the title and four dashed empty panel outlines numbered 1 to 4. From beat 3, every 4 beats a panel's border springs in, its content appears and its bubble pops; the camera eases (about one beat per move, never faster) to center each panel at a slight zoom and drifts closer while it plays. Around beat 19.4 the camera pulls back to the whole page; at beat 20.4 a red rectangular stamp with the name slams onto the top right corner, settles with a tiny wobble, and the address appears under it.

[Motion rules]
Nothing pops in: springs with a small overshoot, mask-line rises and bubble pops only. One eased camera move per panel plus a very slight handheld float, so nothing freezes for more than half a second. Real motion blur on fast moves only; lettering stays crisp. No timecode, no progress bar, no HUD. Typefaces: Noto Sans KR 900 for title and bubbles, a monospace for the panel numbers and address, from Google Fonts. Every bubble line must fit inside its bubble; long lines shrink.

[Sound]
If you can generate music, add a bouncy comic track at the given tempo with a pen scratch as each panel appears, a pop for each bubble and a stamp thud at the end, 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 Japanese 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, panels appear in order, every bubble is readable and its tail points to the speaker, the accent color appears only where intended, the final page shows all four panels and the stamp, 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.