Hyperframes Composition

HyperFrames Composition

Use this skill when creating or editing the source composition for a deterministic rendered video.

Boundary

• Write HTML/CSS/JS composition source for HyperFrames.
• Do not call AI image/video generation APIs.
• Use ai-media-to-hyperframes when generated assets are inputs.
• Keep exact visible text in source files so rerenders are reproducible.

Composition Plan

Before coding, decide:

• output format: width, height, aspect ratio, fps, duration
• channel: short vertical, square social, landscape explainer, internal report, product demo
• scenes: id, duration, visual goal, text, media, data, animation
• transitions: cut, fade, slide, zoom, wipe, scroll, chart morph
• typography and safe margins
• required subtitles or lower thirds
• assets and data files

Authoring Rules

• Use semantic scene ids and stable asset paths.
• Keep animation timing explicit; avoid hidden timing based on real wall-clock behavior.
• Prefer CSS/GSAP/WAAPI timing that can be reasoned about frame by frame.
• Keep text legible on the target viewport; do not rely on viewport-scaled font tricks.
• Do not embed remote media when local assets can be stored under docs/videos/assets/.
• Keep scene data in structured JSON or JS objects when the video is data-driven.

Output

Return:

• project path
• composition files changed
• scene timeline
• preview command
• render command
• assets required
• QC risks