466What shall we make?" motion ad — six things flowing through one shape in 18 seconds

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: "【Name】" — default Promptpan
Question: "【Question】" — words wrapped in *asterisks* are the emphasis word
Six things to make (slash-separated): "【Six things to make】" — if fewer than six, repeat them in order
Answer line: "【Answer line】" — same *emphasis* rule
Three "no" lines (slash-separated): "【Three no lines】" — default No sign-up / No payment / All free
Summary line: "【Summary line】" — same *emphasis* rule
End button text: "【End button】" — default: the name
Palette: "【Palette】"
  Riso = paper #F2EBDD, ink #1E1B3A, accent fluorescent pink #FF4FA3, second blue #1F6FD0, yellow #FFD400, card #FBF6EC
  Cream · Orange = paper #F6F1E8, ink #1A1814, accent #F05A2A, second #2F5BFF, yellow #FFD24A, card #FFFFFF
  Night · Lime = paper #0F1013, ink #F2F2EE, accent #C8F43C, second #7C5CFF, yellow #FF7A3D, card #1B1D23
Texture: "【Texture】" — Riso = risograph print look (below), Clean = clean with light film grain only
Tempo: "【Tempo】" — default 120 BPM. Aspect ratio: Output size 1080x1920 pixels, 9:16 portrait story. Keep all text inside the central 80% of the height. (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 reading time (0.9 s + 1 s per 3 words) 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 sans (Noto Sans KR 900, which also covers Latin) with the emphasis word in a bold serif italic (Nanum Myeongjo 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 (Black Han Sans) 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 Cafe") gets typed with check marks; meanwhile the object becomes a long pill button that reads "Copy prompt"; a cursor clicks it on the beat, a ring spreads and a "Copied ✓" 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 glyph 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 Riso)]
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 KR, Nanum Myeongjo, Black Han Sans stretched 1.3x wide), loaded from Google Fonts. Keep a 6% safe margin; never clip a Korean syllable.

[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 English labels: text inputs for every text input, selects for palette, texture, tempo and ratio, play/pause, a scrubber, and a "Copy settings" 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]
Output size 1080x1920 pixels, 9:16 portrait story. Keep all text inside the central 80% of the height.
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.