625Circle, triangle, square: our personality" — one shape rolls, snaps and lands to say three words, 14 seconds

Make a short vertical shape-motion video as one self-contained HTML file and render it to MP4. The idea: a brand tells its personality in three shapes. One single shape — never replaced, never cut — becomes a circle, a triangle and a square, and each shape moves the way its word feels: the circle rolls softly, the triangle snaps around sharply on the beat, the square lifts and lands with weight. At the end the square splits into all three shapes, which line up as a little logo above the name. It must look like a clean, playful brand film from a top motion studio. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【Name】" — default Promptpan
Opening question: "【Opening question】" — a part wrapped in *asterisks* is the emphasis word
Word for the circle: "【Word 1 (circle)】" · word for the triangle: "【Word 2 (triangle)】" · word for the square: "【Word 3 (square)】"
End button text: "【End button】" — default: the name
Palette: "【Palette】"
  Spring = paper #F4F0E8, ink #161616, circle #FF7A59, triangle #2F6BFF, square #1DB37A
  Night = paper #14141A, ink #F2EFE8, circle #FF6FA8, triangle #5B8CFF, square #3EE0A5
  Pastel = paper #FBF7F2, ink #2B2B2B, circle #FF9F8E, triangle #86AEFF, square #7FD8AE
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 one shape]
Describe each shape as 96 outline points taken at equal angles from the top, so any two shapes can morph point to point. The shape's color never crossfades: while it morphs, the next color floods in from its top inside the shape, so there is never a muddy in-between color. A soft floor shadow under it shrinks and fades as it rises.

[Structure — 28 beats in 5 scenes of 5, 6, 6, 6, 5 beats]
1. Question (beats 0–5). Frame 0 is already a finished picture: the question across the top (emphasis word in the circle color) and a black circle in the middle with its shadow. At beat 3 the question slides up out of a mask; a small dot in the circle color falls from above, lands on top of the black circle and the color floods through it; the circle grows a little on a spring.
2. Circle (beats 5–11). The circle rolls once to the right and back (rotation equals distance over radius; a small light dot near its rim shows the roll). A small label "like a circle" and the first word in a huge heavy display face rise letter by letter from a mask line under it, then leave before the next change. At beats 10.4–11.4 the circle morphs into a triangle.
3. Triangle (beats 11–17). On beats 12, 13, 14 and 15 the triangle snaps 120° with a spring that overshoots and settles, punching slightly bigger on each hit; a small light dot near one corner makes the turns visible. Label "like a triangle" and the second word rise and leave. At beats 16.4–17.4 it morphs into a square while turning upright.
4. Square (beats 17–23). The square lifts, hangs for an instant and slams down on beat 19: a squash and stretch, a camera punch-in that settles, a shockwave ring and dust specks along the floor. Label "like a square" and the third word rise and leave.
5. Logo (beats 23–28). The square splits into three small shapes — circle, triangle, square in their own colors — that spring apart into a row; the name rises letter by letter under them, then the three words joined with commas in small text; a dark end button springs in, a cursor glides to its arrow and clicks it on the beat, and a ring spreads.

[Motion rules]
Nothing pops in: closed-form springs with small overshoot, mask-line rises and floods only. Every move lands on the beat. A slow camera push in each scene plus a very slight handheld float, so nothing freezes for more than half a second. Real motion blur on fast moves only (sub-frame samples centered on the frame time); text stays crisp.

[Always-on details]
No timecode, no progress bar, no corner labels, no HUD. Light film grain. Typefaces: Black Han Sans stretched 1.3× wide for the big words and the name, Noto Sans KR for the question, labels and button, from Google Fonts. Keep a 6% safe margin; never clip a Korean syllable.

[Sound]
If you can generate music, add a bright, bouncy track at the given tempo with a soft roll for the circle, crisp ticks on each triangle snap and a deep thud when the square lands, 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 English labels: text inputs for every text input, selects for palette, 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 one still per beat into a contact sheet and look at it: frame 0 is a finished picture, the shape is never replaced and never shows a muddy mixed color, the roll, the snaps and the landing are each clearly visible, words never overlap, 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.