509Dots become your logo" particle intro — thousands of scattered dots swirl and lock into your logo, 11 seconds

Make an 11-second vertical logo intro as one self-contained HTML file, and render it to MP4 with sound. It must look like a premium brand opener from a top motion studio: thousands of small glowing dots drift across a dark screen, swirl into a vortex, then sweep clockwise into the exact shape and colors of the logo, which turns into the crisp real logo with a light sweep. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Logo: "【Logo image】" — the user may attach a logo image to this chat. If attached, use it exactly (never redraw or change it). If not attached, use the name in a heavy display font as the logo.
Name: "【Name】"
First line: "【First line】" — words wrapped in *asterisks* are the emphasis words
End line: "【End line】"
End button: "【End button】" — default: the name
Palette: "【Palette】"
  Night = background #0D0E13, text #F2F2EE, accent #E07A2C, cool dots #7C9CFF, dim #8B8E98
  Cream = background #F6F1E8, text #1A1814, accent #E07A2C, cool dots #2F5BFF, dim #8A8378
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).

[Particles — sample the logo]
Draw the logo on an offscreen canvas, read its pixels, and sample them on a grid so there are about 1,500–2,600 dots; each dot keeps the color of its pixel and its exact target position in the logo (logo about 60% of the short side, slightly above center). Every dot's position is a pure function of time: a seeded random start anywhere on screen with a gentle sine drift, then a spiral around the logo center, then an overshoot ease (back-out) into its target. Dots start in text/accent/cool colors and blend into their logo pixel color as they land; landing dots swell briefly.

[Structure — 5 scenes, 4 beats each, the last 6 beats]
1. Drift: dots twinkle and float slowly upward; a small mono label "PARTICLES — name" and the first line type in near the bottom, then fade.
2. Vortex: dots ease from drifting into a ring that spins faster and faster around the logo center; a soft accent glow grows behind it.
3. Assemble: a thin clock hand sweeps clockwise from 12 o'clock and the dots land in that order, so the logo is painted around like a clock.
4. Reveal: the real logo cross-fades in over the dots with a small pop and an expanding ring, a diagonal light sweep passes once across the logo only, then the name assembles letter by letter below (each letter flies in as three pieces that lock together).
5. End: the logo breathes with the music, the end line appears under the name, then a pill button with the end text that a cursor clicks.
A thin progress bar of 5 segments runs along the top.

[Sound]
If you can generate music, make an instrumental at the tempo. If you cannot, write the backing track yourself in code — synthesize an original instrumental sample by sample into a WAV (minor synth night drive: 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 first two scenes and the full band from the moment the dots start to land. 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 (lines) and IBM Plex Mono (label). 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, no particle state carried between frames, randomness only from the seed — so any frame renders identically. A settings panel above the preview (hidden with ?render=1) with English labels: text inputs for every text input, selects for palette, 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 and the logo image, 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: the assembled dots clearly read as the logo before the real logo appears, the logo colors are unchanged, the name and button are never clipped. 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.