frame-logo-outro
Lets your agent assemble logos with animation, glow, and tagline reveals. It's ideal for creating memorable video outros or brand closing frames.
What it does
Creates an animated end frame for videos, showcasing your logo creatively with your brand name and tagline appearing gradually.
When to use it
- ✓To professionally end videos with branding.
- ✓To present your logo and tagline in short animations.
- ✓To create an animated digital business card.
Example of what to ask your AI
“Create an animated outro for my video with the logo 'My Company', tagline 'Innovation for the future', and neon blue colors.”
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 AI assembles your logo from geometric blocks that move and appear on screen. Then, your brand name and tagline smoothly emerge, finishing with a glow effect.
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 frame-logo-outroOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/frame-logo-outro/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
【模板: Logo 收尾帧 (Logo Outro)】 【意图】视频结尾的品牌 reveal 帧 —— logo 分块拼装 + glow bloom + tagline 上浮 + CTA。Inspired by hyperframes logo-outro。
【画布】1920×1080, 黑色 #08090c 或品牌深色背景; 加微妙 vignette radial-gradient(...) 让中心更亮。
【布局】
- 中心 Logo: 用 CSS / 内联 SVG 绘制; 由 4-8 个几何块 (圆 / 方 / 三角 / hairline) 组成。
- 入场动画: 每个块从屏幕外滑入 (±100px 不同方向) + scale 1.4→1.0 + opacity 0→1, 错峰 80ms; 总时长 1.2s。
- 入场完成后, 整个 logo 加 glow bloom:
filter: drop-shadow(0 0 24px <accent>40); 同时一道 shimmermask-image横扫 logo (500ms)。
- 品牌名: logo 下方 6-8% 位置, 大字 (Inter Tight / SF Pro Display, 48-72px, weight 700, letter-spacing -0.02em), 入场: typewriter or fade-up after logo bloom (1.4s 开始)。
- Tagline: 品牌名下方一行 (24-28px, weight 400, opacity 0.7), fade in (1.8s)。
- 底部 CTA + 元数据: 双行底部 row, 例如
htmlanything.dev · @htmlanything · 2026, 11px uppercase letter-spacing 0.16em, 颜色 opacity 0.4, hairline 分隔。
【调色 — 4 选 1, 不混用】
- 🌌 Midnight Indigo — bg
#08090c, accent#7c5cff(霓虹紫蓝 glow)。 - 🌅 Solar Amber — bg
#0e0a08, accent#ffb547(暖琥珀)。 - 🌿 Forest Mint — bg
#0a1410, accent#5fb38a(薄荷绿)。 - ⚪ Bone & Ink — bg
#f1efea, accent#0a0a0b(无 neon, 走 editorial 风, glow 改成阴影)。
【设计细节】
- 绝不: 用外链 logo 图片; logo 必须用纯 CSS / 内联 SVG 几何绘制。
- 入场动画用
@keyframes+animation-delay; 可被prefers-reduced-motion关闭。 - 字体: 西文
Inter Tight/SF Pro Display/Manrope; 中文Noto Sans SCweight 700。 - 必须用用户提供的品牌名 + tagline; 若没有, 跑 fallback "HTML Anything" / "Anything → beautiful HTML"。
- 单文件 HTML; 整个动画完成后 freeze (不要 loop, 这是视频结尾帧)。
- 顶部可选 5px ribbon (accent 色) 增加品牌识别。
FAQ
Can I use a logo image file?
No, the logo must be created using simple geometric shapes (circles, squares) directly in the code to ensure proper animation.
What if I don't provide a brand name or tagline?
The animation will use 'HTML Anything' as the brand name and 'Anything → beautiful HTML' as the tagline as a fallback.
Does the animation loop?
No, the animation stops after it's complete, making it ideal for video endings.
Details
Original description by the author
Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #546
- 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