skills.rest
Noetfield-Systems
Noetfield-SystemsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

motion-graphics

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

Updated Jun 20, 2026
Search Tags:#data visualization#motion graphics#video generation#gsap#kinetic typography#hyperframes#logo reveal
One-click install
npx skills add https://github.com/Noetfield-Systems/SourceA --skill motion-graphics-noetfield-systems
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-graphics
Source: https://github.com/Noetfield-Systems/SourceA/tree/main/commercial-video-factory/trustfield-storyboard-hf-v1/.agents/skills/motion-graphics
Command: npx skills add https://github.com/Noetfield-Systems/SourceA --skill motion-graphics-noetfield-systems

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Producing short motion graphics like kinetic typography, stat count-ups, chart hits, logo stings, and lower-thirds normally requires manual animation work in video tools; this Skill automates the full pipeline from planning through rendering. ## Core Features & Use Cases - Category-based planning: Classifies a request into form categories (kinetic-type, stat, charts, logo-reveal, lower-thirds) or search-driven categories (webpage, news, tweet, asset-fusion) and drafts a shot-plan.json. - Asset-first sourcing: Resolves real images, articles, tweets, or logos into frozen project-local assets before designing the shot around them. - Reuse-first composition and render: Composes existing HyperFrames catalog blocks with GSAP timelines, then renders to MP4 or transparent WebM/MOV overlays with lint and inspect verification. - Use Case: Ask for a 6-second animated tweet card or a headline count-up stat video, and receive a rendered video file under videos/<project-name>/renders/. ## Quick Start Create a 6-second kinetic typography motion graphic that slams the phrase "Launch Day" onto a dark background 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?▼

Request a short text-driven piece and the skill classifies it as kinetic-type, drafts a shot-plan.json, composes a caption block with a paused GSAP timeline, and renders it to MP4 via npx hyperframes render. Output lands in videos/<project-name>/renders/.

What video formats can this motion graphics skill export?▼

It renders MP4 by default using npx hyperframes render. For transparent overlays it supports WebM or MOV via the --format flag, producing alpha-channel videos suitable for layering over other footage.

Can it animate real tweets, news articles, or web pages?▼

Yes, the search-driven categories (tweet, news, webpage, asset-fusion) first source the real content via media-use search, then design the animation around the captured asset. If search providers are unavailable, the category degrades to an asset-free fallback.

What are the system requirements for rendering motion graphics?▼

It requires macOS Apple Silicon or Linux x64 with Node and ffmpeg installed, plus a one-time npx hyperframes doctor check. Optional API keys like GEMINI_API_KEY enable image generation, with local fallbacks when unset.

When should I not use this motion graphics skill?▼

Avoid it for longer multi-scene or narrated videos, website walkthroughs, topic explainers, product promos, or captioning existing footage; those route to other skills like general-video or embedded-captions. It also cannot use live render-time data or footage it cannot capture.

Related Skills

Explore More Design & Creative Skills→
calesthiocalesthio
55.1k

motion-graphics

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

Community
Advanced
Sma1lboySma1lboy
136

motion-graphics

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

Community
Advanced
robertbr123robertbr123

hyperframes

Generate animated video compositions from HTML with GSAP timelines and FFmpeg.

Community
Advanced
buda-aibuda-ai
25

keyframe-extractor

Detect scene changes and extract keyframes with metadata from video files.

Official
Intermediate