469「フローチャート」動く手順ガイド — 点がひとつ線をたどり、箱を通りながらフローチャートを描く17秒

Make a 17-second vertical motion graphic that explains a step-by-step flow as one self-contained HTML file, and render it to MP4 with sound. It must look like a premium explainer from a top motion studio: a flow chart that draws itself while one bright dot travels along its lines, with the camera following the dot and pulling back at the end to show the whole chart. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【名前】"
Title: "【タイトル】" — words wrapped in *asterisks* are the emphasis words
Start step: "【スタート】"
Next step: "【次の手順】"
Branch question: "【分かれ道の質問】"
Left answer: "【左の答え】" — default はい. Left result: "【左の結果】"
Right answer: "【右の答え】" — default いいえ. Right result: "【右の結果】"
Final result: "【最後の結果】"
Summary line: "【まとめの一行】" — default: the final result
End button: "【最後のボタン】" — default: the name
Palette: "【配色】"
  リソ = paper #F2EBDD, ink #1E1B3A, pink #FF4FA3, blue #1F6FD0, yellow #FFD400, card #FBF6EC, risograph print texture
  クリーム・オレンジ = paper #F6F1E8, ink #1A1814, accent #F05A2A, blue #2F5BFF, yellow #FFD24A, card #FFFFFF
  夜・ライム = paper #0F1013, ink #F2F2EE, accent #C8F43C, violet #7C5CFF, orange #FF7A3D, card #1B1D23
Backing mood: "【伴奏の雰囲気】" — 明るいポップ = bright major pop, ローファイ = soft swung lo-fi with seventh chords, 夜・シンセ = minor synth night drive
Tempo: "【テンポ】" — default 120 BPM. Aspect ratio: 出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。 (default 9:16).

[The chart — one world, drawn on a dotted grid that scrolls with the camera]
From top to bottom: a dark pill (start) → a white card with an ink border (next step) → a yellow diamond with the question inside → two branches with the answer chips on each side: a blue box on the left, a pink box on the right → both lines join and point into a large final card. Every line is drawn with rounded joins and ends in an arrowhead. Each box has a small step number above its corner (01, 02, 04A, 04B, 05). Text always fits inside its box.

[Structure — 7 scenes, the length of each scene follows the beat]
1. Title: small "HOW IT WORKS" over the title, which types in large; one dot pops in below and bounces on the beat, then the title lifts away and the dot moves to where the start pill will be.
2. Start: the pill grows out of the dot with an overshoot; the next card pops in ahead; the dot leaves the pill and slides down, drawing the line behind it (ease in-out), enters the card and the card pulses. The camera follows the dot the whole time; a title band stays pinned at the top.
3. Question: the diamond appears, the dot reaches it and disappears inside while the question types in.
4. Branch: the answer chips pop in, the dot splits into two — one runs left, one runs right — each drawing its own line into its result box.
5. Final: both dots run down and meet in one line into the final card; on arrival the card border turns to the accent color, a small picture icon pops in beside the result text, and a ring and sunburst spread from it.
6. Overview: the camera pulls back until the whole chart fits under the summary line at the top; then both full routes light up from start to finish in blue and pink with a glowing dot at the head.
7. End: the name assembles letter by letter, a dot drops in as its full stop with a small burst of sparks, the summary line appears under it, then a pill button with the end text that a cursor clicks.
The dot always has a short fading trail and a soft halo; it is only visible on lines, never on top of a box. A thin progress bar of 7 segments runs along the top.

[Sound]
If you can generate music, make an instrumental at the tempo and mood. If you cannot, write the backing track yourself in code — synthesize an original instrumental sample by sample into a WAV (kick on every beat, snare on 2 and 4, eighth-note hi-hats, a bass line on the chord roots, a soft chord pad that ducks on the kick, a light sixteenth-note arpeggio, a short echo), four chords looping, with only pad and hats during the title scene and the full band from the second scene. Never use a placeholder or someone else's recording.

[Build]
One HTML file, everything on a single canvas, fonts Black Han Sans (name), Noto Sans JP 900 (boxes and title) and IBM Plex Mono (small labels). 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; the dot positions and the camera are functions of time only. A settings panel above the preview (hidden with ?render=1) with Japanese labels: text inputs for every text input, selects for palette, mood, 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 with a light motion blur (average a few sub-frames), screenshot the canvas at 1080 px on the short side, pipe into ffmpeg (libx264, yuv420p, crf 18), then mux the audio as AAC into motion.mp4. Close the browser at the end. Accept an optional JSON file argument that overrides CONFIG.

[Check before finishing]
Render, export two frames from every scene into a contact sheet and look at it, and confirm the MP4 has an audio stream with sensible loudness: every box label is readable at phone size and never clipped, lines meet the boxes exactly, the two dots really split and rejoin, and the overview shows the whole chart without touching the edges. 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.