562App Demo 15s — a tapped card grows into the screen, fields fill in, and copy finishes it, in a vertical product film

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: "【Product name】" — default Promptpan
Opening question: "【Opening question】" — default What will you make?
Two step lines (slash-separated): "【Two step lines】" — default Just fill the fields / Copy and done
Three things the user types (slash-separated, shown as field label: example value): "【Three inputs】" — default Shop name: Spring Corner / Promo line: Weekend special / Mood: bright and lively
Palette: "【Palette】"
  Classic = black #0A0A0A ground, off-white #F1EDE4, orange #FF4B2B, blue #2B3FFF, yellow #FFC93C, lime #D7FF3E
  White = off-white #F4F2EC ground, ink #111214, coral #FF5A4E, cobalt #2D4BFF, sun #FFC23A, mint #3ED6A8
  Mono = 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 example @fontsource/inter at weight 900, 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]
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.