hyperframes

HyperFrames is a rendering engine that allows users to define video compositions using standard HTML and CSS. It uses headless Chrome to seek frames and FFmpeg to encode them, ensuring that the same input always produces the same video output. Unlike React-based alternatives, it relies on plain HTML with data attributes for timing and tracks, making it highly accessible for both humans and AI agents. Key capabilities include: - **Agent-Centric Workflow**: Provides a comprehensive set of "skills" (router, creation workflows, and domain skills) that teach AI agents how to plan, write, lint, and render videos. - **Flexible Animation**: Supports various animation runtimes via adapters, including GSAP, Lottie, Three.js, Anime.js, CSS, and WAAPI. - **Comprehensive Tooling**: Includes a CLI for local development, a component catalog for reusable motion blocks, and support for AWS Lambda for distributed rendering. - **Design Integration**: Features "frame.md," a design system translation layer that allows AI agents to apply brand tokens and rules specifically for video frames. - **Diverse Use Cases**: Capable of producing product launch videos, PR walkthroughs with code diffs, data visualizations, and social media clips with kinetic captions.