video-template-frame-product-promo-30s

Generate 30-second product promo videos using HTML, CSS, and GSAP motion compositions.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#video #GSAP #promo #Motion #product-demo #Hyperframes

One-click install

npx skills add https://github.com/nexu-io/open-design --skill video-template-frame-product-promo-30s

Or copy as Structured Prompt for Agent▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the complexity of creating high-quality, motion-heavy product promo videos by providing a pre-built, code-based template that ensures consistent timing and visual fidelity.

Core Features & Use Cases

Deterministic Rendering: Produces consistent MP4 or WEBM video output from HTML/CSS/GSAP source files.
Multi-Scene Structure: Includes pre-defined segments for problem intros, brand reveals, benefit flowcharts, and CTA outros.
Use Case: Ideal for B2B SaaS launches or multi-feature reels where you need to quickly swap copy and assets while maintaining a professional motion signature.

Quick Start

Use the video-template-frame-product-promo-30s skill to render a 30-second product demo video by replacing the sample copy in the source files with your own content.

Frequently Asked Questions about video-template-frame-product-promo-30s

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

FAQPage Schema

How do I customize the video template content?▼

Modify the HTML and CSS files located in the source directory to update headlines, figures, and labels. Ensure you preserve the existing GSAP animation timeline and class names to maintain the template's motion signature.

What video formats are supported for output?▼

The template supports rendering to MP4 and WEBM formats at a 16:9 aspect ratio, default 30-second duration, and 30fps.

Can I add external network assets to the video?▼

No, you should keep the composition self-contained within the source directory. Introducing external network assets can break the headless render process.

What is the recommended workflow for rendering?▼

First, read the index.html file to understand the animation timeline. Second, replace the placeholder copy with your content. Finally, use the html-video or HyperFrames renderer to generate the final video file.