4643ステップ使い方モーション — スマホ画面から完成まで15秒

Make a 15-second vertical "how it works in 3 steps" explainer as one self-contained HTML file and render it to MP4. It should feel like the onboarding video of a well-designed app: clear, friendly, every step demonstrated on screen, never a slideshow. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【名前】" — default Promptpan
Title: "【タイトル】" — default *3ステップ*で終わる使い方. Words in *asterisks* are the emphasis word.
Three steps (slash-separated, each "label=time", e.g. 項目入力=10秒): "【ステップ3つ】"
Result line: "【結果の一文】" — default *完成品*ができました
One-liner: "【ひとこと】" — default *誰でも*できます。
End button: "【最後のボタン】" — default: the name
Palette: "【配色】"
  ミント・ネイビー = paper #EEF5F2, ink #13233A, accent #14B88A, second #FF6B4A, third #FFD54A, card #FFFFFF
  紙・墨 = paper #F4EFE4, ink #1C1A17, accent #D9452B, second #2B4C9B, third #E9B949, card #FFFDF8
  夜・パープル = paper #111018, ink #F1EFF8, accent #9B7CFF, second #FF6FAE, third #7DF0C8, card #1D1B27
Tempo: "【テンポ】" — default 128 BPM. Aspect ratio: 出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。 (default 9:16).

[Structure — 8 bars of 4 beats, one idea per bar, every move on a beat]
1. Title: a huge serif-italic "3" (or the number of steps) pops in with overshoot, the title types underneath in Noto Sans KR 900 with the emphasis word in Nanum Myeongjo 800 italic in the accent color, both lift up and a 3-dot stepper fades in at the top.
2–4. One step per bar. A stepper stays at the top all the time: three numbered dots on a line, the line fills as time passes, the current dot grows, finished dots turn into ✓, labels under the dots. The step label rises through a mask with a small monospace number. Each step is demonstrated on a believable device: a phone frame where a cursor clicks into fields and values type in with check marks; a big pill button pressed with a ripple and a small "copied" chip that flies out in an arc; a generic AI chat window (no brand) sliding in where the chip flies into the input box, turns into text lines, the send button is pressed, the user bubble pops up and typing dots appear. Invent a fitting demo for whatever steps are given.
5. Result: a reply bubble grows with the finished result inside (draw a simple bold poster, chart or image made of shapes and the user's values — never a real brand), a burst of small particles, a ✓ badge, and the result line rises above it.
6. Recap: the three steps as a vertical checklist with ✓ circles and monospace time chips, a rule draws under them and the total time counts up big in the accent color with a small pop.
7. One-liner: an ink circle floods the screen and the one-liner drops in word by word with a bounce, the emphasis word in the serif italic in the third color; a paper circle wipes back.
8. End: the name rises through a mask in Black Han Sans stretched 1.3x wide, the steps type under it as "step → step → step", the end button grows in with a soft colored shadow, a cursor clicks it and a ripple spreads. Hold the final frame.

[Always-on details]
Subtle film grain, real motion blur on fast moves (average several sub-frame samples), overshoot and settle on arrivals, soft shadows on cards and devices. Three typefaces only (Noto Sans KR, Nanum Myeongjo, Black Han Sans), loaded from Google Fonts. On a vertical canvas use big type; break long lines at the space nearest the middle instead of shrinking. 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 beats and chapter changes, 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 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, export one frame from the middle of every bar into a contact sheet and look at it: the stepper shows the right step in every bar, each step is clearly demonstrated, the total equals the sum of the step times, nothing is clipped, the last frame shows name and button. 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.