Skip to main content

Claude motion graphics

Styles + free skill Opus 5.5

17 motion graphics styles written as rules Claude can follow: hex colours, easing curves, frame counts and an avoid list. Every preview below is live code, not a video. Copy a style prompt, or install the whole thing as a Claude Code skill.

Updated •17 styles•Free SKILL.md

Ask Claude for "a modern, slick motion graphic" and you get the same glow, particles and bouncy easing as everyone else. Ask for "snaps on cubic-bezier(.7,0,.2,1), one signal colour, wipes never fades" and you get a look. Each style below comes with a prompt that writes it that way.

Swiss grid & kinetic type

A modular grid, one typeface, one signal colour. Type snaps into cells like a printing press.

Brand identityEvent openersConference titles
Canvas 2D or SVG
Rules and avoid list
  • One easing curve for snaps, cubic-bezier(.7,0,.2,1). Linear only for lines being drawn.
  • Entrances are wipes or clip reveals, never fades. Deletions are hard cuts.
  • Exactly one element carries the signal colour per shot. That element is the subject.
  • Every position lands on a 12-column grid with 4% margins.

Avoid: Overshoot, springs, drop shadows, more than one typeface, centred-everything layouts

Flat vector explainer

Flat colour shapes and simple geometric characters with springy, confident movement.

SaaS promosOnboardingScience explainers
SVG + GSAP
Rules and avoid list
  • Entrances overshoot with cubic-bezier(0.34,1.56,0.64,1) and settle within 12 frames.
  • Stagger groups by 2 to 4 frames, never all at once.
  • Transitions are carried by an element: a shape grows to fill the frame and becomes the next background.
  • Four to five flat colours, no gradients, no outlines thinner than 3px at 1080p.

Avoid: Stock-illustration people with tiny heads, gradients, crossfades between scenes

Shape morph & liquid

One shape keeps turning into the next. The story is told by transformation, not cuts.

Music videosBrand storiesTransitions between topics
SVG path morphing, or WebGL metaballs for liquid
Rules and avoid list
  • There are no cuts. Every new idea grows out of the previous shape.
  • Each morph takes 18 to 30 frames and passes through a readable in-between shape.
  • Hold each finished shape at least 1 second so it reads.
  • Liquid joins use smooth-min blending, never a hard overlap.

Avoid: Morphs that pass through a shapeless blob, constant motion with no holds

Single line & live drawing

One ink line draws itself, never lifts, and becomes the next picture. The camera follows the pen.

Minimal adsLuxury brandsWhiteboard explainers
SVG stroke-dashoffset or Canvas path sampling
Rules and avoid list
  • The line draws at a steady speed, linear easing, about 800px per second at 1080p.
  • The camera pans to keep the pen tip in the middle third of the frame.
  • One fill moment: the closed line floods with colour on a downbeat.
  • Constant stroke width, round caps.

Avoid: Many lines drawing at once, fades in, text typed letter by letter

Data story

Real numbers drawn mark by mark, with one annotation that says why it matters.

ReportsData journalismInvestor updates
Canvas 2D or SVG + d3 scales
Rules and avoid list
  • One reading per screen. Never show two charts at once.
  • Bars grow from the baseline in 20 frames with ease-out; counters roll to the exact value and stop.
  • Every number on screen comes from the data you were given.
  • Axis labels at least 28px at 1080p so they read on a phone.

Avoid: 3D charts, rainbow palettes, decorative gridlines, numbers that are not in the source

Isometric miniature world

A tidy isometric diorama that builds itself, block by block, and opens up to show how things work.

Architecture diagramsSupply chainsApp feature demos
Three.js orthographic camera, or Canvas with an iso projection
Rules and avoid list
  • True isometric angles. The camera slides, it never rotates in perspective.
  • Objects drop in from 40px above with a small bounce, staggered by 3 frames.
  • Three tones per material: top light, left mid, right dark.
  • Things open to reveal their insides instead of cutting to a new scene.

Avoid: Perspective cameras, realistic textures, labels floating without leader lines

Dark tech keynote

Near-black stage, hairline grid, one accent, light sweeping across a product, one giant number.

Product launchesAI and SaaSFeature reveals
Canvas 2D, or Three.js for a product model
Rules and avoid list
  • Slow, long-tail easing, cubic-bezier(.16,1,.3,1), 30 to 45 frames per move.
  • One giant number per piece, 30% of frame height, counted up to its exact value.
  • Reveals come from light: a soft sweep passes and leaves the object lit.
  • The accent colour appears on one thing only.

Avoid: Lens flares, neon glow, particle bursts, more than one accent colour

Living UI screencast

Looks like a real screen recording, but every pixel is rebuilt in HTML, so the camera can zoom and the UI can act.

Product tutorialsFeature launchesChangelogs
HTML + CSS + SVG, driven by a timeline seeked to t
Rules and avoid list
  • Rebuild the real UI with real copy and colours. Never use screenshots.
  • The cursor moves on eased curves, 20 to 30 frames per move, and pauses 8 frames before each click.
  • Zoom to 1.6x on the detail that matters, then pull back.
  • One action every 3 to 4 seconds so the viewer can follow.

Avoid: Fake features, cursor teleporting, lorem ipsum, zooming on nothing

HUD & terminal

Wireframes, lock-on brackets, rolling numbers and monospace glyph grids.

Developer toolsSpec walkthroughsSci-fi and AI demos
Canvas 2D glyph grid, SVG overlays, optional Three.js wireframe
Rules and avoid list
  • All text is monospace and sits on a character grid.
  • Numbers roll through random glyphs for 6 to 10 frames before settling on the real value.
  • Brackets lock onto a target in 3 steps: wide, tighter, locked with a tick.
  • Two colours max on the dark field, plus dim grid lines.

Avoid: Heavy glow and bloom, glitch tearing, unreadable tiny text

Watercolour & ink

Brush strokes paint themselves on textured paper. Washes bleed past the lines.

StorytellingTravel and natureCultural brands
Canvas brush engine or p5.js + p5.brush
Rules and avoid list
  • Everything is painted with strokes. No plain vector shapes.
  • Washes reveal over 15 to 25 frames and bleed 4 to 8px past the ink line.
  • Paper texture is always visible; pure white and pure black never appear.
  • Linework re-randomises 12 times a second from a seed, so it lives without flickering.

Avoid: Perfect geometric shapes, digital gradients, text labels on everything

Risograph & halftone print

Two or three spot inks overprinted on warm paper, halftone dots, plates slightly out of register.

Indie brandsZinesEvent posters
Canvas 2D or a WebGL print shader
Rules and avoid list
  • Two or three inks only. Where inks overlap they multiply.
  • Each plate is offset 2 to 4px from the others and stays there.
  • Tones are halftone dots, no smooth gradients.
  • Motion steps at 12fps for a printed, hand-pulled feel.

Avoid: A fourth ink, perfect registration, glossy highlights

Paper cut-out & collage

Layered card and photo cut-outs with white scissor edges, moving in stop-motion steps.

Music and fashionKids storiesEditorial pieces
Canvas or DOM layers with drop shadows between them
Rules and avoid list
  • Every piece has a white or cut edge and a small hard shadow on the layer below.
  • Pieces move in stop-motion steps at 12fps; the camera can move at 24.
  • Depth comes from 3 to 6 parallax layers.
  • Joints pivot like split pins, they do not bend.

Avoid: Soft blurred shadows, smooth 60fps character motion, vector-perfect edges

Hand-drawn line boil

Cartoon linework that wiggles every two frames, smears on fast moves, and looks drawn by hand.

Character shortsPlayful brandsSocial clips
Canvas 2D variable-width strokes with 3 jitter variants
Rules and avoid list
  • Animate on twos: the drawing changes every 2 frames at 24fps.
  • Cycle 3 jitter variants of every line so it boils without strobing.
  • Fast moves get a smear frame instead of motion blur.
  • Anticipation before every big action: a small move the other way for 4 to 6 frames.

Avoid: Tweened vector motion at 60fps, perfect circles, text standing in for acting

Pixel art & retro game

Big pixels, a limited palette, sprite cycles and chiptune timing.

Game trailersNostalgia marketingYear-in-review
Canvas at 320x180, scaled up with nearest-neighbour
Rules and avoid list
  • Draw at 320x180 and scale by 6 with image smoothing off. Never draw at full resolution.
  • One fixed palette of 16 to 32 colours. Shading uses dithering, not blending.
  • Sprites animate at 8 to 12fps; the camera snaps to whole pixels.
  • Text uses a pixel font and types out in dialogue boxes.

Avoid: Mixed pixel sizes, blurry scaling, anti-aliased edges, smooth sub-pixel motion

VHS, film & CRT eras

The texture of old media: grain, gate weave, scanlines, colour bleed, tracking lines.

Music videosThrowback campaignsMystery teasers
Canvas or Three.js scene plus a WebGL post-processing pass
Rules and avoid list
  • Pick one era and commit: 1920s film, 1980s VHS, or 1990s camcorder.
  • Texture is seeded per frame index, so grain changes every frame but renders the same every time.
  • Gate weave of about 1px and brightness flicker of about 5% for film. Chroma shift of 2 to 3px for tape.
  • Keep it legible: the effect sits on top of a clear composition, it is not the composition.

Avoid: Stacking every retro effect at once, glitch tearing over important text

Toy & material 3D

Soft studio-lit 3D objects that look like toys, clay or candy, with shallow depth of field.

Product filmsBrand identsPlayful explainers
Three.js with physical materials and an environment map
Rules and avoid list
  • Soft studio light from one big key and a fill. Matte or soft-gloss materials.
  • Shallow depth of field keeps attention on one object.
  • Objects arrive with weight: fast in, 2 small settles, no floating.
  • Fixed random seed for every procedural shape.

Avoid: Chrome everything, hard black shadows, objects floating with no contact shadow

Vertical social captions

Bold captions pop on every phrase, built for sound-off viewing in a 9:16 frame.

Reels, Shorts, TikTokFounder clipsTips and listicles
HTML + CSS text, Canvas for backgrounds
Rules and avoid list
  • 1080x1920. Keep everything inside the middle 80% so platform buttons do not cover it.
  • Captions of 1 to 4 words, each popping in on its spoken beat with a 6 frame scale overshoot.
  • The first second must hook with the sound off.
  • Highlight one word per caption in the accent colour.

Avoid: Long sentences on screen, text in the bottom 15%, small type

How to write your own style

The best style libraries for Claude share one habit: anything that can be a number is a number. Claude can check a frame against "stagger by 3 frames". It can't check it against "feels premium".

01

Medium in one clause

Risograph print, two spot inks on warm paper.

02

Palette with hex codes

Off-white #f5f2ea, black #111, one red #e63323.

03

Colour logic

Only one element carries the signal colour per shot.

04

Easing as a number

Snaps use cubic-bezier(.7,0,.2,1). Not "smooth".

05

Timing as frames

Groups stagger by 3 frames. Morphs take 18 to 30.

06

How shots connect

Wipes, never fades. A shape grows into the next scene.

07

Texture parameters

Plates misregistered 2 to 4px. Grain seeded per frame.

08

Frame rate as a style choice

12fps stepping for paper, 24 on twos for drawn, 60 for UI.

09

An avoid list

No overshoot, no shadows, no gradients.

topFDEjobs
Forward Deployed Engineer roles

Building with Claude? Get paid for it.

Forward Deployed Engineers ship AI agents inside real customer systems. Open roles at Anthropic, OpenAI, Cognizant and more.

Up to $325k Anthropic, OpenAI, more Updated daily
Browse FDE jobs
Browse FDE jobs on topFDEjobs

Free Claude Code motion graphics skill

One file that teaches Claude Code the whole process: ask for missing facts once, storyboard first, deterministic frames, a contact-sheet review, then a frame-by-frame MP4 render. It triggers when you ask for a video, animation or motion graphic.

  1. 1. Create the skill folder in your project (or ~/.claude/skills for all projects)
  2. 2. Download the skill into it
  3. 3. Ask for a video and name a style
Download SKILL.md
.claude/skills/motion-graphics/SKILL.md
---
name: motion-graphics
description: Make motion graphics and short videos as code (Canvas, SVG, Three.js) and render them to MP4 frame by frame. Use when the user asks for a video, animation, motion graphic, logo reveal, launch spot, explainer, lyric video or social clip.
---

# Motion graphics as code

You make videos by writing code that draws every frame, then rendering it frame by frame to MP4.
There is no video model. The quality comes from planning, timing and review.

## 1. Ask once, then work

If any of these are missing, ask for all of them in one message, then do not ask again:
- What should the viewer understand or feel by the end?
- Duration, aspect ratio (16:9, 9:16, 1:1, 4:5) and where it will play.
- Real facts, copy, brand colours, logo SVG, product UI or data. Never invent features, numbers or quotes.
- Audio: none, a track the user supplies (get the BPM), generated music, or voiceover.
- Style: one named style. If none is given, pick one and say why in one line.

## 2. Storyboard before code

Write a shot list and show it to the user before writing animation code:
- One row per shot: start time, end time, what is on screen, what the viewer must read, the transition out.
- List every "read" (a thing the viewer must notice) and give each its own slot. Fast actions, slow meanings.
- A hook inside the first second. Something happens in every shot. Hold the final frame 0.8 to 1.2 s.
- If there is music, put cuts and key hits on the beat grid. Not every beat gets a hit.

## 3. Build rules

- One `scene.html` that draws any moment on request. Expose `window.renderAt(t)` and also run a normal
  requestAnimationFrame preview loop that reads `performance.now()`.
- Every frame is a pure function of time. No counters that increment per frame, no unseeded `Math.random()`,
  no physics integrated step by step, no CSS transitions triggered by timers. Seed all randomness.
- `await document.fonts.ready` before the first frame. Load fonts locally or from a stable CDN.
- Write the style as numbers: hex colours, cubic-bezier curves, frame counts for staggers, grid margins.
- Keep text inside a 5% safe margin (middle 80% for vertical social video).
- Default avoid list unless the style asks for it: particle bursts, lens flares, neon glow, RGB split, glitch,
  bouncy easing on everything, decorative gradients, text that repeats what the picture shows.

## 4. Review before the full render

- Render a contact sheet: one frame per second (or per beat) tiled into one PNG. Open it and look.
- Check for: overlapping or clipped text, text on screen too short to read (about 0.3 s per word, minimum 1 s),
  dead time, fallback fonts, elements too small to see at phone size, black frames.
- Fix what you find, then render a half-resolution draft, then the final.

## 5. Render

Use a virtual clock: replace `performance.now`, `Date.now` and `requestAnimationFrame`, advance time by exactly
1/fps per frame, screenshot each frame, pipe the PNGs into ffmpeg. Reference script:
https://awesomeclaude.ai/claude-video-render.mjs

```bash
node claude-video-render.mjs scene.html out.mp4 15 60 1920 1080
ffmpeg -i out.mp4 -i track.mp3 -c:v copy -c:a aac -b:a 192k -shortest final.mp4
```

Never record audio from the browser. Mux the track with ffmpeg so sync is exact.

## 6. Report

Deliver the MP4 path, the storyboard as built, the style rules you followed, and the two weakest moments
with how you would fix them in another round.

---
Made by awesomeclaude.ai. Styles with copy-paste rules: https://awesomeclaude.ai/claude-motion-graphics
Keep going

Frequently asked questions

Can Claude make motion graphics?

Yes. Claude Opus 5.5 writes motion graphics as code, usually Canvas, SVG with GSAP, or Three.js, and a headless browser renders them to MP4. Motion graphics are by far the most common kind of Claude video: more than half of the creator prompts we analysed asked for one.

What is a Claude motion graphics skill?

A SKILL.md file that teaches Claude Code your style rules, render setup and review steps, so you can ask for "a 15s launch video in the swiss style" without re-explaining the look. Download ours from this page and drop it into .claude/skills/motion-graphics/.

How do I keep a consistent style across videos?

Write the style as numbers, not adjectives: hex colours, easing curves, frame counts, grid margins. Put it in a skill or a STYLE.md file in the project, and ask Claude to check its contact sheet against those rules before rendering.

Which style is best for a product launch?

Dark tech keynote for AI and developer products, living UI screencast when the interface is the product, and flat vector when you need to explain a concept to a non-technical audience.

Why do all AI motion graphics look the same?

Because the same defaults keep showing up: glow, particle bursts, lens flares, bouncy easing on everything, gradient backgrounds. A specific style with an avoid list and testable rules gets you out of that look fast.

Can I use these style prompts commercially?

Yes. We wrote them and you can paste them into any prompt or skill. Check the licenses of any fonts, music or images you add.

Styles, rules and previews by Awesome Claude, informed by open style libraries such as lemo-opuscar and mg-styles-15. Last updated 2026-10-21.
WebMCP Developers