623「文字のタイムトラベル」— 同じ名前が筆・金属活字・ピクセル・ネオンに生まれ変わる12秒

Make a short vertical motion piece as one self-contained HTML file and render it to MP4. The idea: one name travels through time. The same word is reborn four times — written with a brush in ink, struck as a gold metal type, assembled from pixel blocks, and lit as a neon sign — and every scene grows out of an object in the scene before it. It must look like a title sequence from a top motion studio: rich materials, real weight, calm and confident. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【名前】" — default Promptpan (2 to 6 characters work best)
Small vertical text: "【縦書きの小さな文字】"
End line: "【最後のひとこと】" — a part wrapped in *asterisks* is the emphasis word
End button text: "【最後のボタン】" — default: the name
Neon color: "【ネオン色】" — ピンク = #FF4FA3, スカイ = #3EC8FF, ライム = #9BFF4A
Tempo: "【テンポ】" — default 120 BPM. Aspect ratio: 出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。 (default 9:16).
Fixed colors: hanji paper #F1EADB, ink #161412, seal red #C8341F, type room #191714, gold #C9A45C, pixel blue #2E6BFF, night #0B0A10.

[Structure — 4 scenes of 6 beats]
1. Brush. Frame 0 is already a finished picture: warm hanji paper with faint fibers, the small text set vertically near the right edge beside a thin red rule, and a small red seal (the name's first character in white inside a white inner border) resting at the lower right. A brush stroke sweeps from left to right and the name appears only where it has passed, with a ragged bristle edge, a slightly blurred ink bleed under the letters and a few dry-brush streaks; small ink droplets spring out at the end. On beat 4 the seal lifts, arcs over and stamps beside the name with a squash and a faint red shockwave. Then darkness floods out of the seal.
2. Metal type. On the dark type-room background the name drops from above as thick gold metal type (stacked darker side layers below, a light top face) and lands on beat 1 of the scene: a short soft flash, a gold shockwave, the camera punches in a little and settles, and for two frames only the image misregisters by a few pixels like a print. A contact shadow sits under it. A single specular highlight sweeps across the letters (only inside the glyphs). A tiny label ("活字") rises from a mask line under it and leaves. Then a blue world opens from the center like an iris (ease the iris by area, not radius).
3. Pixels. On the blue background with a faint dot grid, the name is set in a bold sans (open counters) and sampled into a grid of square cells fine enough that every stroke is at least two cells thick (so no stroke ever breaks); each white cell with a darker blue extrusion flies in from a scattered position on a spring, left to right with small random delays, drawn on twos (12 fps steps) so it feels like a game. The whole word hops once. A small label ("ピクセル") rises and leaves. Then night floods out from the center.
4. Neon. On the black night the name appears first as faint unlit glass tubes, then flickers on (on, off, on, off, on) and stays lit with a gentle hum: a colored outer glow stroke plus a thin near-white core stroke and a soft color bloom on the wall behind. The end line rises letter by letter from a mask line under it, an end button in the neon color springs in, a cursor glides to its arrow and clicks it on the beat, and a ring spreads. Hold with the neon hum still alive.

[Motion rules]
Nothing pops in: every entrance is a spring (closed-form, small overshoot), a mask-line rise or a flood. Moves land on the beat. One slow camera push per scene plus a very slight handheld float, so nothing ever freezes for more than half a second. Flashes ride an attack-and-decay envelope (never a single white frame). Real motion blur on fast moves only, averaged over sub-frame samples centered on the frame time; readable text stays crisp. Each scene change is a hard cut only after a full flood or iris, never a crossfade.

[Always-on details]
No timecode, no progress bar, no corner labels, no HUD. Light film grain. Typefaces: Nanum Myeongjo 800 for the name in every scene (so it is clearly the same name), Noto Sans KR for the end line and button, Noto Sans KR 800 for the pixel sampling, from Google Fonts. Keep a 6% safe margin; the name must never be clipped, at any scale.

[Sound]
If you can generate music, add a cinematic track at the given tempo that changes with each era (a soft plucked string for the brush, a metal hit on the type landing, chiptune for the pixels, a warm synth hum for the neon), 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 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 neon color, 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: frame 0 is a finished picture, each era reads instantly as its material (ink, metal, pixel, neon), the same name is recognizable in all four, the seal really flies and stamps, no single-frame pops, nothing 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]
出力サイズは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.