
motion-graphics
Kinetic typography, logo animations, and stylized motion design skill. Triggers when: - User wants text animations or kinetic typography - Request involves logo reveals or title sequences - Content focuses on visual impact over education - User mentions "title", "intro", "logo", "text animation", "kinetic" Capabilities: - Kinetic typography with dynamic text effects - Logo reveals and brand animations - Particle effects and visual flourishes - Modern motion design patterns - Attention-grabbing title sequences
- Installs
- 70
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/rohitg00/manim-video-generator --skill motion-graphics- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads motion-graphics automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Motion Graphics Skill
The Motion Graphics skill creates visually striking animations focused on aesthetic impact, perfect for titles, intros, and attention-grabbing content.
Design Principles
The 4 S's of Motion Graphics
- Style: Consistent visual language throughout
- Surprise: Unexpected movements that delight
- Smoothness: Fluid transitions and easing
- Simplicity: Clean design, no visual clutter
Motion Design Fundamentals
- Anticipation: Small movement before main action
- Follow-through: Elements continue after stopping
- Overshoot: Go past, then settle into place
- Squash & Stretch: Emphasize weight and impact
Rules
rules/kinetic-typography.md
Creating impactful text animations that convey emotion.
rules/timing-and-easing.md
Professional easing curves and timing patterns.
rules/visual-hierarchy.md
Directing attention through size, color, and motion.
rules/brand-consistency.md
Maintaining consistent style across animations.
Templates
Kinetic Typography - Word by Word
from manim import *
class KineticTypography(Scene):
def construct(self):
self.camera.background_color = "#1a1a2e"
words = ["The", "Future", "Is", "NOW"]
colors = [WHITE, BLUE, WHITE, YELLOW]
for word, color in zip(words, colors):
text = Text(word, font_size=96, color=color, weight=BOLD)
# Dramatic entrance
text.scale(0)
self.add(text)
self.play(
text.animate.scale(1),
rate_func=rate_functions.ease_out_back,
run_time=0.4
)
self.wait(0.3)
# Exit with style
self.play(
text.animate.shift(UP * 2).set_opacity(0),
rate_func=rate_functions.ease_in_cubic,
run_time=0.3
)
self.remove(text)
# Final combination
final = Text("THE FUTURE IS NOW", font_size=48, color=GOLD)
self.play(Write(final), run_time=1)
self.play(Indicate(final, scale_factor=1.1, color=WHITE))
Logo Reveal - Particle Assemble
from manim import *
import random
class LogoReveal(Scene):
def construct(self):
self.camera.background_color = "#0a0a0a"
# Create logo text
logo = Text("BRAND", font_size=120, color=WHITE, weight=BOLD)
# Create particles that will form the logo
particles = VGroup()
for _ in range(100):
dot = Dot(
point=[random.uniform(-7, 7), random.uniform(-4, 4), 0],
radius=0.05,
color=random_color()
)
particles.add(dot)
self.add(particles)
# Swirl particles
self.play(
*[Rotating(p, radians=PI * 2, about_point=ORIGIN)
for p in particles],
run_time=1.5,
rate_func=rate_functions.ease_in_out_sine
)
# Converge to logo position
self.play(
FadeOut(particles),
FadeIn(logo, scale=0.5),
run_time=0.8
)
# Glow effect
glow = logo.copy().set_color(BLUE).set_opacity(0.5)
self.play(
glow.animate.scale(1.2).set_opacity(0),
run_time=0.5
)
self.remove(glow)
self.wait()
Title Sequence - Slide & Stack
from manim import *
class TitleSequence(Scene):
def construct(self):
self.camera.background_color = "#16213e"
# Main title
title = Text("EPISODE ONE", font_size=72, color=WHITE)
subtitle = Text("The Beginning", font_size=36, color=BLUE_C)
# Slide in from sides
title.shift(LEFT * 10)
subtitle.shift(RIGHT * 10)
self.add(title, subtitle)
self.play(
title.animate.move_to(UP * 0.5),
subtitle.animate.move_to(DOWN * 0.5),
run_time=0.8,
rate_func=rate_functions.ease_out_cubic
)
# Add decorative lines
line_left = Line(LEFT * 3, LEFT * 0.5, color=GOLD, stroke_width=2)
line_right = Line(RIGHT * 0.5, RIGHT * 3, color=GOLD, stroke_width=2)
lines = VGroup(line_left, line_right).next_to(title, UP, buff=0.3)
self.play(
Create(line_left),
Create(line_right),
run_time=0.5
)
# Fade all together
self.wait(2)
self.play(
FadeOut(VGroup(title, subtitle, lines), shift=UP),
run_time=0.6
)
Text Glitch Effect
from manim import *
class GlitchText(Scene):
def construct(self):
self.camera.background_color = "#000000"
text = Text("GLITCH", font_size=96, color=WHITE, weight=BOLD)
# Create glitch copies
red_copy = text.copy().set_color(RED).shift(LEFT * 0.05 + UP * 0.02)
blue_copy = text.copy().set_color(BLUE).shift(RIGHT * 0.05 + DOWN * 0.02)
self.add(red_copy, blue_copy, text)
# Glitch animation
for _ in range(5):
# Random offset
self.play(
red_copy.animate.shift(RIGHT * 0.1),
blue_copy.animate.shift(LEFT * 0.1),
run_time=0.05
)
self.play(
red_copy.animate.shift(LEFT * 0.1),
blue_copy.animate.shift(RIGHT * 0.1),
run_time=0.05
)
# Settle
self.play(
red_copy.animate.move_to(text.get_center()),
blue_copy.animate.move_to(text.get_center()),
run_time=0.2
)
self.remove(red_copy, blue_copy)
self.wait()
Counter Animation
from manim import *
class CounterAnimation(Scene):
def construct(self):
self.camera.background_color = "#1a1a2e"
# Value tracker
counter = ValueTracker(0)
# Dynamic text
number = always_redraw(lambda: Text(
f"{int(counter.get_value()):,}",
font_size=120,
color=WHITE,
weight=BOLD
))
label = Text("SUBSCRIBERS", font_size=32, color=BLUE_C)
label.next_to(number, DOWN, buff=0.5)
self.add(number, label)
# Animate count
self.play(
counter.animate.set_value(1000000),
run_time=3,
rate_func=rate_functions.ease_out_cubic
)
# Celebration effect
self.play(
Indicate(number, scale_factor=1.2, color=GOLD),
run_time=0.5
)
Easing Functions Reference
| Effect | Rate Function | Use Case |
|---|---|---|
| Smooth | smooth | General purpose |
| Dramatic entrance | ease_out_back | Pop-in effects |
| Gentle exit | ease_in_cubic | Fade outs |
| Bouncy | ease_out_bounce | Playful motion |
| Snappy | ease_out_expo | Quick, impactful |
| Natural | ease_in_out_sine | Organic movement |
| Linear | linear | Constant speed |
Color Palettes
Neon Cyberpunk
NEON_PINK = "#ff00ff"
NEON_BLUE = "#00ffff"
NEON_GREEN = "#00ff00"
DARK_BG = "#0a0a0a"
Corporate Professional
CORP_BLUE = "#0066cc"
CORP_GRAY = "#333333"
CORP_WHITE = "#ffffff"
CORP_ACCENT = "#ff6600"
Minimal Modern
MIN_BLACK = "#1a1a1a"
MIN_WHITE = "#f5f5f5"
MIN_GRAY = "#888888"
MIN_ACCENT = "#3366ff"
Best Practices
- Less is more - Restraint makes key moments impactful
- Timing is everything - Wrong timing kills good animation
- Consistency builds trust - Same style throughout
- Sound design matters - Design with audio in mind
- Test on target platform - Different devices, different experience
FAQ
What does the motion-graphics skill do?
Kinetic typography, logo animations, and stylized motion design skill. Triggers when: - User wants text animations or kinetic typography - Request involves logo reveals or title sequences - Content focuses on visual impact over education - User mentions "title", "intro", "logo", "text animation", "kinetic" Capabilities: - Kinetic typography with dynamic text effects - Logo reveals and brand animations - Particle effects and visual flourishes - Modern motion design patterns - Attention-grabbing title sequences
How do I install motion-graphics?
Run npx skills add https://github.com/rohitg00/manim-video-generator --skill motion-graphics in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/motion-graphics/ (personal) or .claude/skills/motion-graphics/ (project).
Which AI agents can use motion-graphics?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is motion-graphics safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains motion-graphics?
It is published by rohitg00 in rohitg00/manim-video-generator. It has 70 recorded installs.
More from rohitg00/manim-video-generator
math-visualizer
rohitg00/manim-video-generator
Mathematical visualization skill for equations, proofs, and geometric concepts. Triggers when: - User mentions equations, formulas, or mathematical expressions - Request involves mathematical proofs or derivations - Content includes geometric relationships - User mentions LaTeX, calculus, algebra, geometry, trigonometry - Patterns: "equation", "formula", "prove", "derive", "graph", "plot" Capabilities: - LaTeX equation rendering with color-coded components - Function graphing and transformations - Geometric constructions and proofs - 3D mathematical surfaces - Step-by-step derivations with highlights
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.