625「円・三角・四角で伝える私たちの性格」— ひとつの図形が転がり、回り、ドスンと落ちて3つの言葉を伝える14秒

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: "【名前】" — default Promptpan
Opening question: "【最初の質問】" — a part wrapped in *asterisks* is the emphasis word
Word for the circle: "【性格1(円)】" · word for the triangle: "【性格2(三角)】" · word for the square: "【性格3(四角)】"
End button text: "【最後のボタン】" — default: the name
Palette: "【配色】"
  春 = paper #F4F0E8, ink #161616, circle #FF7A59, triangle #2F6BFF, square #1DB37A
  夜 = paper #14141A, ink #F2EFE8, circle #FF6FA8, triangle #5B8CFF, square #3EE0A5
  パステル = paper #FBF7F2, ink #2B2B2B, circle #FF9F8E, triangle #86AEFF, square #7FD8AE
Tempo: "【テンポ】" — default 120 BPM. Aspect ratio: 出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。 (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 "円のように" 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 "三角のように" 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 "四角のように" 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 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, 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]
出力サイズは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.