Make a [duration]-second [type of motion graphic] in [HyperFrames / Remotion],
[width]x[height] at [fps] fps.
Text, exactly: "[copy]".
Beats: [what happens at 0.0s], [at 0.4s], [at 1.2s] ...
Style: [background hex], [text hex], one accent [hex] on [element], [font + weight].
Motion: animate transforms and opacity only, [ease names], no layout-property tweens.
End: [hold / exit] for the last [n] seconds.
Bundle every script and font locally, no CDN links.
Before rendering, extract frames at [times] and show me them.

Make a 6-second kinetic typography motion graphic in HyperFrames, 1920x1080 at 30 fps.
Text, exactly: "Code is the new camera."
Beats: each word rises in from below and settles, one word every 0.4s starting at 0.3s.
At 2.15s give "camera." a quick 6% scale pop. At 2.4s draw a 10px accent underline left to right in 0.6s.
At 4.2s dim every word except "camera." to 35% opacity. Hold to the end.
Style: background #0b0b0c, text #f2efe8, accent #ff5a1f on "camera." and the underline, heavy grotesk at 168px.
Motion: transforms and opacity only, power4.out on entries, expo.out on the underline.
Bundle GSAP locally, no CDN. Set every starting value with gsap.set before the timeline.
Before rendering, extract frames at 1s, 3s and 5s and show me them.

Make an 8-second quote reveal in HyperFrames, 1080x1350 at 30 fps.
Text, exactly: "[your quote]" and the attribution "[name, role]".
Beats: words fade up from 20% opacity to 100% in reading order, 0.18s apart, starting at 0.4s. Attribution slides in from the left 0.5s after the last word.
Style: background #f4f1ea, text #1b1b1b, attribution #8a6d3b, a serif display face for the quote, sans for attribution.
Motion: opacity and y only, gentle power2.out, no bounce.
End: hold the full quote for 2s.
Bundle fonts and scripts locally.

Make a 4-second title card in HyperFrames, 1080x1920 at 30 fps.
Text: "[number]" on line one, "[label]" on line two.
Beats: the number counts up from 0 over 1.5s with power2.out, the label fades in at 1.4s, a thin accent line grows under it at 1.8s.
Style: background #111, number #fff at 260px tabular figures, label #9aa3ad, accent #3ddc97.
Format the number with Indian digit grouping if it's in rupees.
End: hold for 1.5s.

Make an 8-second vertical data motion graphic in HyperFrames, 1080x1920 at 30 fps.
Label "FY26 revenue", then a number counting from ₹0 to ₹4,200 over 1.8s using en-IN digit grouping, then the line "crore, up 38% year on year".
From 2.6s, four bars for Q1 to Q4 with values 820, 960, 1,080, 1,340 grow one after another, 0.45s apart, each value label fading in above its bar. At 5.2s turn the Q4 bar gold.
Style: background #0e1116, text #eef1f5, bars #3ddc97, highlight #f5c84c, a clean sans.
Motion: transforms and opacity only for labels. Mark axis labels that sit below the chart as intentional overflow.
Small footer: "Sample data for a demo reel".
Bundle GSAP locally.

Make a 10-second line chart animation in HyperFrames, 1920x1080 at 30 fps.
Data (month, value): [paste 12 rows].
Beats: axes fade in by 0.5s, the line draws left to right over 4s with an SVG stroke-dashoffset tween, a dot follows the tip, the final value pops in a label at the end of the line.
Style: background #0d1117, line #58a6ff 6px, grid #21262d, labels #8b949e.
End: hold 2s, then fade everything except the final value.
Use the exact data values; don't smooth or round them.

Make a 6-second comparison graphic in HyperFrames, 1080x1080 at 30 fps.
Left bar labelled "Before" at [value + unit], right bar "After" at [value + unit].
Beats: both bars grow together for 1s, then the "After" bar keeps going or shrinks to its real value, then a delta badge "[−62%]" stamps in at 2.5s.
Style: background #fafafa, before #c9ced6, after #ff5a1f, text #111.
Scale both bars to the same axis. Don't exaggerate the difference.

Make a 5-second transparent lower third in HyperFrames, 1920x1080 at 30 fps.
Name: "[Full Name]". Role: "[ROLE · COMPANY]".
Beats: a dark rounded panel scales in from the left edge over 0.55s at 0.2s with expo.out, name fades and slides in at 0.45s, role at 0.6s. At 4.0s text slides out, panel collapses at 4.2s.
Style: panel #111418 with a 12px accent bar #ff5a1f on its left edge, name #f4f2ec 56px extra bold, role #a9b0bb 30px tracked caps.
Place it in the bottom-left safe area. Transparent background.
Render as MOV for Premiere and WebM for the web.

Make a 4-second logo reveal in HyperFrames, 1920x1080 at 30 fps, using the SVG at ./logo.svg.
Beats: the logo's outline strokes draw on over 1.2s, the fill fades in at 1.1s, the wordmark slides up underneath at 1.5s, a soft glow pulses once at 2.2s.
Style: background #0a0a0a, use the logo's own colors, no extra gradients.
End: hold 1.2s. Also export a transparent MOV version.
Don't redraw or restyle the logo. Animate the file as supplied.

Make a 3-second call-to-action overlay in HyperFrames, 1080x1920 at 30 fps, transparent background.
Text: "Follow for part 2" with a small arrow.
Beats: pill-shaped button pops in with back.out(1.6) at 0.2s, text types on at 0.5s, the arrow nudges right twice.
Style: button #ffffff, text #111111, arrow #ff5a1f.
Keep it inside the bottom third, clear of the platform's caption area.
Render as WebM with alpha.

Make a 20-second product launch video in HyperFrames, 1920x1080 at 30 fps, for [URL].
First capture the site and pull the real logo, brand colors, headline and two product screenshots. Show me what you captured before building.
Scenes: 0 to 3s hook line "[problem in 6 words]"; 3 to 8s product name and logo; 8 to 15s the two screenshots with a simulated cursor clicking the main action; 15 to 20s three feature callouts and the URL.
Style: use the captured brand palette and fonts only.
Motion: smooth camera-style pans on screenshots, transforms only.
Wait for my approval of a frame at each scene start before rendering the full video.

Make a 6-second looping UI animation in HyperFrames, 1600x1000 at 60 fps.
Three app cards: [card A content], [card B content], [card C content].
Beats: card A morphs into B at 1.5s, B into C at 3.5s, C back into A at 5.5s, so frame 360 matches frame 1.
Style: background #f6f7f9, cards #ffffff with soft shadow, accent #4f46e5.
Motion: shared-element morph on size and position using transforms, no fades to black.
Export as WebM for a website background and confirm the first and last frames match.

Make a 7-second feature highlight in HyperFrames, 1080x1350 at 30 fps, using ./screenshot.png.
Beats: screenshot appears at full size, at 1.2s the frame punches in 2.2x on the [element] over 0.8s, a label "[feature name]" pins next to it at 2.2s, at 5s ease back out.
Style: background #0f172a, label pill #22c55e with dark text.
Keep the screenshot sharp: render at 2x device scale if needed.

Make a 45-second faceless explainer in HyperFrames, 1080x1920 at 30 fps, about "[topic]".
Step 1: write a 5-scene script with on-screen text of 12 words or fewer per scene and show it to me.
Step 2 after approval: build each scene as its own sub-composition with one diagram or icon animation per scene.
Style: background #101418, text #eef2f6, one accent #f59e0b, large readable type, minimum 36px body.
Motion: one idea moving at a time, 12-frame transitions between scenes.
End with a summary card listing the 3 key points.

Make a 40-second explainer in HyperFrames, 1920x1080 at 30 fps, for the GitHub pull request [owner/repo#N].
Read the PR description and diff. Scenes: what problem it fixes, the before code, the after code with the changed lines highlighted, the result in one sentence.
Style: dark editor theme, monospace at 34px minimum, highlight #fbbf24 at 25% opacity behind changed lines.
Never show secrets, tokens or .env contents even if they appear in the diff.

Make a 12-second route animation, 1920x1080 at 30 fps, from [city A] to [city B] via [city C].
Beats: map fades in, the route line draws over 6s, a marker pulses at each stop with its name, distance total appears at the end.
Style: muted map #e9e5dc, route #d9480f 8px, labels #222.
Use real coordinates for the cities and say which map data source you used.

Make a 9-second vertical text reel in HyperFrames, 1080x1920 at 30 fps.
Lines: "[hook, visible from frame 1]", "[line 2]", "[line 3]".
Beats: hook is on screen at frame 1 and shakes once at 0.3s, line 2 replaces it at 3s with a vertical whip, line 3 at 6s.
Style: background #ffde59, text #111 extra bold 110px, centered in the middle 60% of the frame.
Keep all text out of the top 250px and bottom 400px where platform buttons sit.

Make a 15-second testimonial reel in HyperFrames, 1080x1920 at 30 fps.
Quotes, exactly as written: [quote 1 + name], [quote 2 + name], [quote 3 + name].
Beats: each card slides up, five stars fill left to right, the quote holds 3.5s, card slides out.
Style: background #f8f5f0, cards #ffffff, stars #f5b301, text #1c1c1c.
Use only the quotes I've given. Don't paraphrase or invent reviews.

Make a 3-second square festival title card in HyperFrames, 1080x1080 at 30 fps.
Line 1 in Hindi, exactly: "शुभ दीपावली". Line 2: "Diwali sale · 40% off".
Beats: line 1 rises and fades in at 0.2s over 0.6s, line 2 follows at 0.6s, a few warm light particles drift upward.
Style: background #1a0f0a, line 1 #ffcf6b, line 2 #f3e6d8.
Bundle a Devanagari webfont such as Noto Sans Devanagari or Mukta in weights 400 and 800 locally, and use it for line 1.

Make a 7-second Hindi kinetic typography reel in HyperFrames, 1080x1920 at 30 fps.
Text, exactly: "[Hindi line]".
Reveal whole words, never individual characters, so matras and conjuncts stay joined. One word every 0.35s.
Style: background #0f0f12, text #ffffff, accent #ff8a00 on the last word, Devanagari webfont bundled locally in weight 700.
End: hold 2s.

Make a 6-second transparent score overlay in HyperFrames, 1920x1080 at 30 fps.
Teams: "[TEAM A]" and "[TEAM B]". Score: "[187/4]" in "[18.2]" overs. Target: "[205]".
Beats: the bar slides up from the bottom edge, team names and score fade in, the run count ticks from the previous ball's score to the current one, required run rate appears at 2s.
Style: navy #0b1d3a, white text, accent #ffcc00. No league logos or team crests.
Render as WebM with alpha.

Make a 5-second countdown reel in HyperFrames, 1080x1920 at 30 fps.
Text: "Sale ends in" then a timer showing "[05:59:59]" ticking down one second per real second, then "[Shop now · link in bio]".
Style: background gradient #ff3d7f to #ffb800, text #ffffff, bold sans.
Keep the timer digits tabular so they don't jump as they change.

Before the final render, extract frames at [0.5s, 1.5s, 3s, end minus 0.5s] and show them to me. For each frame, tell me what should be on screen at that moment according to my beats, and point out anything that doesn't match.

Run the framework's check command and fix every error and warning before rendering. If the check stops early because of a lint error, fix that and run the check again, because the layout and contrast stages won't have run.

Animation notes: the entrance of [element] feels slow, cut it to 0.3s. Everything after 2s should happen 0.2s earlier. The exit at the end is too abrupt; ease out over 0.5s instead. Change nothing else.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Article",
      "headline": "Claude Motion Graphics Prompts I Rendered, Broke and Fixed",
      "description": "24 Claude motion graphics prompts, four rendered in HyperFrames with measured render times, file sizes, bugs and fixes.",
      "image": "https://YOURDOMAIN/wp-content/uploads/claude-motion-graphics-prompts-test-renders.webp",
      "datePublished": "2026-10-11",
      "dateModified": "2026-10-11",
      "author": {
        "@type": "Person",
        "name": "Ved Vyas",
        "url": "https://YOURDOMAIN/author/ved-vyas/",
        "sameAs": ["https://x.com/KangarooHere", "https://roo.beehiiv.com"]
      },
      "about": [{"@type": "Thing", "name": "Claude motion graphics prompts"}, {"@type": "Thing", "name": "Code-generated video"}],
      "mentions": [
        {"@type": "SoftwareApplication", "name": "Claude Opus 5.5"},
        {"@type": "SoftwareApplication", "name": "HyperFrames"},
        {"@type": "SoftwareApplication", "name": "Remotion"},
        {"@type": "SoftwareApplication", "name": "GSAP"},
        {"@type": "SoftwareApplication", "name": "FFmpeg"}
      ]
    },
    {
      "@type": "FAQPage",
      "mainEntity": [
        {"@type": "Question", "name": "Can Claude make videos directly?", "acceptedAnswer": {"@type": "Answer", "text": "No. With Claude motion graphics prompts, Claude writes code that a renderer such as HyperFrames or Remotion turns into video. The model plans and programs every frame, and headless Chrome plus FFmpeg produce the actual MP4, WebM or MOV file."}},
        {"@type": "Question", "name": "What is the best framework for Claude motion graphics prompts?", "acceptedAnswer": {"@type": "Answer", "text": "For most Claude motion graphics prompts, HyperFrames if you prefer HTML and CSS or need transparent overlays, Remotion if you work in React. HyperFrames is Apache 2.0. Remotion is free for individuals and teams of up to three employees, with a paid company licence above that."}},
        {"@type": "Question", "name": "How long does a render take?", "acceptedAnswer": {"@type": "Answer", "text": "Rendering is the fast part of Claude motion graphics prompts. In my test a 6-second 1080p clip at 30 fps rendered in about 17 seconds on a 2-vCPU, 8 GB cloud machine. An 8-second vertical chart took about 21 seconds. Faster machines with more memory can use more capture workers."}},
        {"@type": "Question", "name": "Why did my render fail after capturing every frame?", "acceptedAnswer": {"@type": "Answer", "text": "Most likely a script failed to load, often GSAP from a blocked CDN, which is why my Claude motion graphics prompts all end with a line about bundling scripts locally. HyperFrames reports it as sub_timeline_script_failure and refuses to encode. Install the library locally, reference the local file and render again."}},
        {"@type": "Question", "name": "Can I make transparent overlays for Premiere?", "acceptedAnswer": {"@type": "Answer", "text": "Yes. Ask for it in the Claude motion graphics prompt, then render with --format mov for ProRes 4444 with alpha, or --format webm for VP9 with alpha. In my test the same 5-second lower third was 11,960 KB as MOV and 116 KB as WebM, both fully transparent."}},
        {"@type": "Question", "name": "Do Claude motion graphics prompts work in Hindi?", "acceptedAnswer": {"@type": "Answer", "text": "Yes, Hindi Claude motion graphics prompts work, but bundle a Devanagari font. Without one, Chromium falls back to a system font that may lack bold weights. Reveal whole words, not characters, so matras stay attached."}},
        {"@type": "Question", "name": "Opus 5.5 or Sonnet 5.5?", "acceptedAnswer": {"@type": "Answer", "text": "Opus 5.5 for multi-scene launch films. Sonnet 5.5 for short single-beat graphics, at half the price."}}
      ]
    }
  ]
}
</script>