video-template-frame-data-rollup

Generate animated data-driven bar charts for video compositions using Remotion and React.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#video #kpi #Remotion #bar-chart #Animation #data-viz

One-click install

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

Or copy as Structured Prompt for Agent▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires remotion, and includes assets (resource) components.

What problem does it solve?

This Skill solves the challenge of creating static, lifeless data visualizations in video content by providing a programmatic way to animate metrics that feel alive and responsive.

Core Features & Use Cases

Dynamic Animation: Bars grow using spring physics while numbers count up in sync with the motion.
Responsive Layouts: Automatically adjusts to 16:9, 9:16, and 1:1 aspect ratios for multi-platform delivery.
Use Case: Create engaging weekly growth reports or KPI dashboards for social media videos where data needs to be presented with high visual impact.

Quick Start

Generate a data rollup video frame using the provided metrics and set the aspect ratio to 16:9.

Frequently Asked Questions about video-template-frame-data-rollup

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

FAQPage Schema

How do I create an animated bar chart for my video?▼

Use the video-template-frame-data-rollup skill to render a Remotion composition where bars grow and numbers count up based on your input data.

Does this template support different video aspect ratios?▼

Yes, the template is built with responsive layout logic using useVideoConfig, allowing it to render correctly in 16:9, 9:16, and 1:1 formats.

Can I use custom fonts in this data rollup?▼

The template uses a system font stack to ensure deterministic, offline-safe rendering and avoid issues with external asset loading during headless video generation.

What happens if one data value is significantly larger than others?▼

The template includes automatic log-scale detection; if the spread between the maximum and minimum value exceeds 50x, it switches to a log scale to keep all bars visible.