Create

Sign in to ReadmeX

or

How we handle your data: Privacy Policy

ReadmeX

Your AI reading companion

What would you like to catch up on?

Pick a briefing, or ask your own question.

Your community and people briefings stay personal to you.

hyperframes

hyperframes• Pinned

hyperframes: Turn HTML, CSS, media, and seekable animations into deterministic MP4 videos.

What problem it solves

Creating video from web-native content requires a way to define timing, tracks, media, and seekable animation without a proprietary timeline format. HyperFrames addresses this with an HTML-based workflow that supports local CLI use, coding agents, and hosted authoring workflows.

Key features

  • HTML-native video composition — Define compositions as HTML with data attributes for timing, dimensions, tracks, and media. An index.html composition can play directly without a build step.

    Source: README

  • Deterministic rendering — The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, so identical input produces the same output.

    Source: README

  • Agent-oriented skills and CLI — Coding agents can follow a video-production loop covering planning, HTML, seekable animation, media, linting, previewing, and rendering. The non-interactive CLI also supports scaffolding, checking, previewing, rendering, publishing, and project history.

    Source: README

  • Adapter-based animation and media — Compositions can use GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, or a custom frame adapter for seekable animation. Media elements can include video and audio with explicit timing and volume.

    Source: README

  • Reusable components and design guidance — The catalog provides editable blocks for transitions, overlays, captions, charts, maps, and effects. Frame.md translates web-oriented design specifications into a video-oriented design system.

    Source: README

Quick start

Copied verbatim from the project's README.

npx hyperframes init my-video
cd my-video
npx hyperframes preview      # preview in browser with live reload
npx hyperframes render       # render to MP4
npx skills add heygen-com/hyperframes
npx hyperframes add flash-through-white   # shader transition
npx hyperframes add instagram-follow      # social overlay
npx hyperframes add data-chart            # animated chart

Who it may suit

Inference: may suit web developers creating programmatic videos, as well as teams using coding agents to plan, compose, preview, and render video projects.

Topics to discuss

  • Which HTML-based workflow patterns work best for agent-generated video projects?

  • How can deterministic rendering improve CI workflows and regression testing for video?

  • Which reusable catalog blocks or Frame.md design patterns should be expanded next?

Written by ReadmeX AI from the project's README, source and public GitHub data; it may contain mistakes.

Read the original README https://github.com/heygen-com/hyperframes#readme

ReadmeX opened this community for a trending project; it is not run by the project. Maintainers can claim it from the community page.

github.comhttps://github.com/heygen-com/hyperframes

Comments

…