469Flow chart" moving step guide — one dot travels the lines and draws a flow chart box by box, 17 seconds

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: "【Name】"
Title: "【Title】" — words wrapped in *asterisks* are the emphasis words
Start step: "【Start step】"
Next step: "【Next step】"
Branch question: "【Branch question】"
Left answer: "【Left answer】" — default Yes. Left result: "【Left result】"
Right answer: "【Right answer】" — default No. Right result: "【Right result】"
Final result: "【Final result】"
Summary line: "【Summary line】" — default: the final result
End button: "【End button】" — default: the name
Palette: "【Palette】"
  Riso = paper #F2EBDD, ink #1E1B3A, pink #FF4FA3, blue #1F6FD0, yellow #FFD400, card #FBF6EC, risograph print texture
  Cream · orange = paper #F6F1E8, ink #1A1814, accent #F05A2A, blue #2F5BFF, yellow #FFD24A, card #FFFFFF
  Night · lime = paper #0F1013, ink #F2F2EE, accent #C8F43C, violet #7C5CFF, orange #FF7A3D, card #1B1D23
Backing mood: "【Backing mood】" — Bright pop = bright major pop, Lo-fi = soft swung lo-fi with seventh chords, Night · synth = minor synth night drive
Tempo: "【Tempo】" — default 120 BPM. Aspect ratio: Output size 1080x1920 pixels, 9:16 portrait story. Keep all text inside the central 80% of the height. (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 KR 900 (boxes and title, it also covers Latin) 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 English labels: text inputs for every text input, selects for palette, mood, tempo and ratio, play/pause, a scrubber, and a "Copy settings" 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]
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.