motion-graphics

Plan and build short motion graphics with deterministic GSAP animation and MP4 rendering.

236|31|Updated Jun 29, 2026

Search Tags:#typography #rendering #animation #gsap #motion-graphics #hyperframes #asset-sourcing

Ready to run

npx skills add https://github.com/vibe-motion/auto-motion --skill motion-graphics-vibe-motion

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion-graphics
Source: https://github.com/vibe-motion/auto-motion/tree/main/exampleFolder/.claude/skills/motion-graphics
Command: npx skills add https://github.com/vibe-motion/auto-motion --skill motion-graphics-vibe-motion

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill turns short creative briefs into finished motion graphics, removing the manual work of planning scenes, sourcing assets, assembling animation, and rendering delivery-ready video.

Core Features & Use Cases

Short-form motion design: Build kinetic typography, stat reveals, chart animations, logo stings, lower-thirds, and social overlays.
Asset-first workflows: Plan around real source material, including webpages, news stories, tweets, maps, and image-based asset-fusion shots.
Deterministic production: Reuse catalog blocks, generate seek-safe GSAP timelines, validate with lint and inspection, and render consistent MP4 or transparent overlay outputs.
Use Case: A creator needs a 10-second branded opener with a headline, icon treatment, and final rendered video for social media; this Skill can assemble the whole workflow end to end.

Quick Start

Ask the motion-graphics skill to turn your brief into a short motion graphic and render the final video file.

Frequently Asked Questions about motion-graphics

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create motion graphics from a short brief without manual animation work?▼

To create motion graphics from a brief, this Skill plans scenes, sources assets, assembles deterministic GSAP timelines, and renders delivery-ready video files automatically. It handles kinetic typography, stat reveals, and logo stings end to end.

Can I build kinetic typography and social media overlays using GSAP timelines?▼

Yes, you can build kinetic typography and social overlays using GSAP timelines. The Skill generates seek-safe GSAP animations, validates them with lint and inspection, and renders consistent MP4 or transparent overlay outputs.

Do I need source assets to generate chart animations and lower-thirds?▼

Source assets are optional for generating chart animations and lower-thirds. The Skill plans and builds motion graphics around real source material like webpages, tweets, or maps, but can also assemble workflows from a brief alone.

What is the best way to animate tweet cards and webpage highlights for short-form video?▼

The best way to animate tweet cards and webpage highlights is using an asset-first workflow that catalogs blocks for reuse. This Skill coordinates asset sourcing, applies deterministic animation, and renders project-local MP4 outputs.

Does this motion graphics workflow support transparent video rendering for overlays?▼

Yes, the motion graphics workflow supports transparent video rendering for overlays. It validates assembled GSAP timelines through linting and inspection to render consistent delivery-ready MP4 or transparent overlay files.

Why use deterministic GSAP timelines for rendering logo stings and stat reveals?▼

Deterministic GSAP timelines ensure consistent rendering of logo stings and stat reveals across multiple passes. The Skill reuses catalog blocks and validates animations with lint and inspection to maintain production quality.