render-video-overlay-track

Render reusable overlay components as standalone HTML previews or PNG frames. The component system is designed for overlays that sit on top of existing video footage: product proof cards, fitness/stat HUDs, streak cards, giant title overlays, native notifications, glass stacks, browser chrome, and title/play overlays.

Quick Start

cd skills/atoms/overlays/render-video-overlay-track
npm install
npx playwright install chromium
npm test
npm run render:previews

Outputs land in previews/ by default, one PNG per registered component.

Workflow