Examples

Built-in examples for common video patterns. Hover to preview animations.

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.

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

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

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

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

vignelli

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

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

kinetic-type

kinetic-type

Bold kinetic typography promo with dramatic text animations.

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

decision-tree

decision-tree

Animated flowchart with branching paths and progressive reveal.

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

product-promo

product-promo

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

nyt-graph

Animated data chart in print editorial style.

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

blank

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:

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-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

GSAP Animation

Add animations to your example

Compositions

Understand the composition data model

Rendering

Render your composition to MP4