562アプリデモ15秒 — 押したカードが画面に広がり、入力が埋まり、コピーで終わる縦型製品動画

Make a 15-second vertical product demo film for my app or service and render it to MP4. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Product name: "【製品名】" — default Promptpan
Opening question: "【最初の質問】" — default 何を作る?
Two step lines (slash-separated): "【ステップ2行】" — default 埋めるだけ / コピーで完成
Three things the user types (slash-separated, shown as field label: example value): "【入力3つ】" — default 店名: はる商店 / 告知文: 週末特別セール / 雰囲気: 明るく軽快に
Palette: "【配色】"
  基本 = black #0A0A0A ground, off-white #F1EDE4, orange #FF4B2B, blue #2B3FFF, yellow #FFC93C, lime #D7FF3E
  ホワイト = off-white #F4F2EC ground, ink #111214, coral #FF5A4E, cobalt #2D4BFF, sun #FFC23A, mint #3ED6A8
  モノ = black #0B0B0C ground, white #F2F2F2, one accent electric blue #3B5BFF, greys #2A2A2E and #8A8A92

[Storyboard — follow these times exactly]
0.00–1.65 · Sixteen colored tiles fly in and assemble into a four-by-four mark; the product name types below it, one letter at a time.
1.65–2.30 · The same tiles separate and land as the artwork of six original geometric cards inside a phone that appears beneath them. The name fades out before the question appears.
2.30–4.50 · The opening question sits above a phone that slowly grows. A mouse pointer (white arrow with a thin dark outline and soft shadow, never a hand) glides toward one accent card; a selection rim moves to it.
4.50–6.00 · The pointer clicks with a small ring at its tip. That exact card scales up smoothly from its own position and corner radius until it fills the phone screen, and its content becomes an input form with three empty fields. The other cards slide away beneath it. No tiles covering the screen.
6.00–9.30 · The calm scene. The first step line sits above. The camera pushes in so the active field fills about 70% of the width; the three fields fill one by one with the three example values, an accent edge moving down with the focus.
9.30–10.00 · The last field stretches into a finished panel that carries the field colors; the headline changes to the second step line.
10.00–11.80 · The pointer presses a big copy button; it compresses, fills with the accent color and turns into a check mark.
11.80–13.70 · The check breaks into the sixteen tiles; the phone shrinks and fades while the tiles rebuild the mark.
13.70–15.00 · The rebuilt mark and the product name, very large; a gentle settle, then hold to the end.

[Rules]
- Draw your own simple UI with flat shapes. No real brand, no real app screens, no logos.
- Only the motion: no corner labels, frame counters, years, captions or watermarks.
- Phone about 78% of the frame width. Headlines at least 120 px; field labels and typed text at least 44 px on screen. Nothing important within 90 px of the sides or 180 px of top and bottom; nothing cut by the edge; words never overlap.
- Every move eases smoothly with no sudden speed change; springs settle without bounce.
- Use a heavy display font that supports every character you print (for Japanese, for example @fontsource/dela-gothic-one, SIL Open Font License). Print each input exactly once.

[Sound]
An original electronic groove at about 116 BPM made in code, one continuous song with no gaps; during the calm form scene drop only the drums. Integrated about -14 LUFS, true peak below -2 dB; no 0.5 s window more than 8 dB below the average.

[Build]
1080×1920, 60 fps, exactly 15 seconds, H.264 + AAC, yuv420p. Node.js, @napi-rs/canvas and FFmpeg; no browser needed. All drawing comes from a pure seek(t). Keep inputs and colors in config.json; `node render.mjs` makes a new MP4.

[Check before finishing]
Write plan.md first. After rendering, export frames every 0.25 s as 5×4 strips stamped with time, open them, and fix any unrelated jump, overlap, small or cut text, hand-shaped pointer, or dead hold. Then render again. Deliver motion.mp4, render.mjs, config.json and plan.md.

[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.