video-template-frame-product-promo-30s
Helps your agent create a 30-second product promo video. It assembles scenes showing the problem, brand, benefits, and product, ending with a call to action.
What it does
This template creates an animated 30-second promotional video for a product. It shows the problem the product solves, reveals the brand, highlights benefits, displays the product, and ends with a call to action.
When to use it
- ✓When launching a new product.
- ✓To showcase service benefits.
- ✓To create a quick, eye-catching ad.
Example of what to ask your AI
“Create a 30-second promo video for my new organization app.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The template uses code (HTML, CSS, GSAP) to create animations. You just need to replace the sample text and images with your own content, keeping the animation's style and timing.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill video-template-frame-product-promo-30sOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/video-templates/frame-product-promo-30s/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Product Promo · 30s
Multi-scene 30-second product promo: problem-type intro, brand reveal, benefits flowchart, product surfaces, value pillars, foundation, CTA outro. Forked from Nate Herk's hyperframes-student-kit (linear-promo-30s); brand-specific copy + assets replaced with generic placeholders.
What this template is
A HyperFrames-ready HTML + CSS + GSAP motion composition, bundled under source/. It renders deterministically to MP4 / WEBM at 16:9, default 30s, 30fps.
Best for: 30-second product promo · B2B SaaS launch · Multi-feature reel with sound
Workflow
- Read
source/index.htmlto understand the named layers and the animation timeline. - Replace the sample copy (headlines, figures, labels) with the user's real content; keep the motion timing and visual signature intact.
- Keep the composition self-contained under
source/; do not introduce external network assets that would break a headless render. - Render to MP4 via the html-video / HyperFrames renderer.
Attribution
Source: html-video templates/frame-product-promo-30s (license MIT). Forked from Nate Herk — https://github.com/nateherkai/hyperframes-student-kit/tree/main/video-projects/linear-promo-30s.
FAQ
How long will the video be?
The video is designed to be 30 seconds long.
Can I change the colors and fonts?
The template maintains the original visual style, but you can adapt the text and images for your product.
Do I need to know how to code to use it?
No, you only need to replace the sample text and images with your own. The AI handles the technical part.
Details
Original description by the author
Use this plugin when the user wants a "Product Promo · 30s" HyperFrames motion video — Multi-scene 30-second product promo: problem-type intro, brand reveal, benefits flowchart, product surfaces, value pillars, foundation, CTA outro. Forked from Nate Herk's hyperframes-student-kit (linear-promo-30s); brand-specific copy + assets replaced with generic placeholders.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #631
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
blender-motion-state-inspection
Allows inspection of details in 3D animations. It's useful for checking poses, movements, and character alignment in animations.
affaan-m/ECC
manim-video
Lets your agent create animated explainer videos. It uses Manim to generate clear graphs and diagrams for technical concepts.
affaan-m/ECC
remotion-video-creation
Guides your agent in creating videos using React with the Remotion library. It covers best practices for animations, audio, captions, and other visual elements.
affaan-m/ECC