FrameVideo

HTML is the source of truth for video. A composition is an HTML file with data-* attributes for timing, a GSAP timeline for animation, and CSS for appearance. The framework handles clip visibility, media playback, and timeline sync.

When To Use

Use this skill for any FrameVideo composition task. This is the largest skill (1100+ lines) — use the navigation below to find what you need quickly.

🚀 New to FrameVideo?

1. Read "Quick Start" (line 46) — minimal working example
2. Read "Core Concepts" (line 95) — data attributes, timing, timeline contract
3. Try the example, then come back for specific features

🎯 Looking for something specific?

Layout & Structure:

• Safe areas & margins → "Layout & Safe Areas" (line 180)
• Multi-scene compositions → "Scene Transitions" (line 450) [MANDATORY for multi-scene]
• Composition architecture → "Composition Structure" (line 120)