Skip to main content
Hyperframes includes starter templates to help you scaffold compositions quickly. Each template gives you a working project with the correct composition structure, data attributes, and a GSAP timeline already wired up.

​
Using Templates

Terminal
npx hyperframes init --template <name>
This creates a new project directory with an index.html composition and any required assets.

​
Available Templates

​
blank

An empty 1920x1080 composition with a GSAP timeline wired up and nothing else. Start from scratch.What it produces: A black (empty) canvas at 1920x1080 resolution. No visible elements, no animations. The timeline is registered and ready for you to add tweens.When to use it: You have a specific design in mind and want full control. Good for AI agent workflows that will generate the entire composition programmatically.
Terminal
npx hyperframes init --template blank
What you get:
my-video/
├── index.html          # Empty root composition with GSAP setup
└── assets/             # Empty directory for your media files

​
Choosing a Template

TemplateBest forComplexity
blankFull control, agent-generated compositionsMinimal
title-cardText intros, outros, chapter markersSimple
video-editVideo cutting, overlays, multi-track editingModerate
If you are new to Hyperframes, start with title-card to see a working animation, then move to blank when you are comfortable with the composition model and GSAP animation.

​
Custom Templates

Any directory with an index.html can serve as a template. You can copy a directory manually or build your own init workflow. Your custom template needs:
  1. An index.html with a data-composition-id root element
  2. A GSAP timeline registered in window.__timelines
  3. Any assets in the same directory or a subdirectory
index.html
<div id="root" data-composition-id="my-template"
     data-start="0" data-width="1920" data-height="1080">

  <!-- Your elements here -->

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    // Add your animations...
    window.__timelines = window.__timelines || {};
    window.__timelines["my-template"] = tl;
  </script>
</div>
After creating a custom template, validate it with the linter:
Terminal
npx hyperframes lint

​
Next Steps

Quickstart

Create, preview, and render your first video

GSAP Animation

Add animations to your template

Compositions

Understand the composition data model

Rendering

Render your composition to MP4