video-template-frame-data-rollup
Lets your agent create dynamic data update videos. It shows bars growing and numbers changing realistically and in sync.
What it does
This template creates a short video where numbers and bars grow animatedly, showing data dynamically. It's ideal for presenting metrics or growth in a visually engaging way.
When to use it
- ✓To show weekly sales growth.
- ✓To present survey results with animated charts.
- ✓To highlight an important data point in a larger video.
Example of what to ask your AI
“Create a video showing follower increase over the last month, with bars growing and numbers rising from 1000 to 5000.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
You insert your numbers and texts into the template's code. It uses a spring effect to make numbers and bars appear smoothly, as if growing from zero to the final value.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill video-template-frame-data-rollupOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/video-templates/frame-data-rollup/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Data Rollup Frame
A native Remotion data frame — bars grow from zero by real data via spring physics while the figures roll 0→target in sync.
What this template is
A HyperFrames-ready Remotion (React/TSX) motion composition, bundled under source/. It renders deterministically to MP4 / WEBM at 16:9, 9:16, 1:1, default 15s, 30fps.
Best for: A data frame where the numbers should animate, not sit static · Weekly metrics / growth bars driven by real values · Enhancing one data segment of an otherwise hyperframes video
Workflow
- Read
source/entry.tsto understand the named layers and the animation timeline. - Replace the sample copy (headlines, figures, labels) with the user's real content; keep the motion timing and visual signature intact.
- Keep the composition self-contained under
source/; do not introduce external network assets that would break a headless render. - Render to MP4 via the html-video / HyperFrames renderer.
Attribution
Source: html-video templates/frame-data-rollup (license Apache-2.0).
FAQ
What are 'HyperFrames'?
HyperFrames is a way to create videos with data that updates automatically, like charts that change in real-time.
What is 'Remotion'?
Remotion is a tool that allows you to create videos using programming code, as if you were drawing the video with instructions.
Can I use external images?
It's not recommended, as the video needs to be created only with the information you've already put in the code to work correctly anywhere.
Details
Original description by the author
Use this plugin when the user wants a "Data Rollup Frame" HyperFrames motion video — A native Remotion data frame — bars grow from zero by real data via spring physics while the figures roll 0→target in sync.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #620
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
blender-motion-state-inspection
Allows inspection of details in 3D animations. It's useful for checking poses, movements, and character alignment in animations.
affaan-m/ECC
manim-video
Lets your agent create animated explainer videos. It uses Manim to generate clear graphs and diagrams for technical concepts.
affaan-m/ECC
remotion-video-creation
Guides your agent in creating videos using React with the Remotion library. It covers best practices for animations, audio, captions, and other visual elements.
affaan-m/ECC