skills.rest
ShawhinT
ShawhinTCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

animation-builder

Generate HTML/CSS/SVG motion graphics and render them into MP4 B-roll overlays.

40|5|Updated Mar 9, 2026
Search Tags:#youtube#animation#playwright#svg#ffmpeg#b-roll#mp4 rendering
One-click install
npx skills add https://github.com/ShawhinT/non-coding-skills --skill animation-builder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-builder
Source: https://github.com/ShawhinT/non-coding-skills/tree/main/animation-builder
Command: npx skills add https://github.com/ShawhinT/non-coding-skills --skill animation-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill removes the time-consuming trial-and-error of manually designing and exporting short motion-graphic B-roll clips for talking-head videos.

Core Features & Use Cases

  • HTML/CSS/SVG motion authoring: Create 1–6 second overlay animations such as icon morphs, label fades, self-drawing diagrams, side-by-side comparisons, and simple flow charts.
  • Deterministic MP4 rendering pipeline: Renders frame-accurate MP4 output using Playwright + ffmpeg so clips can be dropped directly into a video editor.
  • Script-driven clip generation: Supports multiple [ANIMATION] callouts inside pasted video scripts, treating each callout as a separate clip with consistent sequencing conventions.
  • Brand-aware styling hooks: Stays brand-agnostic by default, but can pull colors/typography/voice from a brand-system skill when applicable.

Quick Start

Build a 5-second B-roll animation from your pasted script by telling the AI: "Use the animation callouts in my script to create the required MP4 overlays (default 16:9) and render each clip in order."

Frequently Asked Questions about animation-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render HTML and SVG motion graphics into MP4 B-roll for video edits?▼

You can render HTML and SVG motion graphics into MP4 B-roll by authoring self-contained HTML clips and using a Playwright and ffmpeg pipeline to output frame-accurate video files ready for a video editor.

What is the best way to generate multiple B-roll animation clips from a video script?▼

Generating multiple B-roll clips from a script involves using bracketed animation callouts within the text, treating each callout as a separate clip to create consistent, sequentially numbered MP4 overlays.

How does Playwright achieve frame-accurate MP4 output for CSS animations?▼

Playwright achieves frame-accurate MP4 output by pausing CSS animations and seeking by currentTime, allowing ffmpeg to capture each deterministic frame without relying on real-time browser playback.

Do I need Playwright installed to render short HTML animations to MP4?▼

Yes, Playwright is a required dependency to render short HTML animations to MP4, as it drives the headless browser environment needed to capture frames for the ffmpeg rendering pipeline.

Can I apply custom brand colors and typography to SVG motion graphics before rendering?▼

You can apply custom brand colors and typography to SVG motion graphics using brand-aware styling hooks, which remain agnostic by default but can pull visual systems from an external brand skill.

What types of B-roll animations can I create using HTML and CSS for YouTube videos?▼

Using HTML and CSS for YouTube videos, you can create 1 to 6 second B-roll animations including icon morphs, fade-in labels, self-drawing diagrams, side-by-side comparisons, and simple flow-chart sequences.

Related Skills

Explore More Design & Creative Skills→
het8802het8802
3

hyperframes

Automate HTML-based video composition with GSAP animations and synchronized text and audio.

Community
Advanced
TheMattBermanTheMattBerman
68

scrollclaw-assemble

Assemble UGC campaign assets into a finalized MP4 with A-roll stitching, voice track, and TikTok captions.

Community
Advanced
EstomEstom

brand-guidelines

Apply Anthropic brand colors, typography, and layout to documents and assets.

Community
Advanced
projectedanxprojectedanx
1

hyperframes

Generate MP4 and WebM videos from HTML, CSS, and GSAP animations.

Community
Advanced