skills.rest
nexu-io
nexu-ioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

video-template-frame-pentagram-stat

Generate Swiss-grid style motion video compositions for statistical data visualization and editorial benchmarks.

93.2k|10.8k|Updated Apr 28, 2026
Search Tags:#video#benchmark#Motion#data-viz#Hyperframes#swiss-grid
One-click install
npx skills add https://github.com/nexu-io/open-design --skill video-template-frame-pentagram-stat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: video-template-frame-pentagram-stat
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/video-templates/frame-pentagram-stat
Command: npx skills add https://github.com/nexu-io/open-design --skill video-template-frame-pentagram-stat

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the difficulty of creating high-quality, editorial-grade motion graphics for data visualization without requiring manual animation software or complex video editing workflows.

Core Features & Use Cases

  • Deterministic Rendering: Produces consistent 16:9 MP4 or WEBM video files using HTML, CSS, and GSAP.
  • Swiss-Grid Design: Implements a professional, high-contrast visual language inspired by Pentagram design principles.
  • Use Case: Quickly generate a 15-second benchmark reveal video for a product launch or technical report by providing key metrics and labels.

Quick Start

Use the video-template-frame-pentagram-stat skill to generate a 15-second benchmark video for my AIME score of 95.7.

Frequently Asked Questions about video-template-frame-pentagram-stat

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

FAQPage Schema
How do I generate a video with this template?▼

Use the HyperFrames renderer to process the source HTML and CSS files. The skill automatically handles the animation timeline, grid layout, and bar chart growth based on your provided metrics.

Can I change the video duration or aspect ratio?▼

The template is optimized for a 16:9 aspect ratio and a 15-second duration. While you can modify the CSS keyframes, the current implementation is designed for these specific parameters to ensure consistent motion timing.

What rendering engine is required for this skill?▼

This skill requires the HyperFrames engine to interpret the HTML/CSS composition and export the final video file. Ensure your environment supports the hyperframes-ready renderer.

Does this template support custom fonts?▼

The template uses the Archivo font family as defined in the source/fonts.css file. You can replace these font files or update the CSS to use your own brand typography.

What are the limitations of this motion template?▼

This template is designed for single-metric hero reveals and editorial data slides. It is not intended for complex multi-scene storytelling or long-form video production.

Related Skills

Explore More Design & Creative Skills→
heimanbaheimanba
9

oss-video

Generate promotional videos for open-source projects using GitHub data and Remotion.

Community
Advanced
MRWillisTMRWillisT
7

high-end-website-design

Generate cinematic hero images, looping videos, and single-file HTML landing pages.

Community
Advanced
ChatCut-IncChatCut-Inc
751

create-motion-graphics

Create and edit JSX motion graphic assets in ChatCut projects.

Official
Advanced
the-cyber-boardroomthe-cyber-boardroom
11

infographic-gen

Generate infographics and slide decks from briefs or documents.

Official
Intermediate