video-template-frame-data-chart-nyt

Generate editorial-grade data visualization motion frames using HTML, CSS, and GSAP animation.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#video #journalism #Motion #nyt #data-viz #html-video #Hyperframes

One-click install

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

Or copy as Structured Prompt for Agent▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill automates the creation of high-quality, newsroom-style motion graphics for data visualization, eliminating the need for manual video editing for repetitive editorial content.

Core Features & Use Cases

Editorial Typography: Implements NYT-newsroom visual signatures including staggered reveal animations.
Data-Driven Motion: Renders deterministic MP4 or WEBM files from HTML/CSS compositions.
Use Case: Quickly generate a series of 15-second motion charts for an annual report or social media update by simply updating the data points and headlines in the template.

Quick Start

Use the video-template-frame-data-chart-nyt skill to render a 15-second 16:9 MP4 chart frame using the provided data points.

Frequently Asked Questions about video-template-frame-data-chart-nyt

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

FAQPage Schema

How do I customize the chart data in this template?▼

Modify the SVG path coordinates and text elements within the source/index.html file to update the chart lines, data points, and labels while maintaining the existing animation timeline.

What video formats does this template support?▼

The template supports rendering to MP4 and WEBM formats at 16:9 aspect ratio, optimized for headless rendering via the HyperFrames engine.

Can I change the animation timing of the chart reveal?▼

Yes, you can adjust the CSS animation-delay and duration properties within the style block of source/index.html to modify the staggered reveal effect.

Does this template require external assets?▼

The template is designed to be self-contained within the source/ directory to ensure deterministic rendering; avoid adding external network assets that could break the headless build process.