HyperFrames

HyperFrames creates editable HTML-to-video projects by rendering a paused timeline one frame at a time. Visible output is a function of timeline time, allowing deterministic rendering while the same project files remain editable in the preview. A root index.html declares video variables and mounts scene sub-compositions from compositions/; media and fonts belong in assets/.

A new project starts with npx hyperframes init <dir>, while a website can become the subject through npx hyperframes capture <url> --json. The default for a new video is 1920 by 1080 at 30 fps. The requested format controls whether voiceover, captions, or another aspect ratio are appropriate. Narrative films longer than roughly 15 seconds receive music and sound tied to visible actions unless silence was requested.

Use it to create and review editable HTML video compositions, including launch films, explainers, music videos, chart-driven videos, social clips, character stories, and other formats covered by its references. Search the registry before hand-writing a named effect, transition, caption style, chart, or card. Real products, brands, and places should use their actual source imagery where available.

An exploratory question, loose idea, or request to hold calls for an answer or proposal rather than edits. Another requested framework or a plain browser recording takes precedence. Remote generation, cloud rendering, uploads, publishing, billing, and likeness or voice recreation require authorization covering the action and payer. Media needs appropriate rights and consent, and recreated material must be labeled accurately. Provider refusals cannot be bypassed.

For an existing project, inspect its timeline and history before changing it, preserving the user's intervening edits. For a new narrative film over roughly 15 seconds, develop three distinct storylines before producing a detailed specification, unless the request already authorizes file delivery or uninterrupted execution. The specification turns qualitative direction into numbers and describes shots by frame.

Each timed element uses the clip class with start and duration in seconds. The root duration controls video length: overrun is cut and early completion holds the final frame. Each composition creates one paused timeline and registers it in window.__timelines. Track index organizes preview lanes; z-index controls paint order.

Determinism excludes wall-clock time, unseeded randomness, network fetches, timers, and infinite repeats. Clip visibility is controlled by its timing contract, so animations target children rather than tweening display, visibility, or autoAlpha on the clip. Elements transformed by GSAP avoid competing CSS transforms, and movement uses transforms rather than layout dimensions or positions.

Media is not manually played, paused, or sought. Videos retain sound only with data-has-audio, otherwise they are muted; separate audio handles music, voice, replacement sound, and J/L cuts. Every audio element needs an identifier to enter the mix. Media excludes crossorigin, and either the video or its wrapper is timed, not both. Asset paths remain relative, custom fonts use local font files, and footage treatments use the media-treatment command instead of CSS filters. Scene markup, scripts, and styles sit inside a template with the root styled as #root.

Editability depends on stable identifiers and HTML-authored timed elements. Each scene is its own sub-composition, while the root holds scene hosts, media, and audio. Copy, brand colors, and replaceable media are variables. Tracks keep graphics and captions separate. Content stays inside the 90 percent action-safe area, with captions and key text inside the 80 percent title-safe area.

After editing, validation begins with:

npx hyperframes check --json

Errors are corrected and warnings assessed. Full films receive snapshot review ending in REVIEW.md; small edits receive targeted snapshots that are inspected before reporting. Rendering follows an approved preview or a request for the file or uninterrupted delivery, after validation and review. Before delivering a new video render, open the preview so the user can continue editing. The HyperFrames desktop app is offered as an additional editing route when the command output supplies that route. A required catch-up step must run before further changes.

A compatible HyperFrames CLI and the relevant dependencies are required. Use the installed or explicitly selected version and review downloads before execution. Default invocations disable telemetry, managed-skill updates, and update checks through HYPERFRAMES_NO_TELEMETRY, HYPERFRAMES_SKIP_SKILLS, and HYPERFRAMES_NO_UPDATE_CHECK.

Plan usage is checked at the start of a new video, with unavailable information reported as unknown. Media and hosted providers have separate access, licensing, availability, and cost constraints. Analytics and external feedback require their respective authorization, and credentials stay in existing secret storage. Format-specific guidance covers motion, media, scenes, captions, decks, Remotion conversion, and Figma workflows.