skills.rest
Sergiotsk
SergiotskCOMMUNITY
Explore all skills by this author →
GitHub

motion-graphics

Generates short design-led motion graphics as MP4 or transparent overlays via HyperFrames compositions.

Updated Aug 25, 2026
Search Tags:#motion graphics#video generation#gsap#kinetic typography#hyperframes#mp4 render#animated maps
One-click install
npx skills add https://github.com/Sergiotsk/Interstellar --skill motion-graphics-sergiotsk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-graphics
Source: https://github.com/Sergiotsk/Interstellar/tree/main/.agents/skills/motion-graphics
Command: npx skills add https://github.com/Sergiotsk/Interstellar --skill motion-graphics-sergiotsk

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 hits, logo stings, map animations) normally requires manual animation work in video tools; 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) and drafts a shot-plan.json contract. - Asset-first sourcing: Resolves real images, articles, tweets, or baked map basemaps into frozen project-local assets before designing the shot around them. - Reuse-first building: Composes existing HyperFrames catalog blocks and GSAP animation rules into a deterministic paused-timeline HTML composition, then lints, checks, snapshots, and renders to MP4 or transparent WebM/MOV. - Use Case: Ask for a 6-second animated map zooming into Brazil and Argentina with highlighted borders, and the Skill bakes a satellite basemap, projects country borders to screen coordinates, animates the SVG overlay, and renders the final video. ## Quick Start Ask the agent to create a short motion graphic, for example: make a 6-second kinetic typography video of the quote "Do not go gentle into that good night" 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 line or quote you want animated; the Director classifies it as kinetic-type, picks a caption block from the catalog, and the Builder composes it into a GSAP timeline. After lint, check, and proof snapshots pass, you approve and it renders to MP4.

What video formats can this motion graphics workflow render?▼

It renders to MP4 by default using hyperframes render. For transparent overlays, pass --format webm or mov, which suits lower-thirds and social overlays composited over other footage.

Can I animate a real map with satellite imagery in a video?▼

Yes, the maps category has a basemap lane that bakes MapLibre satellite or dark tiles into a deterministic MP4 via headless Chrome, then animates geo-aligned SVG borders, fills, and labels on top. A vector lane using D3 and TopoJSON covers stylized maps without real imagery.

Does the motion graphics skill require an API key?▼

No key is required for pure code and text categories like kinetic-type or charts. GEMINI_API_KEY or GOOGLE_API_KEY is only needed for image generation and real-asset search in categories like news, tweet, webpage, and asset-fusion; without it those degrade to asset-free fallbacks.

Why is my rendered animation frozen or showing elements at the wrong time?▼

The composition must use one paused GSAP timeline registered on window.__timelines with tl.seek(0), never tl.play(). Delayed elements need explicit fromTo with autoAlpha gating, and count-ups must tween a proxy via onUpdate because bare seeks freeze wall-clock counters.

When should I use general-video instead of motion-graphics?▼

Use general-video when the piece is longer than roughly 30 seconds, has narration, or spans multiple scenes. Motion-graphics is scoped to short, design-led, unnarrated clips where the motion itself carries the message.

Related Skills

Explore More Design & Creative Skills→
AnderHonoratoAnderHonorato

figma

Import Figma assets, tokens, components, and motion into HyperFrames video compositions.

Community
Advanced
openaiopenai
5.3k

remotion-render

Render Remotion videos and stills via CLI with transparent ProRes and WebM output options.

Official
Basic
chmonitorchmonitor
255

media-use

Resolve media asset requests into cached local file paths with metadata tracking.

Official
Advanced
jacketlong23jacketlong23

remotion-video

Create videos programmatically with React components and Remotion.

Community
Advanced