hyperframes

name	hyperframes
description	Create, preview, and render HTML-to-MP4 motion graphics with the HyperFrames CLI for product videos, kinetic typography, chart animations, social overlays, website promos, and logo outros.

HyperFrames

Use this skill when the user wants a rendered motion graphic or short video that can be authored as HTML, CSS, and JavaScript, then rendered with HyperFrames.

Good fits

• Product reveals and app showcase videos.
• Kinetic typography, logo outros, and social overlays.
• Animated data charts, route maps, and simple explainer videos.
• Website-to-video promos that capture or recreate a product surface.

Workflow

1. Clarify the aspect ratio, duration, and target output when they are not obvious.
2. Create the composition files inside the active project workspace.
3. Keep source files organized in a dedicated folder such as hyperframes/ or a named project folder.
4. Use hyperframes --help or hyperframes render --help before relying on a specific flag.
5. Render to an .mp4 in the project workspace and report the exact output path.

Commands

hyperframes --help
hyperframes render --help
hyperframes preview --help

Prefer deterministic local assets and explicit durations. Avoid depending on remote media unless the user asked for it or provided the source.