motion-graphics

Generates short design-led motion graphics as MP4 or transparent overlay videos via HyperFrames.

136|8|Updated May 9, 2026
One-click install
npx skills add https://github.com/Sma1lboy/rove --skill motion-graphics-sma1lboy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-graphics
Source: https://github.com/Sma1lboy/rove/tree/main/.claude/skills/motion-graphics
Command: npx skills add https://github.com/Sma1lboy/rove --skill motion-graphics-sma1lboy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer-core, maplibre-gl, topojson-client, gsap, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Creating short motion graphics like kinetic typography, stat count-ups, chart animations, logo stings, and lower-thirds normally requires manual motion-design work in video tools; this Skill automates the full pipeline from planning through rendering. ## Core Features & Use Cases - Category-based planning: Classifies a request into form categories (kinetic-type, stat, charts, logo-reveal, lower-thirds) or search-driven categories (webpage, news, tweet, asset-fusion) and produces a shot-plan.json intermediate representation. - Asset-first sourcing: Searches or generates real assets (images, articles, tweets, maps) before designing the shot, with graceful fallback to asset-free output when providers are unavailable. - Reuse-first composition: Builds HyperFrames HTML compositions by reusing catalog blocks and GSAP motion rules, then renders deterministic MP4 or transparent WebM/MOV overlays with lint/inspect verification and repair. - Use Case: Ask for a 6-second animated headline with a count-up stat for a product launch, and the Skill plans, designs, builds, renders, and verifies a finished video file. ## Quick Start Ask the agent to create a short kinetic typography motion graphic announcing your product launch and render it as an MP4.

Frequently Asked Questions about motion-graphics

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

FAQPage Schema
How do I create a kinetic typography video with AI?▼

Describe the punchy line, quote, or title you want animated and the Skill classifies it as kinetic-type, plans the shot, composes a HyperFrames HTML scene with GSAP motion, and renders an MP4. No manual video editing is required.

How to render a transparent overlay video for social media?▼

Set the export to alpha-overlay in the shot plan and render with the webm or mov format flag instead of MP4. This produces a transparent lower-third, callout, or social overlay you can composite over existing footage.

What video formats and durations does the motion graphics skill support?▼

It renders MP4 by default and WebM or MOV for transparent overlays. Durations are typically under 10 seconds and up to about 30 seconds, at 30 fps, on canvases like 1080x1920, 1920x1080, or 1080x1080.

When should I not use the motion-graphics skill?▼

Avoid it for longer multi-scene brand reels (use general-video), topic explainers (faceless-explainer), PR videos, or adding captions to existing footage. It also cannot use live render-time data or footage it cannot capture.

Why does the render fail or show invisible elements?▼

Common causes are missing root sizing on the stage element or incorrect GSAP opacity gating that breaks under seek-based rendering. The verify step runs hyperframes lint and inspect, then dispatches a repair pass to fix issues in place.