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: Output size 1080x1920 pixels, 9:16 portrait story. Keep all text inside the central 80% of the height: compress every zone percentage below into the 10-90% range. (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) 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 Korean 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]
Output size 1080x1920 pixels, 9:16 portrait story. Keep all text inside the central 80% of the height: compress every zone percentage below into the 10-90% range.
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.