motion-graphics

Orchestrate subagents to plan, source assets, and compose motion graphics.

Updated May 6, 2026
One-click install
npx skills add https://github.com/johan-Rm/agents --skill motion-graphics-johan-rm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-graphics
Source: https://github.com/johan-Rm/agents/tree/main/skills/motion-graphics
Command: npx skills add https://github.com/johan-Rm/agents --skill motion-graphics-johan-rm

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill solves the friction of creating high-quality, design-led motion graphics by automating the end-to-end workflow from planning and asset sourcing to composition and rendering.

Core Features & Use Cases

  • Autonomous Workflow: Orchestrates a multi-phase process including planning, asset resolution, design, and rendering.
  • Versatile Categories: Supports diverse formats like kinetic typography, data visualizations, logo reveals, and asset-fusion overlays.
  • Reuse-First Composition: Leverages a catalog of pre-built HyperFrames blocks to ensure professional quality while maintaining speed.

Quick Start

Run the motion-graphics skill to create a ten-second kinetic typography video for the project named quarterly-results.

Frequently Asked Questions about motion-graphics

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

FAQPage Schema
How do I automate kinetic typography video production for short-form content?▼

Automating kinetic typography video production is achieved by orchestrating subagents for planning, asset sourcing, and composition. This skill autonomously renders short, design-led motion graphics using a reuse-first architecture with HyperFrames for deterministic output.

What's the best way to generate data visualization motion graphics autonomously?▼

To generate data visualization motion graphics autonomously, you can run this skill to orchestrate asset resolution, design, and rendering. It leverages pre-built HyperFrames blocks to ensure professional quality while maintaining speed for short-form visual content.

Does this motion graphics workflow require Node and ffmpeg to render videos?▼

Yes, this motion graphics workflow requires Node, ffmpeg, and puppeteer-core to function. These dependencies provide the necessary environment for orchestrating asset sourcing, composition, and deterministic rendering of the final video output.

Can I use GSAP and maplibre-gl for asset-fusion overlays in video production?▼

Yes, you can use GSAP and maplibre-gl for asset-fusion overlays in video production. This skill supports diverse formats including asset-fusion overlays, utilizing these dependencies to compose and render professional short-form motion graphics.

How do I create a ten-second kinetic typography video for a project named quarterly-results?▼

To create a ten-second kinetic typography video for quarterly-results, run the motion-graphics skill with your project name. The skill will autonomously handle the multi-phase process from planning to rendering for your short-form visual content.

What are the limitations of using a reuse-first architecture with HyperFrames for video rendering?▼

The reuse-first architecture with HyperFrames limits rendering to pre-built composition blocks, ensuring deterministic, high-quality output for short-form visual content. This means highly custom or non-standard animation sequences outside the catalog may not be supported.