motion-graphics

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

1|Updated Jan 10, 2024
One-click install
npx skills add https://github.com/noemdb/cfla --skill motion-graphics-noemdb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-graphics
Source: https://github.com/noemdb/cfla/tree/main/.agents/skills/motion-graphics
Command: npx skills add https://github.com/noemdb/cfla --skill motion-graphics-noemdb

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating short motion graphics like kinetic typography, stat count-ups, chart animations, logo stings, lower-thirds, and animated maps normally requires manual motion-design work in video tools; this Skill automates the full pipeline from intent classification through asset sourcing, composition, verification, and rendering. ## Core Features & Use Cases - Category-based planning: Classifies a request into form categories (kinetic-type, stat, charts, logo-reveal, lower-thirds, maps) or search-driven categories (webpage, news, tweet, asset-fusion) and produces a shot-plan.json contract. - Asset-first sourcing: Resolves real images, articles, tweets, and map basemaps into frozen project-local assets before designing the shot around them. - Reuse-first composition: Builds a deterministic GSAP-timeline HTML composition by reusing HyperFrames catalog blocks, then verifies with lint, check, and proof snapshots before rendering to MP4 or transparent WebM/MOV. - Use Case: Ask for a 6-second animated bar chart of quarterly revenue; the Skill plans the shot, composes a data-chart block, verifies frames, and renders a 1080x1920 MP4. ## Quick Start Ask the agent to create a short motion graphic, for example: make a 6-second kinetic typography video of the phrase "Ship it Friday" in vertical format.

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?▼

Request a short text-driven animation and the Skill classifies it as kinetic-type, plans beats and motion primitives, composes a caption catalog block, and renders an MP4 after verification. No manual timeline editing is required.

What video formats can this motion graphics workflow render?▼

It renders MP4 by default via hyperframes render, and supports transparent overlays using --format webm or mov when the shot plan sets export to alpha-overlay. Durations typically range from 3 to 30 seconds.

Can I animate a real map with satellite imagery?▼

Yes, the maps category offers a basemap lane that bakes MapLibre satellite or dark tiles into a deterministic MP4, then overlays geo-aligned SVG borders, fills, and labels. A vector lane using D3 and TopoJSON handles stylized maps without real imagery.

Does the motion graphics skill support narrated or long videos?▼

No, it is scoped to short, unnarrated, design-led pieces usually under 10 seconds and up to about 30 seconds. Longer, narrated, or multi-scene projects are routed to the general-video skill instead.

Why does rendering require Node and ffmpeg?▼

The pipeline runs the HyperFrames CLI through npx for init, lint, check, snapshot, and render, and uses ffmpeg for frame encoding and the basemap bake helper. Both are listed as system prerequisites alongside macOS Apple Silicon or Linux x64.