hyperframes-motion-graphics

Overview

This skill produces motion-graphics sequences — animated titles, transitions, and kinetic elements — as HyperFrames compositions. Use it for brand stings, intro cards, or animated data callouts. It renders frame-accurate MP4 output from the HTML/CSS animation timeline.

HyperFrames — Motion Graphics

Short, unnarrated, design-led motion graphics (~under 10s). Kinetic type, stat hits, logo stings, lower-thirds, animated headlines. MP4 or transparent overlay.

When to Use

• User wants a kinetic type animation (text that moves with energy)
• User wants a stat/chart hit (animated number or data visualization)
• User wants a logo sting (short brand animation, <5s)
• User wants a lower-third (news-style name/title overlay)
• User wants an animated tweet/headline (social media motion graphic)
• User wants a transparent overlay (video overlay with alpha channel)

When NOT to Use

• User wants a full video with narration (use hyperframes-product-launch-video)
• User wants an explainer with voiceover (use hyperframes-faceless-explainer)
• User wants a talking-head video (use hyperframes-embedded-captions)
• User wants a product showcase (use hyperframes-product-launch-video)

Workflow

1 · Plan (≤10s total)

• Single concept: one stat, one logo, one headline
• Budget: entry ≈ 1-2s, hold ≈ 5-7s, exit ≈ 1-2s
• Pick a transition vocabulary: only 2-3 inter-scene transitions per film (repeat them)

2 · Author seek-safe keyframes

All animations must be seekable — same frame at same time, every render. No wall-clock dependencies.

GSAP (recommended):

const tl = gsap.timeline({ paused: true });
tl.fromTo("#stat-number", { scale: 0.5, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.8, ease: "back.out(1.7)" }, 0);
tl.to("#stat-number", { scale: 1.1, duration: 0.3, ease: "power2.out" }, 1.0);
window.__timelines = { main: tl };

CSS keyframes:

@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.stat { animation: countUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }