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.
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.
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. Create the skill folder in your project (or ~/.claude/skills for all projects)
---
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
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.