627Endless zoom" — fly into the small screen inside the screen, a new word at every level, and back to the start, a 10-second loop

Make a short vertical endless-zoom loop as one self-contained HTML file and render it to MP4. The idea: every screen contains a smaller copy of the screen, and the camera keeps flying into it forever. Each level has its own color and its own word, and after the last word the zoom arrives back at the very first screen, so the video loops with no seam at all. It must feel hypnotic and calm, like a Droste-effect title from a top motion studio. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【Name】" — default Promptpan
Words, one per level (slash-separated, 3 to 6): "【Words per level】"
Small line under every word: "【Small line】"
Palette: "【Palette】" — one background color per level, cycling
  Candy = #FF6B8B, #FFC94D, #5EC8FF, #8E7CFF, #3FD4A0 with dark ink #1B1530
  Sea = #0E7C86, #2BB3C0, #F2C14E, #145DA0, #F28F6B with dark ink #0D2233
  Mono = #111111, #F2F1EE, #2A2A2A, #D8D6D0, #FF4A1C with ink #111111
Tempo: "【Tempo】" — default 120 BPM; one level lasts 4 beats. Aspect ratio: Output size 1080x1920 pixels, 9:16 portrait story. Keep all text inside the central 80% of the height. (default 9:16).

[One level]
A full-screen background in the level's color with a few very faint concentric rings around the zoom point. The level's word in a huge heavy display face in the upper part (white or dark ink, whichever reads on that color), a small counter like "1 / 5" above it and the small line under it. Below, a rounded "screen" a third of the size of the frame (same aspect ratio) with a soft shadow and a thin white border — and inside it, the next level drawn exactly the same way at that scale, and inside that the next, four levels deep.

[The zoom math — this is what makes it seamless]
The next level sits inside the inner screen: x_level = ix + (x_next − W/2)·q (q = inner scale, ix and iy = inner screen center). Zoom toward the fixed point of that similarity, X* = (ix − q·W/2) / (1 − q) and the same for y, by a factor of (1/q)^f with f going from 0 to 1 over each level; at f = 1 the next level exactly fills the frame, so switch to it with f = 0 and nothing jumps. While f approaches 1, fade out the outermost inner screen's border, shadow and corner radius, so no edge or corner is left on screen at the switch. Ease f inside each level a little (fast in the middle, slower at the ends) but mix it with linear time so the zoom never stops. After the last word the next level is the first word again; the end of the video is exactly the start.

[Always-on details]
No timecode, no progress bar, no corner labels, no HUD. Light film grain. Typefaces: Black Han Sans stretched 1.3× wide for the words, Noto Sans KR for the small line, a monospace for the counter, from Google Fonts. Keep a 6% safe margin; each word must be fully readable at the start of its level. Real motion blur from sub-frame samples centered on the frame time.

[Sound]
If you can generate music, add a dreamy lo-fi loop at the given tempo with a soft riser into each new level, muxed into the MP4 as AAC, looping seamlessly with the picture. 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, 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, a seed and loop true. 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 English labels: a text input for the words (slash-separated) and the small line, 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, step seek(frame / 60) through every frame of [0, duration) without repeating the end 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 one still per beat into a contact sheet and compare the frame at time 0 with the frame at the full duration pixel by pixel — they must match. Check that no border or corner flashes at the level switches, every word is readable, and nothing is 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.