motion-graphics

Generates short design-led motion graphics as GSAP-driven HTML compositions rendered to MP4 or transparent overlays.

13|17|Updated Jan 30, 2025
One-click install
npx skills add https://github.com/CodeWithSally/CodeWithSally-Apex-English --skill motion-graphics-codewithsally
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: motion-graphics
Source: https://github.com/CodeWithSally/CodeWithSally-Apex-English/tree/main/Sessions/ClaudeCode/Session007/.agents/skills/motion-graphics
Command: npx skills add https://github.com/CodeWithSally/CodeWithSally-Apex-English --skill motion-graphics-codewithsally

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? Producing short motion graphics (kinetic typography, stat count-ups, chart reveals, logo stings, map animations, animated tweets or news cards) normally requires manual After Effects work; this Skill automates the full pipeline from intent classification through asset sourcing, composition building, 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), then plans a shot around resolved assets. - Reuse-first composition: Builds HyperFrames HTML compositions by composing catalog blocks and GSAP animation rules on a single paused, seek-safe timeline, with lint/check gates and proof snapshots before rendering. - Grounding and basemap tooling: Ships a grid-based image localization protocol (locate.mjs) for precise annotation placement and a MapLibre bake pipeline for deterministic satellite map shots. - Use Case: Ask for a 6-second animated tweet card or a stat count-up video; the Skill plans the shot, sources any needed assets, builds the composition, verifies it with snapshots, and renders an MP4 after your approval. ## Quick Start Create a 6-second kinetic typography motion graphic that slams the phrase "Ship it Friday" onto a dark 9:16 canvas 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 from a short phrase?

Describe the phrase and style; the Skill classifies it as kinetic-type, picks a caption block like kinetic-slam or neon-glow, customizes words, palette, and timing, then verifies and renders an MP4 after your approval.

How do I animate a map that zooms to a real location?

The maps category offers a vector lane using D3 and TopoJSON for stylized regions, or a basemap lane that bakes real satellite tiles via MapLibre into a deterministic MP4 with geo-aligned SVG border and label overlays.

What tools are required to render motion graphics with this Skill?

You need Node.js and ffmpeg installed, plus the HyperFrames CLI via npx. macOS Apple Silicon or Linux x64 is supported, and an optional Gemini API key enables image generation and detector-based localization.

Can I render a transparent overlay instead of an MP4?

Yes. Set the export to alpha-overlay in the shot plan and render with --format webm or mov to produce a transparent overlay suitable for compositing over other footage.

When should I use a different skill instead of motion-graphics?

Use general-video for anything longer than about 30 seconds, narrated, or multi-scene. If the intent is unclear, the hyperframes router decides the correct route before any building starts.