video-template-frame-bold-signal
Lets your agent create a video with a bold signal look. It uses colorful cards and animations to highlight important information.
What it does
This template creates a short, animated video, like an impactful title card. It uses a dark background with a sliding orange card, a large section number, and a rising title.
When to use it
- ✓To divide chapters or sections in a video.
- ✓To highlight important information or a launch.
- ✓To create a striking title card.
Example of what to ask your AI
“Create a section divider video with the title 'Introduction' and the number '1'.”
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
You give me the text and numbers you want in the video. I use special code (HTML, CSS, and GSAP) to create the animation with the 'Bold Signal Frame' style. The result is a ready-to-use video.
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-bold-signalOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/video-templates/frame-bold-signal/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Bold Signal Frame
Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.
What this template is
A HyperFrames-ready HTML + CSS + GSAP motion composition, bundled under source/. It renders deterministically to MP4 / WEBM at 16:9, 9:16, 1:1, default 15s, 60fps.
Best for: Section / chapter divider · Bold launch statement · High-impact title card
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-bold-signal (license Apache-2.0). Derived from frontend-slides (Zara Zhang, MIT) — https://github.com/zarazhangrui/frontend-slides.
FAQ
What is the video size?
The video can be square (1:1), portrait (9:16), or landscape (16:9) and lasts 15 seconds.
Can I change the colors?
This template is designed for a specific look with an orange card on a dark background. Changing colors might alter the original style.
Do I need to install anything?
No, you just need to tell me what you want in the video. I handle the creation using the necessary tools.
Details
Original description by the author
Use this plugin when the user wants a "Bold Signal Frame" HyperFrames motion video — Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #616
- 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