mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
James RussoandClaude Opus 4.7
4ae5c0340f
Move all preview mp4/png/gif assets under docs/images/ out of the repo and serve them from https://static.heygen.ai/hyperframes-oss/docs/images/ (backed by s3://heygen-public/hyperframes-oss/docs/images/, CloudFront). Drops ~49MB from the working tree and, more importantly, ~49MB from every future Mintlify build checkout. Combined with the (already-LFS-tracked) producer snapshots, the remaining bloat in 'npx skills add heygen-com/ hyperframes' (see #300) is LFS smudge during clone — separate fix needed in the skills CLI to pass GIT_LFS_SKIP_SMUDGE=1. Changes: - Delete docs/images/** (103 files, ~49MB). Files are uploaded to S3 already. - Rewrite /images/* references in 44 MDX files, TemplateCard.jsx, and catalog-index.json to absolute CDN URLs. - Update README.md img src to CDN URL (renders correctly on GitHub). - Add docs/images/ to .gitignore so regenerated previews aren't committed. - Add scripts/upload-docs-images.sh to sync docs/images/ → S3 after running the preview generators. - Wire up bun run upload:docs-images and bun run generate:catalog-previews scripts in package.json. - Update generator script docstrings to point at the upload step. External contributors can still regenerate previews locally (mintlify dev reads the CDN URLs, so broken previews appear only for newly added items pending a maintainer upload). Maintainers run: bun run generate:catalog-previews --only <name> bun run upload:docs-images Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
271 lines
12 KiB
Plaintext
271 lines
12 KiB
Plaintext
---
|
||
title: Examples
|
||
description: "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](/concepts/compositions), [data attributes](/concepts/data-attributes), and a [GSAP timeline](/guides/gsap-animation) already wired up.
|
||
|
||
```bash Terminal
|
||
npx hyperframes init my-video --example <name>
|
||
```
|
||
|
||
## Landscape Templates
|
||
|
||
<div className="not-prose grid grid-cols-2 gap-4 my-6">
|
||
<div className="tpl-card relative rounded-xl overflow-hidden bg-zinc-900 transition-transform hover:-translate-y-0.5 hover:shadow-xl">
|
||
<video className="w-full aspect-video object-cover block" src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/warm-grain.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/warm-grain.png" muted loop playsInline preload="metadata" />
|
||
<div className="absolute bottom-0 left-0 right-0 pt-6 pb-2 px-3" style={{background: "linear-gradient(transparent, rgba(0,0,0,0.7))"}}><strong className="text-sm font-semibold text-white block">Warm Grain</strong><span className="text-xs text-zinc-300">Branding & lifestyle</span></div>
|
||
</div>
|
||
<div className="tpl-card relative rounded-xl overflow-hidden bg-zinc-900 transition-transform hover:-translate-y-0.5 hover:shadow-xl">
|
||
<video className="w-full aspect-video object-cover block" src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/play-mode.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/play-mode.png" muted loop playsInline preload="metadata" />
|
||
<div className="absolute bottom-0 left-0 right-0 pt-6 pb-2 px-3" style={{background: "linear-gradient(transparent, rgba(0,0,0,0.75))"}}><strong className="text-sm font-semibold text-white block">Play Mode</strong><span className="text-xs text-zinc-300">Social media</span></div>
|
||
</div>
|
||
<div className="tpl-card relative rounded-xl overflow-hidden bg-zinc-900 transition-transform hover:-translate-y-0.5 hover:shadow-xl">
|
||
<video className="w-full aspect-video object-cover block" src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/swiss-grid.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/swiss-grid.png" muted loop playsInline preload="metadata" />
|
||
<div className="absolute bottom-0 left-0 right-0 pt-6 pb-2 px-3" style={{background: "linear-gradient(transparent, rgba(0,0,0,0.75))"}}><strong className="text-sm font-semibold text-white block">Swiss Grid</strong><span className="text-xs text-zinc-300">Corporate & technical</span></div>
|
||
</div>
|
||
<div className="tpl-card relative rounded-xl overflow-hidden bg-zinc-900 transition-transform hover:-translate-y-0.5 hover:shadow-xl">
|
||
<video className="w-full aspect-video object-cover block" src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/kinetic-type.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/kinetic-type.png" muted loop playsInline preload="metadata" />
|
||
<div className="absolute bottom-0 left-0 right-0 pt-6 pb-2 px-3" style={{background: "linear-gradient(transparent, rgba(0,0,0,0.75))"}}><strong className="text-sm font-semibold text-white block">Kinetic Type</strong><span className="text-xs text-zinc-300">Promos & title cards</span></div>
|
||
</div>
|
||
<div className="tpl-card relative rounded-xl overflow-hidden bg-zinc-900 transition-transform hover:-translate-y-0.5 hover:shadow-xl">
|
||
<video className="w-full aspect-video object-cover block" src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/decision-tree.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/decision-tree.png" muted loop playsInline preload="metadata" />
|
||
<div className="absolute bottom-0 left-0 right-0 pt-6 pb-2 px-3" style={{background: "linear-gradient(transparent, rgba(0,0,0,0.75))"}}><strong className="text-sm font-semibold text-white block">Decision Tree</strong><span className="text-xs text-zinc-300">Explainers & tutorials</span></div>
|
||
</div>
|
||
<div className="tpl-card relative rounded-xl overflow-hidden bg-zinc-900 transition-transform hover:-translate-y-0.5 hover:shadow-xl">
|
||
<video className="w-full aspect-video object-cover block" src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/product-promo.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/product-promo.png" muted loop playsInline preload="metadata" />
|
||
<div className="absolute bottom-0 left-0 right-0 pt-6 pb-2 px-3" style={{background: "linear-gradient(transparent, rgba(0,0,0,0.75))"}}><strong className="text-sm font-semibold text-white block">Product Promo</strong><span className="text-xs text-zinc-300">Product showcases</span></div>
|
||
</div>
|
||
<div className="tpl-card relative rounded-xl overflow-hidden bg-zinc-900 transition-transform hover:-translate-y-0.5 hover:shadow-xl">
|
||
<video className="w-full aspect-video object-cover block" src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/nyt-graph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/nyt-graph.png" muted loop playsInline preload="metadata" />
|
||
<div className="absolute bottom-0 left-0 right-0 pt-6 pb-2 px-3" style={{background: "linear-gradient(transparent, rgba(0,0,0,0.75))"}}><strong className="text-sm font-semibold text-white block">NYT Graph</strong><span className="text-xs text-zinc-300">Data stories</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
## Portrait Templates
|
||
|
||
<div className="not-prose grid grid-cols-3 gap-3 my-6">
|
||
<div className="tpl-card relative rounded-xl overflow-hidden bg-zinc-900 transition-transform hover:-translate-y-0.5 hover:shadow-xl">
|
||
<video className="w-full object-cover block" style={{aspectRatio: "9/16"}} src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/vignelli.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/vignelli.png" muted loop playsInline preload="metadata" />
|
||
<div className="absolute bottom-0 left-0 right-0 pt-6 pb-2 px-3" style={{background: "linear-gradient(transparent, rgba(0,0,0,0.75))"}}><strong className="text-sm font-semibold text-white block">Vignelli</strong><span className="text-xs text-zinc-300">Headlines & announcements</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<Tip>
|
||
Looking for a minimal starting point? Use **blank** — it gives you an empty composition with just the scaffolding, no visual design.
|
||
|
||
```bash Terminal
|
||
npx hyperframes init my-video --example blank
|
||
```
|
||
</Tip>
|
||
|
||
## 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
|
||
|
||
<Tabs>
|
||
<Tab title="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/
|
||
```
|
||
</Tab>
|
||
<Tab title="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/
|
||
```
|
||
</Tab>
|
||
<Tab title="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/
|
||
```
|
||
</Tab>
|
||
<Tab title="vignelli">
|
||
### vignelli
|
||
|
||
Bold typography with red accents (1080×1920 portrait).
|
||
|
||
```
|
||
my-video/
|
||
├── meta.json
|
||
├── index.html
|
||
├── compositions/
|
||
│ ├── overlays.html
|
||
│ └── captions.html
|
||
└── assets/
|
||
```
|
||
</Tab>
|
||
<Tab title="kinetic-type">
|
||
### kinetic-type
|
||
|
||
Bold kinetic typography promo with dramatic text animations.
|
||
|
||
```
|
||
my-video/
|
||
├── meta.json
|
||
├── index.html
|
||
└── compositions/
|
||
└── main-graphics.html
|
||
```
|
||
</Tab>
|
||
<Tab title="decision-tree">
|
||
### decision-tree
|
||
|
||
Animated flowchart with branching paths and progressive reveal.
|
||
|
||
```
|
||
my-video/
|
||
├── meta.json
|
||
├── index.html
|
||
└── compositions/
|
||
└── decision_tree.html
|
||
```
|
||
</Tab>
|
||
<Tab title="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
|
||
```
|
||
</Tab>
|
||
<Tab title="nyt-graph">
|
||
### nyt-graph
|
||
|
||
Animated data chart in print editorial style.
|
||
|
||
```
|
||
my-video/
|
||
├── meta.json
|
||
├── index.html
|
||
└── compositions/
|
||
└── nyt-chart.html
|
||
```
|
||
</Tab>
|
||
<Tab title="blank">
|
||
### blank
|
||
|
||
Empty composition with just the scaffolding.
|
||
|
||
```
|
||
my-video/
|
||
├── meta.json
|
||
├── index.html
|
||
└── compositions/
|
||
└── captions.html
|
||
```
|
||
</Tab>
|
||
</Tabs>
|
||
|
||
## Passing a Source Video
|
||
|
||
```bash 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`](/concepts/data-attributes#composition-attributes) root element
|
||
2. A [GSAP timeline](/guides/gsap-animation) registered in `window.__timelines`
|
||
3. Any assets in the same directory or a subdirectory
|
||
|
||
```html 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](/packages/cli#lint):
|
||
|
||
```bash Terminal
|
||
npx hyperframes lint
|
||
```
|
||
|
||
## Next Steps
|
||
|
||
<CardGroup cols={2}>
|
||
<Card title="Quickstart" icon="rocket" href="/quickstart">
|
||
Create, preview, and render your first video
|
||
</Card>
|
||
<Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
|
||
Add animations to your example
|
||
</Card>
|
||
<Card title="Compositions" icon="layer-group" href="/concepts/compositions">
|
||
Understand the composition data model
|
||
</Card>
|
||
<Card title="Rendering" icon="film" href="/guides/rendering">
|
||
Render your composition to MP4
|
||
</Card>
|
||
</CardGroup>
|