609「意味どおりに動く文字」キネティック — 伸びて、弾んで、回って、叩きつける5つの言葉、16秒

Make a short vertical kinetic-typography video as one self-contained HTML file and render it to MP4. The idea: five words, and each word moves the way it means — a word for stretching stretches, a word for a tap bounces, a word for spinning spins, a word for a thud slams down and shakes the screen, a word for melting away dissolves into its letter pieces. It must look like a playful type film from a top motion studio: one huge word per screen, bold flat colors, every move landing on the beat. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【名前】" — default Promptpan
Opening line: "【最初のひとこと】" — a part wrapped in *asterisks* is the emphasis word
Five words (slash-separated): "【動かす言葉5つ】" — if fewer than five, repeat them in order
End line: "【最後のひとこと】" — same *emphasis* rule
End button text: "【最後のボタン】" — default: the name
Palette: "【配色】"
  Pop = paper #FFF6E5, ink #1A1A1A, colors #FFC93C · #2E6BFF · #FF5A36 · #21C08B
  Night = paper #111216, ink #F4F2EC, colors #FFD23F · #5B8CFF · #FF5A8A · #3EE0A5
  Mint = paper #EAF7F1, ink #10241C, colors #FFCF3A · #1E7A5C · #FF6B4A · #4A7BFF
Tempo: "【テンポ】" — default 120 BPM. Aspect ratio: 出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。 (default 9:16).

[Choose each word's motion from its meaning]
Read each word and pick the motion that matches it: stretching words (のびる、ぐーん、ひっぱる…) = stretch; tapping or hopping words (ぽん、ぴょん、ぽよん…) = bounce; turning words (くるっ、ぐるぐる、まわる…) = spin; impact words (どーん、ばーん、どすん…) = slam; fading words (さらさら、とける、きえる…) = dissolve; trembling words (ぶるぶる、ゆらゆら、がたがた…) = shake; anything else = wave.
- stretch: the word pulls out sideways to about twice its width with an elastic overshoot while getting a little shorter, then snaps back; two thin arrow marks stay just outside its ends.
- bounce: the word drops from above the screen and bounces to rest with a squash on landing and a soft shadow, then each letter hops once in turn.
- spin: each letter spins one full turn in turn with an overshoot; two arcs circle around the word.
- slam: the word falls from three times its size and hits on the beat; the screen shakes and settles, a ring and a starburst burst from the impact.
- dissolve: the word holds, then breaks into its own letter pieces (split each letter into its strokes), which drift up, turn and fade one by one.
- shake: the letters tremble fast and settle.
- wave: the letters ride a gentle wave.

[Structure — 7 scenes]
Give each scene its own length in beats: the opening at least 4 beats or the Korean reading time (0.9 s + 1 s per 7 characters) rounded up to an even number of beats; each word scene 4 beats; the end 6 beats.
1. Opening: on the paper color, a tiny monospace caption, then the opening line types in a heavy Korean sans (Noto Sans KR 900) with the emphasis word in a bold serif italic (Nanum Myeongjo 800, slight skew) in the first color; five colored dots pop in one by one (one per word); fade into the first word's color.
2–6. One word per scene: the background is a solid color from the palette (a different one each time), the word is as big as fits in a 1.3x-wide heavy display face (Black Han Sans) in whichever of ink or paper reads best on it, a small "01 / 05" counter on top and the motion's English name (STRETCH, BOUNCE…) small at the bottom; a short flash on the first beat.
7. End: the name assembles from three cut pieces of each real glyph flying in and locking together, the five colored dots pop in a row above it, the end line types under it, a dark end button grows in, a cursor clicks it on the beat and a ring spreads. Hold the final frame.

[Always-on details]
A thin 7-segment story progress bar along the top fills with time and stays readable on every color. Real motion blur on fast moves (average several sub-frame samples). Light film grain. Three typefaces only (Noto Sans KR, Nanum Myeongjo, Black Han Sans stretched 1.3x wide), loaded from Google Fonts. Keep a 6% safe margin; never clip a letter even at the widest stretch or the biggest slam frame.

[Sound]
If you can generate music, add a bright pop backing track at the given tempo whose accents land on each word's main move, and mux it 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, with the drums entering at the first word, 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 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. A settings panel above the preview (hidden with ?render=1) with Japanese labels: text inputs for every text input, selects for palette, 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, export frames at the start, middle and end of every word scene into a contact sheet and look at it: each word's motion clearly matches its meaning, no letter is ever clipped (check the widest stretch and the slam), the dissolve pieces really come from the word's own letters, the counter and labels are readable at phone size. 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]
出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。
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.