Claude Video Prompts
for Opus 5.5 Motion Graphics

Make a 20-second launch video for the product in this project.

BRIEF (fill in, or delete a line to let Claude decide)
- Focus: {whole product | one feature | what's new in this version}
- Tone: {polished | playful | deadpan | cinematic}
- Format: {1920x1080 landscape | 1080x1920 vertical}, 30fps
- Music: {path/to/track.mp3, N BPM, first beat at S seconds | none}

1. STUDY
Read the main page, styles, README and key components. Note the exact brand colors, fonts and real copy. Find 2–3 moments of the product in use (entry → key action → result). These become the highlights.

2. PLAN (write plan.md before any code)
- Hook, 0–2s: the most surprising TRUE thing about this product. Decide it first.
- Reveal, 2–5s: the name and a one-line promise in the product's own words.
- Highlights, 5–17s: real UI doing its job (typing, clicking, a result appearing). Never a slide that only describes.
- Outro, 17–20s: name plus URL or install command, held still.
- A scene table with start and end times. With music, snap every internal boundary to the nearest beat (beat k = S + k x 60/BPM). The total stays exactly 20s; the outro absorbs the difference.
- For every on-screen line: its word count and settled hold. Any hold under 0.3s per word (minimum 1s) fails the plan.
- One dominant travel direction for every scene change, and at most 3 transition types in the whole film.

3. MOTION
- Each scene exits in the direction the next one enters. Cut while the outgoing scene is still moving; the next enters on that same frame, already moving (no gap, no overlap). No crossfades, no fades to black.
- Entrances under 0.8s, exits about 75% of that, group staggers under 0.5s in total. Ease-out in, ease-in out. A slight overshoot is fine; bounce and elastic are not.
- No idle floating or pulsing to fill time. Spare seconds get a beat: a count ticks, a cursor clicks, a card files away.
- Hold 0.3–0.75s of stillness right before the biggest reveal.

4. TEXT AND COLOR
- Overlay text: nothing smaller than 40px at 1080p. Real UI: scale it up or crop tight so its key text reads at 32px or more.
- Settled text stays 5% in from every edge; on vertical it also stays out of the bottom 20% and right 12%, where platforms put their buttons. Motion may pass through those zones.
- Only the project's colors. No new gradients or glows.
- Only claims found in the project. No invented numbers, logos or testimonials. Banned words: streamline, seamless, revolutionize, supercharge, unlock.

5. BUILD
- First confirm ffmpeg and Playwright exist. Install Playwright if missing (it can drive an installed Chrome with channel "chrome" instead of downloading Chromium). If ffmpeg is missing, stop and tell me how to install it.
- Reuse the project's real components, CSS, fonts and images. Rebuild only what you can't import.
- If the project already uses Remotion or HyperFrames (remotion in package.json, or a hyperframes.json), use it and its own render command. Otherwise add a hidden /video route that sets window.DURATION and exposes async window.seek(t). GSAP is fine as one paused timeline that seek(t) drives.
- Every frame is a pure function of t. Banned: Date.now(), requestAnimationFrame loops, timers, CSS transitions and @keyframes, playing videos or GIFs, unseeded Math.random(). On the video route add *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important} and drive hover and pressed states from t.

6. CHECK, THEN RENDER
- Export a still from the middle of every scene and from the frames either side of every cut. Fix overflow, collisions, low contrast and anything outside the margins.
- HTML path: serve the folder over a local http server (Chrome blocks fonts on file:// URLs). Playwright viewport at the exact format, deviceScaleFactor 1. Before capturing, run await Promise.all([...document.fonts].map(f => f.load())), then await document.fonts.ready. Set img.loading = "eager" on every image, then await img.decode() on each, catching failures (a lazy image offscreen never loads, so decode() would wait forever). Capture frame i at t = i/30 for i = 0 to 599.
- Pick the strongest settled frame. HTML path: copy its PNG over frames/00000.png before encoding (replace it, don't add a frame), and save it as poster.jpg.
- HTML path encode: ffmpeg -framerate 30 -i frames/%05d.png -c:v libx264 -pix_fmt yuv420p -crf 18 -movflags +faststart video.mp4
- Music (if none, rename video.mp4 to launch.mp4): add it in a second pass without re-encoding the video: ffmpeg -i video.mp4 -i TRACK -map 0:v -map 1:a -c:v copy -c:a aac -b:a 192k -af "apad,atrim=0:20,afade=t=out:st=19:d=1" -movflags +faststart launch.mp4
- Confirm with ffprobe that the video has exactly 600 frames at 30fps.

DELIVER: launch.mp4, poster.jpg, plan.md, and a 1–2 sentence post caption in the product's own voice.

Make a {12}-second kinetic typography video where the words are the whole show.

BRIEF (fill in, or delete a line to let Claude decide)
- Text: "{your line, quote or lyric}" (allow 0.6–0.7s of video per word, so 12s fits about 18 words)
- Mood: {confident | tense | joyful | calm}
- Palette: background {#hex}, text {#hex}, one accent {#hex}
- Font: {e.g. Instrument Serif} as a .woff2 file in ./fonts, or download the open-licence file there
- Format: {1080x1920 vertical | 1920x1080 landscape}, 30fps. On vertical, a long hero word (8+ letters) forces all the type smaller; choose landscape or a shorter hero word if you want it big.
- Music: {path/to/track.mp3, N BPM, first beat at S seconds | none}

PLAN (write plan.md before any code; sizes are targets until you measure them in code, then update the plan)
- Split the text into phrases of 1–4 words. The hero is the most important word in the final phrase: it lands last and holds to the final frame.
- Mood sets the pace. Confident: quick snaps, firm landings. Tense: short, sharp moves. Joyful: lighter, with a slight overshoot. Calm: slower eases, longer holds.
- Give each phrase a treatment chosen for its meaning, inside the one travel direction: a fast word snaps in, a heavy word lands on a slower ease, a quiet word sits smaller in empty space.
- A table in whole frames (1/30s): phrase, word count, enter (first visible frame), settled, exit start, cut. Hold (settled to exit start) is at least 0.3s per word and never under 0.8s. If the text is short for the duration, lengthen the holds and the hero's final hold; never add words.
- With music, every phrase settles on a beat (beat k = S + k x 60/BPM). Without, each phrase enters on the frame the previous one is cut.
- One dominant travel direction for the whole piece. Break it once, for the hero: the phrase before it exits fully off frame in the hero's direction, the frame sits empty and still (one beat with music, 0.5s without), then the hero enters that way. This is the film's only pause.

TYPE
- Words only: no labels, counters, logos or captions beyond the text itself.
- The safe area is 5% in from every edge; on vertical, it ends 12% in from the right and 20% up from the bottom instead. Measure text by its ink bounds with the loaded font. Settled text stays inside it; motion may pass outside.
- Size the hero first: it fills 80–95% of the safe width. Then set every other phrase as large as it can be, capped at two-thirds of the hero's size (compare the font's cap height, even for lowercase words), so the hero leads by at least 1.5x. A quiet word may go smaller on purpose.
- Stack to stay big: break a multi-word phrase across lines, one or two words per line, rather than shrink it.
- Don't park every phrase in the same spot. Move the resting position between phrases so the frame keeps changing.
- Letters in a word share one easing curve. If they stagger, use at most one frame per letter and move each letter no further than the font's x-height, so a word never looks letter-spaced mid-motion.
- The accent color appears only on the hero word. No gradients, glows or drop shadows on text.

MOTION
- A cut is the single frame where the outgoing phrase vanishes, about halfway through its exit and still moving; on that same frame the next phrase appears a few frames into its entrance. No gap and no overlap, except the one pause before the hero. No crossfades.
- Phrases exit in the direction the next enters. At most 3 transition types; a type is a distinct way of entering or exiting (a snap, a drop, a letter rise), not a change of speed or ease.
- Entrances under 0.8s, exits about 75% of that. Ease-out in, ease-in out. No bounce or elastic.
- No idle floating, breathing or wobble between phrases.

BUILD
- First confirm ffmpeg and Playwright exist. Install Playwright if missing (it can drive an installed Chrome with channel "chrome" instead of downloading Chromium). If ffmpeg is missing, stop and tell me how to install it.
- If the project already uses Remotion or HyperFrames (remotion in package.json, or a hyperframes.json), use it and its own render command. Otherwise write one HTML file that sets window.DURATION and exposes async window.seek(t). GSAP is fine as one paused timeline that seek(t) drives.
- Every frame is a pure function of t. Banned: Date.now(), requestAnimationFrame loops, timers, CSS transitions and @keyframes, playing videos or GIFs, unseeded Math.random(). Add *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.

CHECK, THEN RENDER
- Export a still at each phrase's settled frame, and at the frame before and the frame of every cut. Fix overlaps and awkward line breaks.
- HTML path: serve the folder over a local http server (Chrome blocks fonts on file:// URLs). Playwright viewport at the exact format, deviceScaleFactor 1. Before capturing, run await Promise.all([...document.fonts].map(f => f.load())), then await document.fonts.ready. Set img.loading = "eager" on every image, then await img.decode() on each, catching failures (a lazy image offscreen never loads, so decode() would wait forever). Capture frame i at t = i/30 for i = 0 to DURATION x 30 - 1.
- Save the frame where the hero has fully landed as poster.jpg, to use as the cover image. Don't bake it into frame 0: it would flash the payoff before the first word.
- In the commands below, DURATION means the real length in seconds: write the number, not the word.
- HTML path encode: ffmpeg -framerate 30 -i frames/%05d.png -c:v libx264 -pix_fmt yuv420p -crf 18 -movflags +faststart video.mp4
- Music (if none, rename video.mp4 to type.mp4): ffmpeg -i video.mp4 -i TRACK -map 0:v -map 1:a -c:v copy -c:a aac -b:a 192k -af "apad,atrim=0:DURATION,afade=t=out:st=DURATION-1:d=1" -movflags +faststart type.mp4
- Confirm with ffprobe that the video has exactly DURATION x 30 frames.

DELIVER: type.mp4, poster.jpg and plan.md.

Turn this data into a {25}-second animated data story that makes one point impossible to miss.

BRIEF (fill in, or delete a line to let Claude decide)
- The point: "{e.g. Support tickets fell 62% in the three months after launch}"
- Data: {paste CSV/JSON or give a file path}. Use only these numbers.
- Source line: "{Source: internal dashboard, Sep 2026}"
- Audience: {investors | customers | social feed}. It sets the wording of the question and the takeaway.
- Palette: background {#hex}, text {#hex}, one highlight {#hex}. Everything that isn't the point is grey.
- Format: {1920x1080 | 1080x1350}, 30fps

PLAN (write plan.md before any code)
- Choose the one chart that proves the point fastest: bars to compare, a line for change over time, a single count-up for one number. Justify it in one line.
- Structure: Question (0–3s) → Baseline (what normal looks like) → Build (data draws in, in reading order) → 0.5s pause → Payoff (the hero number lands in the highlight color) → Takeaway line + source (final 4s).
- Baseline, Build and Payoff happen on one persistent chart, with no cuts between them.
- List every number that will appear on screen with the data row(s) it comes from, and the formula for any derived number (e.g. (1840 - 700) / 1840 = 62%). Anything that can't be traced is cut. If the math doesn't support the point, stop and tell me.

DATA MOTION
- Axes, labels and units appear before the data that uses them.
- Bars grow from a zero baseline. Never truncate a bar chart's axis.
- Lines reveal left to right, linearly in x (a clip reveal), then the key point gets a marker.
- Count-ups ease out into the final value, keep the same decimals and units throughout, and land on the exact figure. Numbers use tabular-nums in a fixed-width, right-aligned box so the digits don't jitter.
- One highlight color, used only on the data that proves the point.
- No idle pulsing or floating anywhere. The payoff holds still.

MOTION AND TEXT
- Scenes exit in the direction the next enters. Cut while the outgoing scene is still moving; the next enters on that same frame, already moving (no gap, no overlap). No crossfades, and at most 3 transition types.
- Entrances under 0.8s, exits about 75% of that, staggers under 0.5s in total. Ease-out in, ease-in out. No bounce or elastic.
- Every line meant to be read stays still for 0.3s per word, minimum 1s. Nothing under 40px at 1080p; keep text 5% in from every edge.

BUILD
- First confirm ffmpeg and Playwright exist. Install Playwright if missing (it can drive an installed Chrome with channel "chrome" instead of downloading Chromium). If ffmpeg is missing, stop and tell me how to install it.
- If the project already uses Remotion or HyperFrames (remotion in package.json, or a hyperframes.json), use it and its own render command. Otherwise write one HTML file that sets window.DURATION and exposes async window.seek(t). GSAP is fine as one paused timeline that seek(t) drives.
- Draw charts in SVG you control (d3 scales and shapes are fine). Never use a library's built-in animation: it runs on wall-clock time, not on t.
- Every frame is a pure function of t. Banned: Date.now(), requestAnimationFrame loops, timers, CSS transitions and @keyframes, playing videos or GIFs, unseeded Math.random(). Add *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.

CHECK, THEN RENDER
- Export stills at the baseline, the pause, the payoff and the frames either side of every cut. Check every number on screen against plan.md.
- HTML path: serve the folder over a local http server (Chrome blocks fonts on file:// URLs). Playwright viewport at the exact format, deviceScaleFactor 1. Before capturing, run await Promise.all([...document.fonts].map(f => f.load())), then await document.fonts.ready. Set img.loading = "eager" on every image, then await img.decode() on each, catching failures (a lazy image offscreen never loads, so decode() would wait forever). Capture frame i at t = i/30 for i = 0 to DURATION x 30 - 1.
- Save the payoff frame as poster.jpg, to use as the cover image. Don't bake it into frame 0: it would flash the answer before the question.
- In the commands below, DURATION means the real length in seconds: write the number, not the word.
- HTML path encode: ffmpeg -framerate 30 -i frames/%05d.png -c:v libx264 -pix_fmt yuv420p -crf 18 -movflags +faststart data-story.mp4
- Confirm with ffprobe that the video has exactly DURATION x 30 frames.

DELIVER: data-story.mp4, poster.jpg and plan.md with the number trace table.

Build a {8}-second seamless loop of the feature below being used, for a landing-page hero or a social post.

BRIEF (fill in, or delete a line to let Claude decide)
- The action: "{e.g. drag a card into Done and watch the progress ring fill}"
- Source UI: {this project's components | screenshots in ./assets | a URL (screenshot it once and rebuild from that; never record the live page)}
- Format: {1920x1080 | 1080x1080}, 30fps, no audio

PLAN (write plan.md before any code)
- One user action in three steps: setup → action → result, then a reset back to the opening state.
- The state at t = DURATION is identical to t = 0, and the seam falls inside a still hold of at least 0.3s.
- The reset moves forward, never rewinds or crossfades: the finished item files away and a fresh one arrives from the direction the story travels.
- The result holds still long enough to read any text it shows (0.3s per word, minimum 1s).
- The causal chain with times: cursor arrives → press → release → result → settle. Every reaction starts on the exact frame of its cause.

UI MOTION
- Use the real components and CSS. Recreate only what you can't import, matching colors and fonts exactly.
- The cursor and any text caret are drawn elements. Drive hover, pressed and focus states with classes set from t.
- A large cursor leads the eye along a gently curved path with ease-in-out, and settles before it clicks.
- Click feedback: the target presses to 96% scale over about 80ms and returns over about 150ms with ease-out. No oscillation.
- Typing, if any, at an even pace of about 15 characters per second.
- The camera may push in toward the action (10% at most) and eases back to its opening framing during the reset. No idle floating, pulsing or wobble.
- Entrances under 0.8s, easing out. No bounce or elastic.

BUILD
- First confirm ffmpeg and Playwright exist. Install Playwright if missing (it can drive an installed Chrome with channel "chrome" instead of downloading Chromium). If ffmpeg is missing, stop and tell me how to install it.
- If the project already uses Remotion or HyperFrames (remotion in package.json, or a hyperframes.json), use it and its own render command. Otherwise add a hidden route (or one HTML file if nothing needs importing) that sets window.DURATION and exposes async window.seek(t). GSAP is fine as one paused timeline that seek(t) drives.
- Every frame is a pure function of t. Banned: Date.now(), requestAnimationFrame loops, timers, CSS transitions and @keyframes, playing videos or GIFs, unseeded Math.random(). Add *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.

CHECK, THEN RENDER
- Capture the state at t = 0 and at t = DURATION and pixel-diff them: they must be identical. Export stills at the click and the result, and fix anything clipped or soft.
- HTML path: serve the folder over a local http server (Chrome blocks fonts on file:// URLs). Playwright viewport at the exact format, deviceScaleFactor 1. Before capturing, run await Promise.all([...document.fonts].map(f => f.load())), then await document.fonts.ready. Set img.loading = "eager" on every image, then await img.decode() on each, catching failures (a lazy image offscreen never loads, so decode() would wait forever). Capture frame i at t = i/30 for i = 0 to DURATION x 30 - 1. Never capture t = DURATION itself: it duplicates frame 0 and the loop stutters.
- In the commands below, DURATION means the real length in seconds: write the number, not the word.
- HTML path, MP4: ffmpeg -framerate 30 -i frames/%05d.png -c:v libx264 -pix_fmt yuv420p -crf 18 -movflags +faststart -an loop.mp4
- HTML path, WebM: ffmpeg -framerate 30 -i frames/%05d.png -c:v libvpx-vp9 -crf 32 -b:v 0 -pix_fmt yuv420p -row-mt 1 -an loop.webm
- Confirm with ffprobe that each file has exactly DURATION x 30 frames.

DELIVER: loop.mp4, loop.webm, poster.jpg (the result state; leave frame 0 untouched so the loop stays seamless), and an embed snippet: <video autoplay muted loop playsinline poster="poster.jpg"> with the WebM source first and the MP4 last.

Make a {60}-second motion-graphics explainer that teaches the concept below to the audience below, well enough that they could explain it to a friend.

BRIEF (fill in, or delete a line to let Claude decide)
- Concept: {e.g. how HTTPS keeps your password private}
- Audience: {curious non-engineers | developers | students}
- Facts: {paste verified notes or source links}. Use only these.
- Narration: {none, on-screen text carries it | path/to/voiceover.wav, plus word-timestamp JSON if you have it}. With a voiceover, the video length is the voiceover plus 1s and the target above is ignored. No timestamps? Generate them with a local speech-to-text tool such as Whisper.
- Style: palette {3 hexes}, fonts {display + text}, look {flat vector | diagram | editorial}
- Format: {1920x1080 | 1080x1920}, 30fps

PLAN (write plan.md before any code)
- Script 6–8 beats: Hook question (under 5s) → Everyday analogy → Mechanism in 1–3 steps → One concrete example → One-line recap → End card.
- For every beat: the one idea, the visual that proves it, and the exact words. One idea per beat.
- Pick one hero object (e.g. the password as a small yellow card) that persists and transforms across every beat, carrying the eye through each cut, instead of new illustrations per scene.
- Check every fact against the brief. Mark anything not in it NEEDS SOURCE and leave it out.

EXPLAINER RULES
- Build diagrams step by step as each idea is introduced. Never show a finished diagram and then explain it.
- With narration: each visual lands on the word it illustrates, using the timestamps. If a line doesn't fit its slot, change the slot; never rush the line.
- Without narration: captions of 2 lines max, each held still for 0.3s per word, minimum 1s.
- Labels share one style and sit next to the thing they name, never in a legend.
- Nothing smaller than 40px at 1080p. Settled text stays 5% in from every edge; on vertical it also stays out of the bottom 20% and right 12%. Motion may pass through those zones.

MOTION
- One dominant travel direction; rise upward only for the recap. At most 3 transition types in the whole film.
- Scenes exit in the direction the next enters. Cut while the outgoing scene is still moving; the next enters on that same frame, already moving (no gap, no overlap). No crossfades.
- Entrances under 0.8s, exits about 75% of that, staggers under 0.5s in total. Ease-out in, ease-in out. No bounce or elastic. Pause 0.3–0.75s before each "aha" moment.
- No idle floating or pulsing. If a beat has spare time, reveal the next piece of the diagram.

BUILD
- First confirm ffmpeg and Playwright exist. Install Playwright if missing (it can drive an installed Chrome with channel "chrome" instead of downloading Chromium). If ffmpeg is missing, stop and tell me how to install it.
- If the project already uses Remotion or HyperFrames (remotion in package.json, or a hyperframes.json), use it and its own render command. Otherwise write one HTML file that sets window.DURATION and exposes async window.seek(t). GSAP is fine as one paused timeline that seek(t) drives. Keep every beat on one master timeline so the hero object and mid-motion cuts stay continuous.
- Every frame is a pure function of t. Banned: Date.now(), requestAnimationFrame loops, timers, CSS transitions and @keyframes, playing videos or GIFs, unseeded Math.random(). Add *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.

CHECK, THEN RENDER
- Render a 10-second test from the middle first and fix what you see. Then export a still from every beat and from the frames either side of every cut; fix overflow, collisions and low contrast.
- HTML path: serve the folder over a local http server (Chrome blocks fonts on file:// URLs). Playwright viewport at the exact format, deviceScaleFactor 1. Before capturing, run await Promise.all([...document.fonts].map(f => f.load())), then await document.fonts.ready. Set img.loading = "eager" on every image, then await img.decode() on each, catching failures (a lazy image offscreen never loads, so decode() would wait forever). Capture frame i at t = i/30 for i = 0 to DURATION x 30 - 1.
- Pick the frame with the hero object mid-mechanism, fully settled. HTML path: copy its PNG over frames/00000.png before encoding (replace it, don't add a frame), and save it as poster.jpg.
- In the commands below, DURATION means the real length in seconds: write the number, not the word.
- HTML path encode: ffmpeg -framerate 30 -i frames/%05d.png -c:v libx264 -pix_fmt yuv420p -crf 18 -movflags +faststart video.mp4
- Voiceover (if none, rename video.mp4 to explainer.mp4): ffmpeg -i video.mp4 -i VOICEOVER -map 0:v -map 1:a -c:v copy -c:a aac -b:a 192k -af "apad,atrim=0:DURATION" -movflags +faststart explainer.mp4
- Confirm with ffprobe that the video has exactly DURATION x 30 frames.

DELIVER: explainer.mp4, poster.jpg, plan.md with the script, and, with a voiceover, captions.srt built from the word timestamps.