Examples - HyperFrames

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

Looking for finished videos and production projects? Start with the Showcase.

Terminal

npx hyperframes init my-video --example <name>

Landscape Templates

Warm GrainBranding & lifestyle

Play ModeSocial media

Swiss GridCorporate & technical

Kinetic TypePromos & title cards

Decision TreeExplainers & tutorials

Product PromoProduct showcases

NYT GraphData stories

Portrait Templates

VignelliHeadlines & announcements

Looking for a minimal starting point? Use blank — it gives you an empty composition with just the scaffolding, no visual design.

Terminal

npx hyperframes init my-video --example blank

Choosing an Example

Example	Style	Format	Best for
`warm-grain`	Organic, textured	Landscape	Lifestyle, branding, editorial
`play-mode`	Energetic, elastic	Landscape	Social media, product launches
`swiss-grid`	Clean, structured	Landscape	Corporate, data, technical
`kinetic-type`	Dramatic type	Landscape	Promos, intros, title cards
`decision-tree`	Diagrammatic	Landscape	Explainers, tutorials
`product-promo`	Multi-scene	Landscape	Product showcases, demos
`nyt-graph`	Editorial data	Landscape	Data stories, reports
`vignelli`	Bold, typographic	Portrait	Headlines, announcements
`blank`	Minimal scaffolding	—	Full control, agent-generated

Example Details

warm-grain

Cream-toned aesthetic with grain texture overlay.What it produces: A composition with warm color grading, textured grain, and smooth transitions. Includes an intro sub-composition and captions support.

my-video/
├── meta.json
├── index.html
├── compositions/
│   ├── intro.html
│   ├── graphics.html
│   └── captions.html
└── assets/

play-mode

Playful elastic animations with bold, energetic motion.

my-video/
├── meta.json
├── index.html
├── compositions/
│   ├── intro.html
│   ├── stats.html
│   └── captions.html
└── assets/

swiss-grid

Structured grid layout inspired by Swiss/International Typographic Style.

my-video/
├── meta.json
├── index.html
├── compositions/
│   ├── intro.html
│   ├── graphics.html
│   └── captions.html
└── assets/

vignelli

Bold typography with red accents (1080×1920 portrait).

my-video/
├── meta.json
├── index.html
├── compositions/
│   ├── overlays.html
│   └── captions.html
└── assets/

kinetic-type

Bold kinetic typography promo with dramatic text animations.

my-video/
├── meta.json
├── index.html
└── compositions/
    └── main-graphics.html

decision-tree

Animated flowchart with branching paths and progressive reveal.

my-video/
├── meta.json
├── index.html
└── compositions/
    └── decision_tree.html

Multi-scene product showcase with SVG assets.

my-video/
├── meta.json
├── index.html
├── compositions/
│   ├── scene1-logo-intro.html
│   ├── scene2-4-canvas.html
│   └── scene5-logo-outro.html
└── assets/
    ├── figma-cursors.svg
    ├── figma-logo-pieces.svg
    └── figma-logo-pills.svg

nyt-graph

Animated data chart in print editorial style.

my-video/
├── meta.json
├── index.html
└── compositions/
    └── nyt-chart.html

blank

Empty composition with just the scaffolding.

my-video/
├── meta.json
├── index.html
└── compositions/
    └── captions.html

Passing a Source Video

Terminal

npx hyperframes init my-video --example warm-grain --video ./my-clip.mp4

The CLI will probe the video for duration, resolution, and codec. If the video uses an incompatible codec, it will be automatically transcoded to H.264 MP4 if FFmpeg is available.

Custom Examples

Any directory with an index.html can serve as an example. Your custom example needs:

An index.html with a data-composition-id root element
A GSAP timeline registered in window.__timelines
Any assets in the same directory or a subdirectory

index.html

<div id="root" data-composition-id="my-example"
     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-example"] = tl;
  </script>
</div>

After creating a custom example, validate it with the linter:

Terminal

npx hyperframes lint

Next Steps

Quickstart

Create, preview, and render your first video

Launch Videos

Real production projects from HeyGen’s launches — open-source for you to read and remix.

GSAP Animation

Add animations to your example

Compositions

Understand the composition data model

​Landscape Templates

​Portrait Templates

​Choosing an Example

​Example Details

​warm-grain

​play-mode

​swiss-grid

​vignelli

​kinetic-type

​decision-tree

​product-promo

​nyt-graph

​blank

​Passing a Source Video

​Custom Examples

​Next Steps

Quickstart

Launch Videos

GSAP Animation

Compositions

Landscape Templates

Portrait Templates

Choosing an Example

Example Details

warm-grain

play-mode

swiss-grid

vignelli

kinetic-type

decision-tree

product-promo

nyt-graph

blank

Passing a Source Video

Custom Examples

Next Steps