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.