467「今日のイベント」動く縦型ポスター — 読めるイベントポスターのまま、リボン・帯・行だけが動く13秒

Make a 13-second vertical event poster that moves, as one self-contained HTML file, and render it to MP4. It must read as a finished printed poster at every moment — title and date stay put and legible — while only the decorations move: thick pastel ribbons that keep wriggling, a date band that slides in, lines that rise one by one, a badge, and one color change like a second print run. The last frame must work as a still poster on its own. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Shop name: "【店名】"
Event name (the big title): "【イベント名】"
Date: "【日付】"
Time and place: "【時間・場所】"
Up to six content items (slash-separated): "【内容（6つまで）】" — show them two per line joined with a middle dot
Benefit line: "【特典の一行】" — words wrapped in *asterisks* are the emphasis word; if empty, skip it
Badge word: "【バッジのひとこと】" — one short word printed on a star badge; if empty, use a plain star
Photos: "【写真】" — the user may attach photos to this chat: the first is the shop or venue, the next up to three are the items in the order listed. If photos are attached, copy them next to the HTML (img/1.jpg, img/2.jpg …) and use the photo layout below; if none, use the text-only layout.
End button: "【最後のボタン】" — default: the shop name
Palette: "【配色】"
  ラベンダー = paper #E9DDF5, ink #2A1B5C, ribbon A #7B5CFF, ribbon B / badge #FF8A5C, highlighter #FF9EC7, card #F7F1FC
  リソ = paper #F2EBDD, ink #1E1B3A, ribbon A #FF4FA3, ribbon B / badge #1F6FD0, highlighter #FFD400, card #FBF6EC
  ナイト・ネオン = paper #121318, ink #F4F1EA, ribbon A #C8F43C, ribbon B / badge #FF5CA8, highlighter #5CC8FF, card #1D1F26
Texture: "【質感】" — リソ = misregistered plates, halftone dots and heavy paper grain; なし = clean with light film grain
Tempo: "【テンポ】" — default 120 BPM. Aspect ratio: 出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。 (default 9:16).

[Layout — stack from the top so nothing ever overlaps]
A date band near the top (two thin colored rules, a light card strip with the date in a heavy Japanese sans, one more rule). Below it the event name as the hero in Dela Gothic One stretched 1.3x wide, as large as fits 86% of the width, split into two lines at the most balanced space when it is too long. Under the title the time and place, then the shop name small and grey. Then the content lines. Then a gap holding the lower ribbon. Then the benefit line, with a star badge just above its right end. The end button at the bottom inside a 6% safe margin. Compute every position from the one above it.
Photo layout (when photos are attached): keep the title on one line if it still fits at 10% of the short side, then the shop photo in a white-bordered rounded frame tilted -1°, as tall as the leftover space allows (12–32% of the height), cropped toward its top so a sign stays visible; then time and place; then the item photos as square white-bordered cards in one row, alternately tilted a few degrees, each with its item name under it; then the remaining items as text lines; then benefit and end button. Never stretch a photo — cover-fit and crop.

[Structure — 6 scenes; the content scene gets one beat per line plus 2, the end scene 6 beats, others 4]
1. Title: two thick round-capped ribbons draw themselves on (one loops behind the title in ribbon A at about 40% opacity, one waves across the gap in ribbon B) and never stop wriggling from then on; the title letters drop from above one after another with a bounce; the date band slides in from the left.
2. Info: the shop photo opens upward from a mask and settles from 120% zoom, then keeps zooming in very slowly until the end (Ken Burns); the time and place type in, a small dot appears in front of it like a map pin, the shop name fades in (text-only layout).
3. Content: one per beat — item photo cards pop in with an overshoot (each photo also zooming in slowly afterwards), then remaining lines rise through a mask.
4. Benefit: the line types in, a highlighter swipes under the emphasis words (keep the emphasis in ink, never colored text on the highlighter), and the pin dot travels across the poster and morphs into the star badge on the beat with the badge word in white on it.
5. Second print: three flat color bars (ribbon A, highlighter, ribbon B) sweep up from the bottom and the whole poster below them reappears with ribbon A and B swapped and the paper tinted toward the highlighter color; the badge recolors to match.
6. End: the dark end button grows in under the benefit, a cursor clicks it and a ring spreads. Hold the final frame — it is the complete poster.

[The travelling dot]
The pin dot and the star badge are the same object. Compute its state from time alone with keyframes; to morph between a circle and a star, sample both outlines at the same 96 angles from the top and interpolate point by point.

[Always-on details]
Real motion blur on fast moves (average several sub-frame samples). Overshoot and settle on arrivals. Three typefaces only (Noto Sans JP, Noto Serif JP, Dela Gothic One), loaded from Google Fonts. Never clip a Japanese character. Only flat palette colors — no gradients, no glows.

[Sound]
If you can generate music, add a light background track at the given tempo whose accents land on the letter drops, line entrances and the color sweep, 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 where the video's main section starts, 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, texture, 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. Also save the final frame as poster.png.

[Check before finishing]
Render, export the middle of every scene and the final frame into a contact sheet and look at it: title and date readable in every frame, no two text blocks overlap, photos are never stretched and the shop sign is visible, the color sweep reaches the very bottom, the badge word sits inside the star, the button text fits inside the button, 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.