video-template-frame-nyt-graph

Generate animated editorial-style data charts using HTML, CSS, and GSAP motion compositions.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#video #editorial #GSAP #Motion #data-viz #Hyperframes

One-click install

npx skills add https://github.com/nexu-io/open-design --skill video-template-frame-nyt-graph

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: video-template-frame-nyt-graph
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/video-templates/frame-nyt-graph
Command: npx skills add https://github.com/nexu-io/open-design --skill video-template-frame-nyt-graph

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of professional, motion-based data visualizations, removing the need for manual keyframing in complex video editing software.

Core Features & Use Cases

Editorial Motion: Renders print-style data charts with coordinated animation timelines using GSAP.
Deterministic Output: Produces consistent MP4 or WEBM video files suitable for news-style stat reveals.
Use Case: Quickly generate a 15-second animated line graph for a social media report or editorial presentation by simply providing the data points and headlines.

Quick Start

Use the video-template-frame-nyt-graph skill to generate a 16:9 data visualization video using the provided revenue and conversion rate data.

Frequently Asked Questions about video-template-frame-nyt-graph

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a data-viz video with this template?▼

Provide your data points and headlines to the skill, which uses the HyperFrames engine to render the HTML/CSS composition into a 15-second MP4 or WEBM video file.

Can I customize the animation timing in the NYT Graph template?▼

Yes, you can modify the GSAP timeline within the source/index.html file to adjust the duration and easing of the chart elements, provided you maintain the structure required for headless rendering.

Does this template support different aspect ratios?▼

The current implementation is optimized for 16:9 aspect ratio as defined in the template configuration; changing this may require adjustments to the CSS layout and SVG viewBox.

What are the limitations of using this motion template?▼

The template is designed for self-contained HTML/CSS compositions; avoid using external network assets or dynamic dependencies that could break the headless rendering process.