HyperFrames

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.

Open Design integration (load-bearing for this surface)

When this skill runs inside Open Design (i.e. $OD_PROJECT_DIR is set), the output flow is fixed: only the rendered .mp4 should land in the project root. Composition source files (hyperframes.json, meta.json, index.html, assets) belong inside a hidden cache directory so they don't clutter the user's FileViewer or the chat's "produced files" chips.

Render workflow inside OD — fast path:

For most OD requests ("test video", "5s product reveal", "demo clip"), do NOT write the composition HTML from scratch. Use HyperFrames' built-in scaffold and edit only what the prompt actually changes. The "author from scratch" path costs minutes of model output and silent chat-tool time; the scaffold path costs seconds.