462製品紹介モーション広告 — 課題の一文からボタンを押すまで15秒

Make a 15-second vertical product launch ad as one self-contained HTML file and render it to MP4. It must feel like a polished app-store launch video from a top studio: calm, premium, every element moving with purpose. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【名前】" — default Promptpan
Problem line: "【課題の一文】" — words wrapped in *asterisks* are the emphasis word
Solution line: "【解決の一文】" — same *emphasis* rule
Three features (slash-separated): "【機能3つ】"
Two numbers (slash-separated, each "value=label", e.g. 457=公開カード): "【数字2つ】" — if empty, skip the numbers bar and give the extra bar to the features
End button text: "【最後のボタン】" — default: the name
Palette: "【配色】"
  クリーム・オレンジ = paper #F6F1E8, ink #1A1814, accent #F05A2A, second #2F5BFF, highlighter #FFD24A, card #FFFFFF
  白・ブルー = paper #F3F5FA, ink #0F1630, accent #2F5BFF, second #FF5C8A, highlighter #7CE0A0, card #FFFFFF
  夜・ライム = paper #0F1013, ink #F2F2EE, accent #C8F43C, second #7C5CFF, highlighter #FF7A3D, card #1B1D23
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. Problem: the problem line types itself in a heavy sans (Noto Sans JP 900), the emphasis word in a bold serif italic (Nanum Myeongjo 800, slight skew) in the accent color; on a vertical canvas use big type and break into two lines at the space nearest the middle rather than shrinking. A blinking cursor, then a hand-drawn red strike line wobbles across each line, and the whole block tips over and falls off the screen.
2. Solution: the solution line types in, a highlighter swipe paints under the emphasis word, then the line squeezes into a single accent dot.
3. Name: the dot pops into a rounded-square app icon with a starburst mark; the name assembles from its Hangul consonant and vowel pieces (decompose with Unicode arithmetic) flying in from all sides and snapping on the beat; a small grey "無料AIプロンプト"-style sub line fades in; the icon and name shrink up into a small header that stays for the next bars.
4–6. One feature per bar: the feature title rises through a mask with a small monospace number (01, 02, 03); a white card UI floats in with a soft shadow and demonstrates that feature with a real-looking micro-interaction — a cursor clicking into input fields and typing values with check marks, a big pill button pressed with a ripple and a "コピーしました ✓" toast, language chips flipping while the sample sentence slides through Korean, English and Japanese. Invent a fitting demo for whatever features are given; keep it believable, never a fake brand.
7. Numbers: an ink circle floods the screen, both numbers count up from zero and land with a small pop, labels and thin rules draw under them, then a paper circle wipes back.
8. End: the icon pops back with a burst of small colored particles, the name rises through a mask, the solution line types under it, 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]
A thin 8-segment story progress bar along the top (like Instagram stories) fills with time and recolors to stay readable. Subtle film grain. Real motion blur on fast moves (average several sub-frame samples). Overshoot and settle on arrivals. Three typefaces only (Noto Sans KR, Nanum Myeongjo, Black Han Sans stretched 1.3x wide for the name), loaded from Google Fonts. 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: every bar reads at phone size, the problem line is crossed out, each feature demo clearly shows its feature, numbers end on the exact values, nothing is clipped, the last frame shows icon, 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.