すべて · モーショングラフィック · 使い方説明
628「通知3回で完了」— ロック画面に通知が積み重なり、タップした通知がそのまま開いて詳細画面になる11秒
通知の文を3行入れると、スマホが震えながらロック画面に通知が積み重なり、いちばん上の通知をタップするとその箱がそのまま詳細画面に広がる縦長MP4ができます。
受け取れるもの
- 4シーンの縦長MP4(120 BPMで11秒、60fps、コードで作った伴奏つき)
- 通知の文・時刻・タイトル・壁紙・テンポを変えられる設定欄つきHTML
- コマンド1行で新しいMP4を作るレンダースクリプト
Claudeで生成
- Claude Opus 5.5 このAIで作りました
項目を入力
- 1項目を入力します
- 2プロンプトをコピーします
- 3コードを実行できるAI(Claude Opus 5.5・GPT-6 Astra・Gemini Argon)に貼り付けます
- 4AIがHTMLを作って自分でレンダリングし、MP4ができます
- 5直すときはHTML上部の設定欄を変えて、レンダーのコマンドを1行 再依頼なし
プロンプト全文を見る 6,049文字
Make a short vertical phone-motion video as one self-contained HTML file and render it to MP4. The idea: three notifications tell the whole story. On a phone lock screen, three notifications arrive one after another and stack up, the phone buzzing each time; then a finger taps the newest one and that very notification box grows into the full app screen. It must look like a premium app launch film — real-feeling phone, soft glass, calm springs. Do the whole job now without asking questions. [Inputs (use the default when empty)] App or shop name: "【アプリ・お店の名前】" — default Promptpan (its first character goes on the app icon) Lock-screen time: "【ロック画面の時刻】" · Date line: "【日付】" Notification 1: "【通知1】" · Notification 2: "【通知2】" · Notification 3: "【通知3】" Opened screen title: "【開いた画面のタイトル】" · Opened screen button: "【開いた画面のボタン】" End line: "【最後のひとこと】" — a part wrapped in *asterisks* is the emphasis word · End address: "【最後のアドレス】" Wallpaper: "【壁紙】" 夕焼け = gradient #FFB199 to #FF6A88 with soft #FFD3A5 blobs, accent #FF5A5F 夜明け = gradient #7F8CFF to #764BA2 with soft #B8C6FF blobs, accent #5B6CFF 森 = gradient #5EE6A0 to #0EA5A0 with soft #C2F5D8 blobs, accent #10B981 Tempo: "【テンポ】" — default 120 BPM. Aspect ratio: 出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。 (default 9:16). [The phone] A modern phone with a thin black bezel, large rounded corners, a soft drop shadow on a warm off-white room background and a faint rim highlight. The lock screen: the wallpaper gradient with large blurred blobs drifting slowly, a status bar with the time and a black pill-shaped island, the date and a big clock. Each notification is a white frosted rounded box with a soft shadow, the app icon (accent rounded square with the name's first character), the app name and "今" small and gray, and the message in bold. [Structure — 22 beats in 4 scenes of 4, 8, 6, 4 beats] 1. Lock screen (beats 0–4). Frame 0 is already a finished picture: the phone with its lock screen, centered. On beat 1.5 the phone buzzes (a short sideways shake that dies out) and notification 1 drops in from above on a spring, with a soft white ripple. 2. Stack (beats 4–12). On beat 5.5 notification 2 arrives on top and pushes the first one down; on beat 9 notification 3 arrives on top and pushes both down — every push is a spring, every arrival a buzz. The camera slowly moves closer to the stack. 3. Open (beats 12–18). A finger cursor glides in and taps the top notification on beat 13. That box grows in place into the full screen (its rounded rectangle interpolates to the screen's) and the app screen appears inside: the icon and name at the top, a large image panel in the wallpaper-to-accent gradient with a soft halftone, the screen title rising from a mask line on it, three text bars springing out under it, and a wide accent button at the bottom. The finger taps the button on beat 16.2 (the button presses in, a ring spreads) and leaves. 4. End (beats 18–22). The camera pulls back so the whole phone sits in the upper part of the frame, and the end line types in large under it, with the address rising under that. [Motion rules] Nothing pops in: closed-form springs with a small overshoot, mask-line rises and the shape growth only. The tapped notification must visibly become the screen — never cut or crossfade to it. One slow camera move per scene plus a very slight handheld float, so nothing freezes for more than half a second. Real motion blur on fast moves only (sub-frame samples centered on the frame time); text stays crisp. [Always-on details] No timecode, no progress bar, no corner labels, no HUD outside the phone. Light film grain. Typeface: Noto Sans KR for everything, a monospace for the address, from Google Fonts. Keep a 6% safe margin; long messages shrink to fit their box, never clip. [Sound] If you can generate music, add a light, modern track at the given tempo with a soft notification chime and a buzz on each arrival, a tap click, and a whoosh when the screen opens, 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 wallpaper, 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, the three notifications arrive in order with the newest on top, each arrival buzzes, the tapped box itself grows into the screen, every message is readable, 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] 出力サイズは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.
結果はどうでしたか?
使い方・よくある質問
通知3つで見せる利用の流れ — 11秒
通知の文を3行入れると、スマホがブルッと震えてロック画面に通知が一つずつ落ちて積み重なります(新しい通知が上、前のものは下へ押されます)。指がいちばん上の通知をタップすると、その箱がそのまま広がってアプリ画面になり、ボタンまで押します。予約 → 確定 → 来店、注文 → 制作 → 受け取りのように「お客さんが受け取る通知」で使い方を見せたいときに。
コードを実行できるAIに貼り付けます
画像AIではなく、コードを書いて実行できるAIに貼り付けるプロンプトです。Claude Opus 5.5は映像と一緒に、コードで作った伴奏(歌なしのシンプルな音楽)まで入れてくれます。音楽モデルがなくても音をコードで計算して作るので、外部サービス・アカウント・費用はかかりません。AIがHTMLを作り、自分でレンダリングしてMP4まで残します。上の例はClaude Opus 5.5で作った映像です。外部サービスの料金と規約は各サービスでご確認ください。
入力のコツ
通知3行は実際の順番どおりに、1行20文字以内だと大きく見えます。アプリのアイコンには名前の最初の文字が入ります。実際に送らない通知・ない機能は書かないでください。
直すときは聞き直しません
HTML上部の設定欄で通知の文・時刻・タイトル・壁紙・テンポを変えてすぐプレビューし、「設定をコピー」してレンダーコマンド1行で新しい動画ができます。

