466「何を作りますか？」モーション広告 — 作れるもの6つがひとつの図形でつながる18秒

Make an 18-second vertical ad as one self-contained HTML file and render it to MP4. The idea: one small dot travels through the whole video and changes shape on every beat into each thing the viewer could make, then becomes a button, a bullet and finally the full stop after the name. It must look like a risograph-printed motion poster from a top design studio: flat ink colors, slightly misregistered layers, halftone dots, paper grain, every move on the beat. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【名前】" — default Promptpan
Question: "【質問】" — words wrapped in *asterisks* are the emphasis word
Six things to make (slash-separated): "【作れるもの6つ】" — if fewer than six, repeat them in order
Answer line: "【答えの一行】" — same *emphasis* rule
Three "no" lines (slash-separated): "【「なし」3つ】" — default 登録なし / 支払いなし / すべて無料
Summary line: "【まとめの一行】" — same *emphasis* rule
End button text: "【最後のボタン】" — default: the name
Palette: "【配色】"
  リソ = paper #F2EBDD, ink #1E1B3A, accent fluorescent pink #FF4FA3, second blue #1F6FD0, yellow #FFD400, card #FBF6EC
  クリーム・オレンジ = paper #F6F1E8, ink #1A1814, accent #F05A2A, second #2F5BFF, yellow #FFD24A, card #FFFFFF
  ナイト・ライム = paper #0F1013, ink #F2F2EE, accent #C8F43C, second #7C5CFF, yellow #FF7A3D, card #1B1D23
Texture: "【質感】" — リソ = risograph print look (below), なし = clean with light film grain only
Tempo: "【テンポ】" — default 120 BPM. Aspect ratio: 出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。 (default 9:16).

[The travelling object — the heart of the video]
Keep one filled shape alive across every scene. Describe it with keyframes (scene, beat, x, y, size, shape, color) and compute its state from time alone: hold at a keyframe, then in the last half beat before the next keyframe morph position, size, color and outline together with an ease-in-out. To morph between any two shapes, sample every outline at the same 96 angles starting from the top and interpolate point by point. Shapes per thing, chosen by keyword: poster = square, logo = circle, menu = tall rounded board, song = diamond, wallpaper = tall phone pill, thumbnail = wide pill, sticker = star, anything else = heart. Draw each thing's simple inner pattern clipped inside the shape (poster: sun and text bars; logo: ring and starburst; menu: rows with prices; song: a music note; wallpaper: notch, sun and hills; thumbnail: play triangle; sticker: a tiny face), cross-fading the old pattern out and the new one in during the morph.

[Structure — 8 scenes, each long enough to read]
Give each scene its own length in beats: at least 4, and for text scenes the Japanese reading time (0.9 s + 1 s per 8 characters) rounded up to an even number of beats; the answer scene gets 2 extra beats for its demo, the end scene 6 beats.
1. Question: a tiny monospace caption, then the question types itself in a heavy Japanese sans (Noto Sans JP 900) with the emphasis word in a bold serif (Noto Serif JP 800, slight skew) in the accent color; the dot fades in below it, then the question slides away.
2–4. Things, two per scene, one every 2 beats: the dot lands on the beat as the big shape of the thing with its pattern, the thing's name rises through a mask in a 1.3x-wide display face (Dela Gothic One) and leaves upward 2 beats later; a small "01 / 06" counter and the question stay small at the top. The background cuts hard between paper and a pale yellow on every thing.
5. Answer: the answer line types in at the top; a card with two input fields (the first thing, and "Haruカフェ") gets typed with check marks; meanwhile the object becomes a long pill button that reads "プロンプトをコピー"; a cursor clicks it on the beat, a ring spreads and a "コピーしました ✓" toast pops.
6. No lines on a dark ink background: one line per beat pops in from the left in the wide display face, earlier lines dim, the last line turns yellow with a pink highlighter swipe; the object shrinks into a bullet dot that hops down to each line.
7. Summary: the summary line on top, then all six things pop into a grid one by one, each as its shape with pattern and its name under it — a recap of everything seen.
8. End: the name assembles from three cut pieces of each real character flying in and locking together; the object returns as the full stop after the name with a burst of small colored particles; the answer line types under it; a dark end button grows in, a cursor clicks it and a ring spreads. Hold the final frame.

[Risograph texture (when Texture is リソ)]
After drawing each frame: draw the frame again shifted about 0.4% right and 0.25% down with "darken" blending at 60% (misregistered plates, jittering slightly 12 times a second), then a rotated halftone dot screen with "multiply" at 10%, then stronger paper grain. Keep only flat colors from the palette — no gradients, no glows.

[Always-on details]
A thin 8-segment story progress bar along the top fills with time and recolors to stay readable. Real motion blur on fast moves (average several sub-frame samples). Overshoot and settle on arrivals. Three typefaces only (Noto Sans JP, Noto Serif JP, Dela Gothic One stretched 1.3x wide), loaded from Google Fonts. Keep a 6% safe margin; never clip a Japanese character.

[Sound]
If you can generate music, add a background track at the given tempo whose accents land on the shape changes and scene cuts, and mux it 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, with the drums entering where the video's main section starts, 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, texture, 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, export frames at every shape change and the middle of every scene into a contact sheet and look at it: the dot is visible and continuous in every scene, each thing's shape and pattern is recognisable at phone size, patterns never spill outside their shape, the button label is readable, the full stop sits clear of the last letter, 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.