MCPInstall

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
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads motion-graphics automatically when relevant.

  3. 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

EffectRate FunctionUse Case
SmoothsmoothGeneral purpose
Dramatic entranceease_out_backPop-in effects
Gentle exitease_in_cubicFade outs
Bouncyease_out_bouncePlayful motion
Snappyease_out_expoQuick, impactful
Naturalease_in_out_sineOrganic movement
LinearlinearConstant 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

  1. Less is more - Restraint makes key moments impactful
  2. Timing is everything - Wrong timing kills good animation
  3. Consistency builds trust - Same style throughout
  4. Sound design matters - Design with audio in mind
  5. 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

View all →

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

View category →

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 & Design1.1M installs

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.

OfficialFrontend & Design1M installs

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.

Frontend & Design999.2K installs

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.

Frontend & Design930.5K installs

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.

OfficialFrontend & Design843.1K installs