video-template-frame-vignelli

Generate Vignelli-style motion graphics videos with bold typography and red accents using HyperFrames.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#video #Motion #Typography #Hyperframes #social-shorts #vignelli

One-click install

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

Or copy as Structured Prompt for Agent▼

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

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, professional motion graphics for social media without requiring advanced video editing expertise or complex software.

Core Features & Use Cases

Deterministic Rendering: Produces consistent 9:16 MP4 or WEBM video files using HTML/CSS/GSAP templates.
Vignelli Aesthetic: Implements a specific design language featuring bold, uppercase typography and high-contrast red accents.
Use Case: Quickly generate a 10-second social media short by replacing placeholder text in the template with your own content while maintaining the professional motion signature.

Quick Start

Use the video-template-frame-vignelli skill to create a 10-second social media video with my custom headline and body text.

Frequently Asked Questions about video-template-frame-vignelli

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

FAQPage Schema

How do I create a video using the Vignelli template?▼

Use the video-template-frame-vignelli skill to generate a video by providing your text content. The template automatically applies the Vignelli-style bold typography and red accents to your input.

What video formats does this template support?▼

The template supports rendering to MP4 and WEBM formats, optimized for 9:16 portrait social media displays at 30 frames per second.

Can I customize the animation timing in the Vignelli template?▼

The animation timeline is defined within the source/index.html file using GSAP. You can modify the timeline logic, but ensure the composition remains self-contained for headless rendering.

What are the limitations of using this HyperFrames template?▼

The template is designed for self-contained HTML/CSS/GSAP compositions. Avoid introducing external network assets, as they may break the headless rendering process.