Examples

Watch finished HyperFrames videos, inspect real production projects, or start from a working template.

Use examples in three different ways:

• Watch a finished result to understand what HyperFrames can make.
• Inspect a production project to learn how story, media, scenes, and motion fit together.
• Start from a template when you want working structure immediately.

Finished production videos

These are real HyperFrames projects with public source.

Product launch

HyperFrames launch

A complete announcement using product UI, typography, footage, captions, voiceover, sound, and several animation techniques.

Inspect the source →

Feature reveal

Timeline editor launch

A product reveal built around the pain of repeated editing prompts, followed by the visual editor as the answer.

Inspect the source →

Product and website video

Website to HyperFrames

Captured product material turned into a structured promo rather than a simple scrolling screen recording.

Inspect the source →

Motion and title design

Texture launch

Expressive typography, texture masks, shader backgrounds, and compact transition-led storytelling.

Inspect the source →

What to learn from the source

The hyperframes-launches repository contains complete project folders. Depending on the project, you may find:

• BRIEF.md, STORYBOARD.md, or design notes;
• the main index.html;
• separate scene compositions;
• local media and fonts;
• narration, captions, music, and sound effects;
• a finished render to compare against the source.

These projects are useful references, not universal templates. Copy the production thinking and patterns that fit your work; do not copy an entire visual identity by default.

Start from a template

Create a project with a working example:

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

warm-grain

Organic brand and editorial work

play-mode

Energetic social and product work

swiss-grid

Structured technical or corporate stories

kinetic-type

Promos, intros, and title cards

Example	Good starting point for
warm-grain	Branding, lifestyle, and editorial work
play-mode	Energetic social videos and product launches
swiss-grid	Technical, structured, and corporate stories
kinetic-type	Type-led promos, intros, and title cards
decision-tree	Explainable diagrams and tutorials
product-promo	Multi-scene product showcases
nyt-graph	Editorial charts and data stories
vignelli	Bold portrait announcements
blank	Agent-generated or fully custom work

Choose a template for its structure and tone, then replace the sample content. If none fits, start with blank and let the agent build from the brief.

Run a production project locally

The launch repository uses Git LFS for large media:

git lfs install
git clone https://github.com/heygen-com/hyperframes-launches.git
cd hyperframes-launches/hyperframes-launch
npx hyperframes preview

If you only need a starting structure, use a built-in template instead. It is smaller and faster to understand.