hyperframes-video-composition

What it does

Instructs the agent to assemble approved assets (images, clips, narration, music, captions, UI captures, generated assets, or brand material) into a finished HyperFrames video. It treats HyperFrames as a production composition runtime, where the agent owns intake, frame/design spec, media custody, timing, QA, provenance, and handoff.

How it works

• Guides intake and design of a frame before coding, specifying canvas properties (width, height, fps, aspect ratio, safe regions, bleed).
• Defines a visual system, typography, layout grammar, scene density, motion grammar, and audio grammar for the composition.
• Requires planning scene architecture as timed scenes/layers with scene_id, start, duration, end, purpose, visual, text, media, audio, animation, accessibility, qa.
• Specifies HyperFrames authoring contract details: HTML-based timing via data-start, data-duration, data-track-index; ensure class="clip" on timed elements; enable preview via npx hyperframes preview and render via npx hyperframes render.
• Describes media import and custody with an asset manifest containing asset_id, type, source, path, rights_status, generation_metadata, transformations, technical, scene_links, provenance; includes empirical checks like ffprobe and local asset paths.
• Covers timeline, duration, aspect, and fps decisions, frame-bound conversion, and safe-area considerations with production heuristics.
• Outlines animation principles (entrance, emphasis, transition, exit) and limits on motion (no random seeds, no infinite loops, no distracting motion).
• Details typography, captions, accessibility per WCAG 2.2, including caption strategies (open vs sidecar), contrast requirements, and flashing limits.

When to use it

Use when the job is to assemble images, clips, narration, music, captions, UI captures, generated assets, or brand material into a finished HyperFrames video. Apply when you need to plan frames, enforce media custody, timing, QA, provenance, and delivery handoff as part of a production workflow.

What it can touch

• Asset manifest fields: asset_id, type, source, path, rights_status, generation_metadata, transformations, technical, scene_links, provenance.
• HTML/CSS/JS HyperFrames composition structure, including examples with data-start, data-duration, data-track-index attributes and class="clip" timings.
• Tools: npx hyperframes (for preview and render) and ffprobe for asset checks.

Caveats

• Volatile facts note: HyperFrames CLI commands, package names, Node/FFmpeg requirements, registry block names, cloud render support, browser capture behavior, platform delivery specs, and social platform safe areas can change. Re-check installed package docs, npx hyperframes --help, npx hyperframes doctor, and target-platform delivery docs at production time.
• Production stance emphasizes separating documented facts, empirical observations, and production heuristics; escalate rights/licensing and provenance concerns as needed.