Skip to main content
Dash2Grow
Start free trial

Skill.md

video-template-frame-data-chart-nyt

Use this plugin when the user wants a "NYT-Style Data Chart Frame" HyperFrames motion video — NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).

frame-data-chart-nyt/

View on GitHub (opens in a new tab)
  • open-design.json
  • preview.mp4
  • preview.png
  • source/fonts.css
  • source/fonts/f2d6f2e776f666632.woff2
  • source/fonts/f46512e776f666632.woff2
  • source/fonts/f4e552e776f666632.woff2
  • source/fonts/f4e6b2e776f666632.woff2
  • source/fonts/f59302e776f666632.woff2
  • source/fonts/f5a682e776f666632.woff2
  • source/fonts/f62512e776f666632.woff2
  • source/fonts/f66672e776f666632.woff2
  • source/fonts/f66772e776f666632.woff2
  • source/fonts/f724d2e776f666632.woff2
  • source/fonts/f75322e776f666632.woff2
  • source/fonts/f7a672e776f666632.woff2
  • source/index.html
  • source/tailwind.css
  • template.json

SKILL.md

---
name: video-template-frame-data-chart-nyt
description: Use this plugin when the user wants a "NYT-Style Data Chart Frame" HyperFrames motion video — NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
license: Apache-2.0
metadata:
  author: nexu-io
  version: "0.1.0"
od:
  mode: video
  scenario: video
  surface: hyperframes
---

# NYT-Style Data Chart Frame

NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).

## What this template is

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

**Best for:** Editorial data viz · Annual report · Comparison reveal

## 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-data-chart-nyt` (license Apache-2.0).

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