motion-graphics
๐ฏSkillfrom heygen-com/hyperframes
Installation
npx vibeindex add heygen-com/hyperframes --skill motion-graphicsnpx skills add heygen-com/hyperframes --skill motion-graphics~/.claude/skills/motion-graphics/SKILL.md
Orchestrator skill for creating short, design-led motion graphics with HyperFrames, covering kinetic typography, data visualizations, logo reveals, lower-thirds, social overlays, and animated headlines without narration.
Overview
Motion Graphics is a HyperFrames orchestrator skill specialized for short (typically under 10 seconds, up to 30 seconds), design-led motion pieces where motion itself is the message. It handles kinetic typography, stat/number count-ups, chart and data visualization hits, logo stings, brand lockups, lower-thirds, callouts, social overlays, animated headlines, motion posters, and webpage highlight captures. These pieces render to MP4 or transparent overlay formats and contain no narration, voice-over, or live-action subjects.
Key Features
- Asset-first workflow: decides the asset strategy and sources real material before designing the shot, then designs around available assets
- Structured multi-phase pipeline: init, plan, source, design, build, render, and verify phases with dedicated subagents for direction and composition
- Category-based routing: automatically determines whether a search/sourcing phase is needed (e.g. kinetic-type and charts skip sourcing) or whether external assets must be resolved first
- Automated rendering: outputs to MP4 by default or WebM/MOV for transparent overlays via
hyperframes render - Lint and verification: post-render inspection with automatic repair subagent on failure
- Clear scope boundaries: explicitly routes longer/narrated work to other skills (general-video, website-to-video, faceless-explainer, product-launch-video)
Who is this for?
Creators and developers who need quick, visually impactful motion pieces for social media, presentations, or brand content, where the animation carries the entire message without relying on narration or extended storytelling.
Same repository
heygen-com/hyperframes(52 items)
SKILL.md
More from this repository10
Resolves media needs (background music, sound effects, images, icons) into frozen local files by searching the HeyGen catalog, downloading the best match, and registering it in a manifest. One resolve command handles the full cascade from cache lookup to provider search to file freezing.
Comprehensive animation skill for HyperFrames providing atomic motion rules, multi-phase scene blueprints, scene transitions, motion-design techniques, and seven runtime adapters including GSAP, Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, and TypeGPU.
The foundational technical contract for HyperFrames HTML video compositions, defining data attributes, clip/track structure, sub-compositions, variables, media playback, deterministic rendering rules, and project validation.
Skill for installing blocks and components into Hyperframes projects via the `hyperframes add` command, providing access to 50+ ready-to-use overlays, shader transitions, and data visualizations.
Non-animation creative direction for HyperFrames videos covering design specs, color palettes, typography, narration scripting, beat planning, audio-reactive visuals, composition patterns, and brand/style decisions.
CLI tool for the Hyperframes video rendering framework that provides commands to create, preview, lint, and render HTML-based video compositions to MP4.
Skill for authoring HTML-based video compositions with the Hyperframes framework, covering captions, TTS, audio-reactive animation, and transitions for AI agent-driven video creation.
Creates product launch, SaaS promo, feature reveal, and marketing videos using HyperFrames. Takes a product URL for brand capture or a brief/script, then produces a professionally structured promotional video.
A skill for the HyperFrames open-source video rendering framework that teaches AI agents to write correct HTML-based video compositions and GSAP animations, enabling them to render video from HTML code.
A HyperFrames skill for authoring navigable slideshow compositions with discrete slides, fragment reveals, branching sequences, and hotspot navigation for presentations and pitch decks.