motion-graphics

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

Updated Jul 16, 2026
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill motion-graphics-x-manist
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: motion-graphics
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/motion-graphics
Command: npx skills add https://github.com/X-manist/Cohmira --skill motion-graphics-x-manist

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; this Skill automates the full pipeline from planning through asset sourcing, composition, rendering, and verification. ## Core Features & Use Cases - Category-based planning: Classifies requests into form categories (kinetic-type, stat, charts, logo-reveal, lower-thirds) or search-driven categories (webpage, news, tweet, asset-fusion) and builds a shot-plan.json contract. - Asset-first sourcing: Resolves real images, articles, tweets, and logos into frozen project-local assets before designing the shot around them. - Reuse-first composition: Composes existing HyperFrames catalog blocks and GSAP animation rules instead of hand-authoring, then renders to MP4 or transparent WebM/MOV overlays. - Use Case: Ask for a 6-second animated headline with a count-up stat for a social post; the Skill plans the shot, builds the composition, renders videos/<project>/renders/video.mp4, and runs lint/inspect verification with automatic repair. ## Quick Start Create a 6-second kinetic typography motion graphic that animates the headline "Q3 revenue up 42%" with a count-up stat 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 HyperFrames?

Describe the punchy line or quote you want animated; the Director subagent classifies it as kinetic-type, picks a caption block like kinetic-slam or neon-glow, and the Builder composes and renders it to MP4. No asset sourcing is needed for text-only pieces.

What video formats can this motion graphics pipeline render?

It renders MP4 by default via npx hyperframes render. For transparent overlays, pass --format webm or mov with an alpha-overlay export setting, producing a video with a transparent background.

Can I animate a real tweet or news article into a video?

Yes, the search-driven categories handle this: tweet produces an animated tweet card, and news creates an article-highlight with headline reveal and keyword callouts. The source phase searches and freezes the real content into local assets first.

What are the system requirements for rendering motion graphics?

You need macOS Apple Silicon or Linux x64 with Node.js and ffmpeg installed, plus npx hyperframes doctor run once. Optional API keys like GEMINI_API_KEY enable image generation and detection, with local fallbacks if unset.

When should I not use this motion graphics skill?

Do not use it for longer multi-scene or narrated videos, website walkthroughs with voice-over, topic explainers, product promos, or captions on existing footage. Those route to general-video, website-to-video, faceless-explainer, or embedded-captions skills instead.