Kinetic typography system

Text driven videos (lyric videos, quote videos, promo openers) built in Remotion, HyperFrames or After Effects, where you want rhythm and consistency

Works with

Remotion Agent Skills (official)HyperFrames (HeyGen)claude-motion-design After Effects MCP (Engine Room)

Sources and credit

Written by AgentCut. Free to copy, edit and use in your own projects

More in Design systems

All 39 prompts →

```
# DESIGN.md: Motion graphics brand system

Read this before creating any graphic, title, caption or transition. Fill in the brackets once, then never improvise outside these rules.

## 0. Dials
| Dial | Value | Meaning |
|---|---|---|
| Energy | [4] | 1 calm documentary, 5 clean YouTube, 10 hype trailer |
| Density | [3] | 1 one idea on screen, 10 dashboard |
| Motion | [5] | 1 cuts and fades only, 10 everything animates |

## 1. Canvas
- Masters: 1920x1080 (16:9) and 1080x1920 (9:16), [30] fps. Never mix frame rates in one project.
- Graphics safe area: keep text inside the central 90% of width and height (5% margin each side, following EBU R 95 graphics safe). Action safe: 93%.
```
Design systems
Motion graphics brand system
Drop it into a Remotion project, a Claude Code folder or an After Effects MCP session so every title, lower third and transition shares the same type, color, easing and timing

DESIGN.mdRemotionAfter EffectsClaude Code

.md Open
# DESIGN.md: Motion graphics brand system Read this before creating any graphic, title, caption or transition. Fill in the brackets once, then never improvise outside these rules. ## 0. Dials | Dial | Value | Meaning | |---|---|---| | Energy | [4] | 1 calm documentary, 5 clean YouTube, 10 hype trailer | | Density | [3] | 1 one idea on screen, 10 dashboard | | Motion | [5] | 1 cuts and fades only, 10 everything animates | ## 1. Canvas - Masters: 1920x1080 (16:9) and 1080x1920 (9:16), [30] fps. Never mix frame rates in one project. - Graphics safe area: keep text inside the central 90% of width and height (5% margin each side, following EBU R 95 graphics safe). Action safe: 93%. - 9:16 extra rule: no text in the bottom 20% or the right 12% (app buttons and captions sit there). - Grid: 12 columns, gutter 24 px at 1920 wide. Left align titles to column 1 by default. ## 2. Color | Role | Token | Hex | |---|---|---| | Background dark | bg-dark | [#111111] | | Background light | bg-light | [#F5F3EE] | | Text on dark | ink-on-dark | [#F5F3EE] | | Text on light | ink-on-light | [#141413] | | Accent | accent | [#E5484D] | | Muted | muted | [#8A877F] | - One accent per frame. Accent marks the single most important word, number or shape. - Text contrast at least 4.5:1 against what is behind it. Over footage, add a 25% black shadow or a box. - No neon gradients, no rainbow palettes. ## 3. Type - Display: [typeface], weight 700, tracking -2%, line height 1.0. - Text: [typeface], weight 400 to 500, tracking 0, line height 1.25. - Scale at 1080 tall (multiply by 1.0 for 9:16 width 1080): | Token | px | Use | |---|---|---| | t-hero | 120 | One word or short title | | t-title | 72 | Section titles | | t-sub | 44 | Subtitles, lower third name | | t-body | 32 | Lower third role, labels | | t-small | 24 | Credits, sources. Never smaller | - Max 7 words per line on screen. Max 2 lines per graphic. ## 4. Easing | Token | Use | CSS / Remotion | After Effects | |---|---|---|---| | ease-out | Anything entering | cubic-bezier(0.16, 1, 0.3, 1) | outgoing influence 0%, incoming 85% | | ease-in | Anything leaving | cubic-bezier(0.7, 0, 0.84, 0) | outgoing 85%, incoming 0% | | ease-in-out | Moves on screen | cubic-bezier(0.65, 0, 0.35, 1) | 60% / 60% | | spring | Playful pops (Energy 6+) | spring({damping: 200}) for no bounce, damping 12 for a small bounce | Overshoot expression, max 4% | - Never linear for position or scale. Linear is only for constant drifts and tickers. ## 5. Durations (frames at 30 fps) | Token | Frames | Use | |---|---|---| | d-xs | 6 | Pops, small UI | | d-s | 10 | Text entrances, wipes | | d-m | 15 | Panels, lower thirds in | | d-l | 24 | Big title moves, transitions | | d-hold-min | 45 | Minimum time any text stays fully visible | - Exits are about 30% faster than entrances. - Stagger related items by 3 to 4 frames. - Reading time: hold text at least 0.3 s per word, never under 1.5 s. ## 6. Components - Title card: t-hero or t-title, centered or column 1, accent underline optional. - Lower third: name t-sub, role t-body at 70% opacity, 4 px accent bar, bottom left inside safe area. - Caption: see the AgentCut caption system. - Transition: hard cut first. Allowed extras: 10 frame wipe in accent color, 15 frame crossfade for time jumps. ## 7. Never - Drop shadows heavier than 30% opacity, bevels, lens flares, 3D extrusions. - More than two typefaces. - Text touching the frame edge. - Animating every element at once.
```
# CAPTIONS.md: Caption and subtitle style system

Two modes. Pick one per video and say which in the job.

## Mode A: Subtitles (accessibility, long form, client work)
- Max 42 characters per line, max 2 lines.
- Reading speed: max 20 characters per second for adult viewers.
- Duration: min 0.83 s (20 frames at 24 fps), max 7 s.
- Gap between captions: at least 2 frames.
- Position: bottom center inside title safe. Move to top only when it would cover burned in text or a face.
- Style: [sans serif], white, 2 px black outline or a 60% black box, no animation.
- Line breaks: after punctuation, before conjunctions and prepositions. Never split a name, a number and its unit, or an article and its noun.
- Include [MUSIC] and speaker labels only when the speaker is off screen or unclear.
- Spelling: use the term list below exactly.
```
Design systems
Caption and subtitle style system
Give it to Claude, an FFmpeg skill or your caption tool so every video gets captions that are readable, consistent and on brand

DESIGN.mdCaptionsFFmpegCapCut

.md Open
# CAPTIONS.md: Caption and subtitle style system Two modes. Pick one per video and say which in the job. ## Mode A: Subtitles (accessibility, long form, client work) - Max 42 characters per line, max 2 lines. - Reading speed: max 20 characters per second for adult viewers. - Duration: min 0.83 s (20 frames at 24 fps), max 7 s. - Gap between captions: at least 2 frames. - Position: bottom center inside title safe. Move to top only when it would cover burned in text or a face. - Style: [sans serif], white, 2 px black outline or a 60% black box, no animation. - Line breaks: after punctuation, before conjunctions and prepositions. Never split a name, a number and its unit, or an article and its noun. - Include [MUSIC] and speaker labels only when the speaker is off screen or unclear. - Spelling: use the term list below exactly. ## Mode B: Social captions (Shorts, Reels, TikTok) - 1 to 4 words at a time, one line, max 28 characters. - Size: 7 to 10% of frame height on 1080x1920. - Position: center or just below center. Never in the bottom 20% or the right 12% of the frame. - Style: heavy weight [typeface], [white] fill, 6 to 10 px dark outline, active word in [accent #FFE600]. - Timing: word appears 1 to 2 frames after it starts in the audio. Never before. - Motion: entrance pop 90% to 100% scale over 4 frames, or none. Choose one and keep it for the whole video. - Emphasis: max one highlighted word per caption. Numbers and names first. ## Shared rules - Never change what the speaker said, except removing filler words (um, uh) in Mode B when asked. - Keep captions off faces and off on screen text. - Deliver the caption file ([SRT / VTT / ASS]) next to any burned in version. ## Term list | Spoken | Write | |---|---| | [agent cut] | [AgentCut] | | [resolve] | [DaVinci Resolve] | | [add yours] | |
```
# THUMBNAILS.md: YouTube thumbnail system

## Canvas
- 1280x720 px, 16:9 (YouTube's recommended size). Export JPG or PNG.
- Design for the smallest place it shows: check it at 168x94 px. If you cannot read it there, it fails.
- Keep the bottom right 15% free of important content (the video length badge sits there).

## Layout (pick one per video, keep it for the series)
1. Face + 3 words: face on the right third, looking at the text or the viewer, text on the left two thirds.
2. Before / after: split down the middle, left "before", right "after", arrow or line between.
3. Object hero: one big object or screenshot, slightly rotated, text top left.
- One focal point. The eye should land in under a second.

## Text
```
Design systems
YouTube thumbnail system
Brief Claude, a designer or an image tool so every thumbnail in a series is readable at phone size and recognizably yours

DESIGN.mdYouTubeThumbnailsPhotoshop

.md Open
# THUMBNAILS.md: YouTube thumbnail system ## Canvas - 1280x720 px, 16:9 (YouTube's recommended size). Export JPG or PNG. - Design for the smallest place it shows: check it at 168x94 px. If you cannot read it there, it fails. - Keep the bottom right 15% free of important content (the video length badge sits there). ## Layout (pick one per video, keep it for the series) 1. Face + 3 words: face on the right third, looking at the text or the viewer, text on the left two thirds. 2. Before / after: split down the middle, left "before", right "after", arrow or line between. 3. Object hero: one big object or screenshot, slightly rotated, text top left. - One focal point. The eye should land in under a second. ## Text - Max 4 words. Never repeat the title, add to it. - Heavy condensed or grotesk typeface: [typeface], all caps or title case, one style for the series. - Size: cap height at least 12% of the thumbnail height. - White or [brand color] with a dark stroke or a solid block behind it. ## Color - Background contrasts with YouTube's white and dark modes: avoid pure white and pure black backgrounds. - One dominant color plus one accent [#HEX]. Faces stay natural. - Push saturation and contrast slightly more than in the video, but skin must still look like skin. ## Faces and real images - Real photos or real screenshots only. Clear emotion that matches the video (curious, surprised, focused). No fake expressions. - Cut out the subject cleanly and add a 4 to 8 px light outline to separate it from the background. ## Series rules - Same font, same text position and same accent color across the series so returning viewers recognize it. - Keep a template file with locked layers for background, subject, text and logo. ## Never - Misleading images or claims the video does not deliver. - More than 2 colors in the text. - Small logos or watermarks that compete with the subject.
```
# SHORTS.md: Social shorts template system

## Canvas
- 1080x1920, [30] fps, H.264, AAC 48 kHz.
- Length: [20 to 45] s. The first frame must already be interesting.
- Safe zone: keep text and faces out of the top 10%, the bottom 20% and the right 12% (platform UI). Main action lives in the middle 60%.

## Structure
| Part | Time | Rules |
|---|---|---|
| Hook | 0 to 2 s | Strongest line or visual first. Text hook on screen, max 6 words, matches what is said |
| Setup | 2 to 8 s | Why this matters, one sentence |
| Body | 8 s to end minus 4 s | One idea per 3 to 5 seconds. Cut or change framing at least every 3 s |
| Payoff | last 4 s | Answer the hook. End on a finished sentence |
```
Design systems
Social shorts template system (9:16)
You make Shorts, Reels or TikToks in series and want Claude Code, Remotion or CapCut to follow one structure for hook, captions, B roll and end card

DESIGN.mdShortsRemotionCapCut

.md Open
# SHORTS.md: Social shorts template system ## Canvas - 1080x1920, [30] fps, H.264, AAC 48 kHz. - Length: [20 to 45] s. The first frame must already be interesting. - Safe zone: keep text and faces out of the top 10%, the bottom 20% and the right 12% (platform UI). Main action lives in the middle 60%. ## Structure | Part | Time | Rules | |---|---|---| | Hook | 0 to 2 s | Strongest line or visual first. Text hook on screen, max 6 words, matches what is said | | Setup | 2 to 8 s | Why this matters, one sentence | | Body | 8 s to end minus 4 s | One idea per 3 to 5 seconds. Cut or change framing at least every 3 s | | Payoff | last 4 s | Answer the hook. End on a finished sentence | | Loop | last frame | Optional: last line flows back into the first | ## Framing - Speaker: eyes on the upper third line, face never cut by captions. - Punch ins: 110% to 120% zoom on emphasis, hard cut, no slow zooms on every line. - B roll and screenshots: full width, top half of the frame, speaker can stay in the bottom half (split layout). ## Captions - Use CAPTIONS.md Mode B. ## Graphics - Hook text: [typeface] heavy, 72 to 96 px, [white on accent block]. - Progress bar (optional): 6 px tall at the very top, accent color. - No end card longer than 1 second. No "like and subscribe" text unless I ask. ## Audio - Voice around -14 LUFS integrated, music ducked 12 to 18 dB under voice. - No silence longer than 0.4 s unless it is a deliberate beat. ## Files - Name: [series]_[number]_[3 word slug].mp4 - Deliver with: the caption file, the hook text, a suggested title and the source timecodes.
```
# TITLES.md: Titles and lower thirds system

## Card types
| Type | Content | Position | Hold |
|---|---|---|---|
| Name strap | Name + role | Bottom left, safe area | 4 to 6 s, first appearance only |
| Location | Place, city | Top left | 3 s |
| Date or time jump | "Three months later" | Center | 2.5 s |
| Chapter | Number + title | Center or left column | 3 s |
| Source | "Source: [name]" | Bottom right, small | As long as the claim is on screen |

## Type
- Name: [typeface] Semibold, 44 px at 1080 tall.
- Role: same typeface Regular, 30 px, 75% opacity.
```
Design systems
Titles and lower thirds system for interviews
Documentaries, corporate interviews and podcasts with many speakers, where every name, title and location card has to match

DESIGN.mdLower thirdsAfter EffectsPremiere

.md Open
# TITLES.md: Titles and lower thirds system ## Card types | Type | Content | Position | Hold | |---|---|---|---| | Name strap | Name + role | Bottom left, safe area | 4 to 6 s, first appearance only | | Location | Place, city | Top left | 3 s | | Date or time jump | "Three months later" | Center | 2.5 s | | Chapter | Number + title | Center or left column | 3 s | | Source | "Source: [name]" | Bottom right, small | As long as the claim is on screen | ## Type - Name: [typeface] Semibold, 44 px at 1080 tall. - Role: same typeface Regular, 30 px, 75% opacity. - Chapter titles: [display typeface or serif], 72 px. - All caps only for short labels (LOCATION, CHAPTER 2), never for names. ## Layout - Left edge aligned to 5% of width for every card. Bottom edge at 10% of height for name straps. - Accent bar: [4] px wide, [accent #HEX], height equals the text block. - Over busy footage: box at [#111111] 80% opacity, 16 px padding. ## Motion - In: bar wipes 8 frames, name 12 frames ease out with a 20 px slide, role follows 4 frames later. - Out: 8 frames ease in, all elements together. - Same timing for every card type. No exceptions per speaker. ## Content rules - Show each person's name strap the first time they speak, and again only after a long absence. - Roles: short and how the person wants to be described. Confirm spelling with the client list. - Source cards for every number or claim that is not the speaker's own. ## Speaker list | Name | Role | Pronunciation note | |---|---|---| | [Name] | [Role] | |
```
# EXPLAINER.md: Explainer and data animation system

## Principles
- One idea per scene. One chart per scene.
- Every number on screen comes from the source file. If a number is missing, show [placeholder], never invent it.
- Show the source on screen, small, bottom right, whenever a number appears.

## Scene timing
- Each scene: 4 to 8 seconds. Build 1 to 1.5 s, hold at least 2 s, exit 0.5 s.
- Numbers count up over 1 s with ease out, then hold the final value.
- Narration leads, animation follows: the visual appears on the word, not before.

## Charts
- Bar charts start at zero. Always.
```
Design systems
Explainer and data animation system
Animated charts and number explainers made with Claude Motion, Remotion or After Effects, where clarity and honest numbers matter more than flash

DESIGN.mdClaude MotionRemotionCharts

.md Open
# EXPLAINER.md: Explainer and data animation system ## Principles - One idea per scene. One chart per scene. - Every number on screen comes from the source file. If a number is missing, show [placeholder], never invent it. - Show the source on screen, small, bottom right, whenever a number appears. ## Scene timing - Each scene: 4 to 8 seconds. Build 1 to 1.5 s, hold at least 2 s, exit 0.5 s. - Numbers count up over 1 s with ease out, then hold the final value. - Narration leads, animation follows: the visual appears on the word, not before. ## Charts - Bar charts start at zero. Always. - Max 6 bars or 4 lines per chart. Group the rest as "Other". - Highlight one data point in the accent color, everything else in muted gray. - Labels directly on the bars or line ends, no legends when possible. - Axis labels and units always visible. Round to what matters (18%, not 18.27%). - Bars grow from the baseline with a 3 frame stagger, left to right. ## Type and color - Use the motion brand system (DESIGN.md) for fonts, colors and easing. - Numbers use tabular figures so they do not jitter while counting. - Big number scenes: number at t-hero size, label under it at t-body. ## Structure for a 30 to 60 s explainer 1. Hook: the single most surprising number or claim. 2. Context: what we are measuring and since when. 3. Three beats: one chart or diagram each. 4. Takeaway: one sentence, held still for a voiceover. ## Never - 3D pie charts, dual axes, truncated axes, animated gridlines that distract. - Stock icons for every word. Use an icon only when it explains faster than text.

The AgentCut weekly

New AI connectors for After Effects, Premiere, Resolve and CapCut, tested setup notes, and what broke after app updates. One email a week.

Sources and credit

More in Design systems

Motion graphics brand system

Caption and subtitle style system

YouTube thumbnail system

Social shorts template system (9:16)

Titles and lower thirds system for interviews

Explainer and data animation system

The AgentCut weekly