ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-11 23:00:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add templates (#102)

Browse Source 
## What

Adds 4 new composition templates and fixes structural issues across all templates.

### New templates
- **decision-tree** — animated flowchart with branching paths
- **kinetic-type** — bold kinetic typography promo
- **product-promo** — multi-scene product showcase with SVG assets (3 scenes)
- **nyt-graph** — animated data chart in NYT print editorial style

### Fixes across all templates
- GSAP updated from 3.12.2 → 3.14.2 (all templates, including warm-grain, swiss-grid, vignelli, play-mode)
- New templates restructured with proper root wrapper div, `data-duration`, sub-composition refs with `data-composition-id` / `data-width` / `data-height`
- nyt-chart: replaced `${compId}` template literal variables with hardcoded `"nyt-chart"` string — cheerio's css-what parser crashes on template literals during bundling, causing silent fallback to raw HTML without runtime injection
- nyt-chart: added DOM readiness retry for dynamically created SVG elements
- kinetic-type: removed external S3 audio URL
- All templates: GSAP script loaded in `<head>` before any scripts reference it

## Why

The new templates expand the range of content types available via `hyperframes init`. The fixes ensure all templates work correctly in the studio preview (bundler inlines sub-compositions and injects the runtime).

## Test plan

- [x] All 4 new templates render in studio preview
- [x] nyt-graph chart animates bars, line, and labels on playback
- [x] Existing templates unaffected (GSAP version bump is backwards compatible)
- [x] `hyperframes lint` passes on all templates
- [x] `generators.ts` updated with new template IDs
This commit is contained in:
Vance Ingalls
2026-03-27 17:31:28 -07:00
committed by GitHub
parent f79fcebfd8
commit 476c20747d
19 changed files with 2843 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/cli/src/templates/generators.ts
+18 -1
View File
@@ -1,4 +1,13 @@
export type TemplateId = "blank" | "warm-grain" | "play-mode" | "swiss-grid" | "vignelli";
export type TemplateId =
| "blank"
| "warm-grain"
| "play-mode"
| "swiss-grid"
| "vignelli"
| "decision-tree"
| "kinetic-type"
| "product-promo"
| "nyt-graph";
export interface TemplateOption {
id: TemplateId;
@@ -12,4 +21,12 @@ export const TEMPLATES: TemplateOption[] = [
{ id: "play-mode", label: "Play Mode", hint: "Playful elastic animations" },
{ id: "swiss-grid", label: "Swiss Grid", hint: "Structured grid layout" },
{ id: "vignelli", label: "Vignelli", hint: "Bold typography with red accents" },
{ id: "decision-tree", label: "Decision Tree", hint: "Animated flowchart with branching paths" },
{ id: "kinetic-type", label: "Kinetic Type", hint: "Bold kinetic typography promo" },
{
id: "product-promo",
label: "Product Promo",
hint: "Multi-scene product showcase with SVG assets",
},
{ id: "nyt-graph", label: "NYT Graph", hint: "Animated data chart in print editorial style" },
];