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

video-template-frame-product-promo

Generate multi-scene product showcase motion videos using HTML, CSS, and GSAP animation templates.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the creation of high-quality, motion-based product promo videos, eliminating the need for manual video editing for standard showcase reels.

Core Features & Use Cases

  • Deterministic Rendering: Produces consistent MP4 or WEBM video output using headless browser technology.
  • GSAP Animation: Leverages GreenSock Animation Platform for precise, high-performance motion timelines.
  • Use Case: Quickly generate a 20-second product demo video by replacing sample copy and assets in the provided HTML template while maintaining the original motion signature.

Quick Start

Use the video-template-frame-product-promo skill to render a 20-second product promo video using the provided source assets.

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

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

FAQPage Schema
How do I create a product promo video with this template?▼

To create a video, replace the sample copy and SVG assets within the source/index.html file. Once updated, trigger the render process to generate your MP4 or WEBM file using the HyperFrames engine.

What animation library does this video template use?▼

This template uses GSAP (GreenSock Animation Platform) 3.14.2 for all motion timelines. The GSAP library is vendored inline within the source/index.html file to ensure self-contained rendering.

Can I change the duration of the promo video?▼

The template is configured for a default 20-second duration. You can adjust the duration by modifying the GSAP timeline logic in the source/index.html file and updating the durationSec parameter in the template.json configuration.

Does this template support custom fonts?▼

Yes, the template includes a fonts.css file that defines @font-face rules for the Inter typeface. You can add additional font-face declarations to this file to use custom branding fonts in your video.

Related Skills

Explore More Design & Creative Skills→
HKUDSHKUDS
46.8k

cli-anything-inkscape

Manipulate SVG documents via command-line commands with Inkscape compatibility.

Official
Intermediate
KaakatiKaakati
2

marketing-assets

Generate marketing assets with platform specs and AIDA copy frameworks.

Community
Intermediate
agentpoetagentpoet

Music Curator Skill (Suno)

Generate copyright-free music tracks matched to video pacing and mood.

Community
Basic
kortix-aikortix-ai
6

remotion

Create programmatic videos with React and TypeScript.

Official
Advanced