622「모양 하나가 끝까지」 UI 변신 루프 — 단추가 로딩, 입력창, 결과 카드, 알림으로 변했다 다시 단추가 되는 12초

Make a short vertical UI motion loop as one self-contained HTML file and render it to MP4. The idea: one shape, never cut. A single black pill button morphs, without any cut or fade, into a loading circle, a check, a text input that types itself, a big result card with tabs, a toast notification, and finally back into the same pill button, so the last frame is the first frame and the video loops forever. A cursor causes every change with real clicks. It must look like a Dribbble-level product motion piece from a top studio, calm and precise. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【이름】" — default 프롬프트판
Button text: "【단추 글자】"
Typed request: "【입력 문장】"
Result title: "【결과 제목】"
Result line: "【결과 한 줄】"
Three tabs (slash-separated): "【탭 3개】" — default 이미지 / 모션 / 음악
Toast text: "【알림 문구】"
Accent: "【강조색】"
  오렌지 = canvas #ECEAE5, ink #111111, card #FFFFFF, accents #FF5A1F, #2E6BFF, #1FB57A
  블루 = canvas #E9ECF1, ink #0F1115, card #FFFFFF, accents #2E6BFF, #FF5A1F, #E8A800
  보라 = canvas #ECE9F1, ink #121016, card #FFFFFF, accents #7C4DFF, #FF4F8B, #14A898
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 one shape]
Draw the hero as ONE rounded rectangle whose width, height, corner radius, vertical position and darkness are each a chain of closed-form spring step responses (damping about 0.74, a tiny overshoot of 2 to 4 percent, never bouncy). When a value changes target several times, add one spring per change so every frame is a pure function of time. It casts two soft shadows that grow with its height. Everything inside it is clipped to it. Content enters only after the shape has started changing and leaves before the next change, so text never overlaps.

[Timeline in beats — 24 beats, 5 scenes of 4, 6, 6, 4, 4 beats]
Beat 0: the frame is already a finished picture — the black pill with the button text, centered on the warm canvas, the cursor resting at the lower right.
Beat 2: the cursor clicks the pill (it shrinks slightly while pressed, a thin accent ripple spreads from the click). The pill springs into a black circle, a white loading arc spins inside it, then an accent check draws itself stroke by stroke.
Beat 4: the circle stretches into a wide white input bar. A small accent star sits at the left; the request types itself in with a real keystroke rhythm (computed from the frame time, never from motion-blur sub-samples); the caret blinks only when typing stops. At beat 9 a round accent send button with an up arrow springs in at the right end, the cursor travels to it (aiming at where it will be) and clicks it on beat 10.
Beat 10: the input bar grows into a tall white result card. Inside: a large image panel, still a neutral charcoal, with a soft white halftone dot field, the result title rising letter by letter from behind a mask line in a heavy display face, the result line rising under the panel, and a row of three tabs with none selected yet.
Beats 15, 16.5 and 18: the cursor visits the first, second and third tab in order. Each move follows a fixed path that leaves fast, lands softly with a slight arc, pauses a moment, then clicks — never a jittery spring chase. On the first click a black indicator pill pops in under that tab and a small chip with the tab name springs in on the panel; on the next clicks the indicator's leading edge rides a faster spring than its trailing edge, so it stretches toward the new tab and then catches up. Every click opens that tab's accent color like an iris from the clicked tab inside the image panel (ease the iris by area, not radius), and the chip label rolls vertically to the new tab name.
Beat 20: the card shrinks into a black toast with an accent check circle and the toast text.
Beat 22: the toast springs back into the original pill; the button text returns. The cursor glides home to the exact starting position so the loop has no jump.

[Camera]
One camera transform over the whole scene: zoom so each state fills the frame (about 1.2 on the small button, 1.03 on the input, 1.0 on the card, 1.2 on the toast) with eased segments and zoom interpolated in log space; never zoom in and immediately back out. Add a very slight handheld float that fades to zero at the start and end, so the first and last frames match exactly. The camera always keeps moving a little; no part of the video freezes for more than half a second.

[Always-on details]
No timecode, no progress bar, no corner labels, no HUD. Real motion blur on fast moves only (average several sub-frame samples centered on the frame time); text stays crisp. Light film grain. Typefaces: Noto Sans KR for UI and Black Han Sans stretched 1.3x wide for the result title, from Google Fonts. Keep everything inside a 6% safe margin and make every readable line large enough for a phone.

[Sound]
If you can generate music, add a light, bright pop track at the given tempo with soft UI clicks on every click, a pop on the check and a whoosh on the card, muxed into the MP4 as AAC. 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 in any order. A settings panel above the preview (hidden with ?render=1) with Korean labels: text inputs for every text input, selects for accent, 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, 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 look at it: the shape is never replaced or cut, text never overlaps during a morph, every click visibly causes the next state, the indicator stretches ahead, nothing is clipped, and the first and last frames are identical (compare them pixel by pixel). 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.