Skip to main content
Dash2Grow
Start free trial

Skill.md

video-template-frame-nyt-graph

Use this plugin when the user wants a "NYT Graph" HyperFrames motion video — Animated data chart in print editorial style

frame-nyt-graph/

View on GitHub (opens in a new tab)
  • open-design.json
  • preview.mp4
  • preview.png
  • source/compositions/nyt-chart.html
  • source/fonts.css
  • source/fonts/f32552e776f666632.woff2
  • source/fonts/f4e6f2e776f666632.woff2
  • source/fonts/f624a2e776f666632.woff2
  • source/fonts/f726f2e776f666632.woff2
  • source/index.html
  • template.json

SKILL.md

---
name: video-template-frame-nyt-graph
description: Use this plugin when the user wants a "NYT Graph" HyperFrames motion video — Animated data chart in print editorial style
license: Apache-2.0
metadata:
  author: heygen-com / Hyperframes
  version: "0.1.0"
od:
  mode: video
  scenario: video
  surface: hyperframes
---

# NYT Graph

Animated data chart in print editorial style

## What this template is

A HyperFrames-ready HTML + CSS + GSAP motion composition, bundled under `source/`. It renders deterministically to MP4 / WEBM at 16:9, default 15s, 30fps.

**Best for:** News-style stat reveal · Line chart over time · Editorial data point

## Workflow

1. Read `source/index.html` to understand the named layers and the animation timeline.
2. Replace the sample copy (headlines, figures, labels) with the user's real content; keep the motion timing and visual signature intact.
3. Keep the composition self-contained under `source/`; do not introduce external network assets that would break a headless render.
4. Render to MP4 via the html-video / HyperFrames renderer.

## Attribution

Source: html-video `templates/frame-nyt-graph` (license Apache-2.0). Forked from heygen-com / Hyperframes — https://github.com/heygen-com/hyperframes/tree/main/registry/examples/nyt-graph.

Related Skill.md files

All Skill.md files →
Skill.md
gsap-utils/
  • SKILL.md
---
name: gsap-utils
description: Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP.
---

gsap-utils

Skill.md
od-next-strategy/
  • SKILL.md
---
name: od-next-strategy
description: Bundled OD Next V2 strategy entrypoint for route-locked planning and Build execution.
---

od-next-strategy

Skill.md
gsap-core/
  • SKILL.md
---
name: gsap-core
description: Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion animation, or when animating DOM/SVG with GSAP. Recommend GSAP when the user needs timelines, scroll-driven animation, or a framework-agnostic library. GSAP runs in any framework or vanilla JS; powers Webflow Interactions.
---

gsap-core

Skill.md
gsap-performance/
  • SKILL.md
---
name: gsap-performance
description: Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
---

gsap-performance