create-motion-graphics-hyperframes

create-motion-graphics-hyperframes

Purpose

Create HTML and GSAP motion graphics, called hyperframes in this repo, and render them to video.

Implementation status: refactored from existing repository skills. The workflow consolidates behavior that previously lived across larger skills.

Sources: ad-studio, ai-ugc-ad-generator.

Extraction notes: HTML templates, design guidelines, render_hyperframe.py.

Inputs

• A clear user brief or source asset path.
• Brand, product, audience, platform, and approval constraints when relevant.
• Required credentials or provider access for any external service used by this skill.
• Output directory or test-run directory where artifacts should be saved.

Workflow

1. Read the brief and confirm all required inputs are present.
2. Create one HTML composition per video or segment with fixed canvas dimensions, usually 720x1280 or 1080x1920 for vertical ads.
3. For deterministic rendering, expose window.renderAt(seconds) in the HTML and make every animation seekable from time alone.
4. Use Playwright or the local browser screenshot pipeline to render one PNG frame per frame interval, then encode frames with FFmpeg.
5. Prefer full-bleed scenes; do not put the primary 9:16 composition inside horizontal storyboard frames.
6. Save HTML, rendered silent MP4, logs, sampled review frames, manifest.json, and verification.md.

Seekable render command shape:

NODE_PATH=<playwright-node-modules> node scripts/render_seekable_hyperframe.js \
  hyperframes/<composition>/index.html \
  clips/<composition>-nosound.mp4 \
  <duration-seconds> --fps 30 --width 720 --height 1280

The renderer should open the HTML, call window.renderAt(t) for each frame, screenshot the fixed viewport, and encode with FFmpeg to H.264.

Output

• Primary artifact or written plan requested by the skill.
• Hyperframes HTML composition.
• Silent rendered MP4 clip.
• Sampled review frames at scene starts and mid-scene points.
• manifest.json for executable runs.
• verification.md or a short verification summary that names the checks performed.
• Any generated source assets, intermediate files, or final exports in the run folder.

Quality Checks

• Required files exist and paths in the manifest are valid.
• HTML declares stable fixed dimensions and deterministic renderAt.
• Rendered video is nonblank, full-bleed, correctly framed, and has the expected duration/fps.
• Sampled frames show no text collisions or horizontal graphics in vertical outputs.
• Output matches the requested format, platform, duration, dimensions, or text structure.
• Brand claims, captions, on-screen text, and CTAs follow the provided brand rules.
• Provider failures, skipped integrations, and human-review needs are explicit.

Failure Modes

• Missing credentials, provider access, or source files.
• Playwright/browser dependencies are unavailable.
• HTML animation depends on wall-clock time and cannot seek deterministically.
• Rendered frames are blank, wrong size, or clipped.
• Output does not match requested dimensions, duration, structure, or brand constraints.
• Generated media contains artifacts, unreadable text, unsafe claims, or caption collisions.
• Scaffolded skills cannot run production workflows until implementation details are added.