skills.rest
Migeking
MigekingCOMMUNITY
Explore all skills by this author →
GitHub

xhs-canvas-video

Renders Canvas and GSAP physics animations into MP4 videos via Playwright and FFmpeg piping.

Updated Aug 23, 2026
Search Tags:#canvas#playwright#ffmpeg#gsap#video rendering#60fps#physics animation
One-click install
npx skills add https://github.com/Migeking/video-production-skills --skill xhs-canvas-video-migeking
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: xhs-canvas-video
Source: https://github.com/Migeking/video-production-skills/tree/main/xhs-canvas-video
Command: npx skills add https://github.com/Migeking/video-production-skills --skill xhs-canvas-video-migeking

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, ffmpeg.

What problem does it solve? Traditional frame-by-frame screenshot pipelines generate thousands of intermediate PNG files on disk, wasting gigabytes of storage and slowing rendering due to heavy disk I/O. This Skill streams Playwright screenshots directly into FFmpeg through an in-memory pipe, producing high-frame-rate physics animation videos with zero intermediate files. ## Core Features & Use Cases - In-Memory Video Synthesis: Playwright captures JPEG frames as bytes and pipes them via stdin to an FFmpeg subprocess using image2pipe, eliminating disk clutter entirely. - Deterministic Frame Control: The HTML page exposes a window.__renderFrameAt(progress) hook so Python drives GSAP timelines and physics simulations frame-by-frame at exact timestamps. - High Frame Rate & Custom Resolution: Supports 60fps output at arbitrary resolutions like 1080x1440, ideal for particle systems, fluid simulations, and ink-wash effects. - Use Case: Create a 60-second vertical video of an ink-wash Tai Chi animation with particle physics at 1080x1440 and 60fps, rendered entirely from code without any video editing software. ## Quick Start Ask the AI to generate a 60fps Canvas physics animation video from an HTML page using the Playwright-to-FFmpeg pipe rendering pipeline.

Frequently Asked Questions about xhs-canvas-video

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

FAQPage Schema
How do I render Canvas animations to video with Python?▼

Use Playwright to screenshot each frame as JPEG bytes and write them to an FFmpeg subprocess via stdin using the image2pipe format. Drive animation progress through a window.__renderFrameAt(progress) function exposed in your HTML page.

How to avoid thousands of screenshot files when rendering video frames?▼

Pipe Playwright screenshot buffers directly into FFmpeg's stdin instead of saving PNG files to disk. This streams frames in memory, eliminating gigabytes of intermediate images and the disk I/O bottleneck that slows capture.

Why does my rendered Canvas video flicker between frames?▼

Flickering happens when animations use Math.random() or Date.now(), producing different values per frame. Replace them with a seeded pseudo-random generator so every frame renders deterministically at its exact timestamp.

Can Playwright render videos at custom resolutions like 1080x1440?▼

Yes, set the Playwright viewport to any width and height, such as 1080x1440 for 3:4 vertical video. FFmpeg receives frames at that resolution and encodes them directly with libx264.

Why is the first frame of my physics animation empty?▼

Physics effects like ink diffusion or falling snow need time to accumulate, so frame zero shows nothing. Run a warm-up loop of around 150 physics updates at time zero before capturing the first frame.

Related Skills

Explore More Design & Creative Skills→
junainfinityjunainfinity

hyperframes

Build HTML-based video compositions with deterministic GSAP timelines and CLI exports.

Community
Advanced
wlzhwlzh
611

youtube-publisher

Upload and manage YouTube videos, captions, thumbnails, and live broadcasts via the YouTube Data API.

Community
Advanced
chuanyue98chuanyue98

space-video-audio

Generates TTS voiceovers, sources royalty-free BGM, and mixes audio into videos with ffmpeg.

Community
Intermediate
heygen-comheygen-com
40.2k

animejs

Convert Anime.js animations into seek-driven sequences registered on window.__hfAnime.

Official
Intermediate