Summary

This repository provides a student kit for building motion-graphics video pipelines using plain HTML and GSAP, powered by the Hyperframes CLI. It offers 12 finished projects as practical examples for students learning end-to-end video production, from storyboarding to final render, enabling rapid learning through reverse-engineering.

How It Works

Compositions are standard HTML files with GSAP timelines managed via window.__timelines. The Hyperframes CLI orchestrates linting, live previewing in a headless Chromium browser (Studio), and final rendering. This approach leverages fundamental web technologies, avoiding complex JavaScript frameworks for a more direct pipeline understanding.

Quick Start & Requirements

Install via npm install after cloning. Requires Node 20+, FFmpeg on PATH, and Chrome. Approximately 5 GB disk space is needed, with 16 GB RAM recommended for Studio preview. Run npx hyperframes doctor for setup verification. Preview projects using npx hyperframes preview within a project directory. Further documentation is available at https://hyperframes.heygen.com.

Highlighted Details

• Features 12 diverse video projects (short-form, promos, educational) demonstrating various pipeline stages.
• Emphasizes a complete workflow: storyboard, brand system, motion graphics, audio sync, and rendering.
• Includes the Hyperframes CLI for linting, previewing, and rendering, with detailed authoring loop steps.
• Provides example brand assets (AIS) and clear instructions for customization, including a find-and-fix sweep for brand references.
• Offers aesthetic guidance via MOTION_PHILOSOPHY.md.

Maintenance & Community

The project is developed by Nate Herk. No specific community channels (like Discord/Slack) or roadmap details are provided in the README.

Licensing & Compatibility

Code and compositions are MIT licensed. However, the included AI Automation Society (AIS) brand assets (logo, background, tokens) are proprietary and require replacement for custom branding or shipping.

Limitations & Caveats

The repository ships with example AIS branding that must be replaced for commercial or personal use. Some included projects are marked as drafts requiring completion. The "first-agent-promo" project uses a React-via-Babel approach, differing from the primary HTML-native pattern.