Agent skill · design visual · nexu-io
video-template-frame-data-rollup
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.
Why this skill is useful
Provides a specific Remotion template for creating animated data frames that the AI wouldn't generate on its own.
What it needs
Requires remotion installed locally. About 1k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
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 1. Read source/entry.ts 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-rollup (license Apache-2.0).
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/frame-data-rollup