frame-logo-outro
Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.
Install / Use
npx skills add nexu-io/open-design --skill frame-logo-outroInstalls into whichever agent you are using.
SKILL.md
Installable skill definition
Quality Score
Category
Development & EngineeringSupported Platforms
Tags
Our assessment of frame-logo-outro
frame-logo-outro scores 73/100 on our quality scale, 1067th of 1,947 Development & Engineering skills we index.
Its SKILL.md is 3.0 KB long, written without headings and no code examples: a solid amount of guidance for an agent.
With 97,896 GitHub stars, it is one of the more widely adopted skills in the catalogue.
Maintenance, license and trust
- The repository was last updated yesterday, so frame-logo-outro is actively maintained.
- It is released under the Apache-2.0 license, a permissive license that allows use, modification and commercial use with attribution.
- Its trust signals score 100/100, with no cautions. These come from repository metadata, not a code audit — read the skill file before letting an agent act on it.
Safety scan
No issues foundOur scan of the whole file found no instruction hijacking, hidden characters, credential access, data exfiltration or destructive commands.
Automated pattern scan on 2026-09-26. It catches known dangerous patterns, not every risk — read a skill before letting an agent act on it.
frame-logo-outro compared with similar skills
All 4 of these similar skills score higher than frame-logo-outro; compare them before choosing.
| Skill | Score | Stars | Updated | Format |
|---|---|---|---|---|
| frame-logo-outro (this skill)by nexu-io | 73 | 97.9k | 1d ago | SKILL.md |
| ai-job-searchby MadsLorentzen | 100 | 44.0k | 4d ago | CLAUDE.md |
| claude-howtoby luongnv89 | 100 | 41.7k | today | CLAUDE.md |
| algorithmic-artby anthropics | 100 | 177.9k | 3d ago | SKILL.md |
| pptxby anthropics | 100 | 177.9k | 3d ago | SKILL.md |
Frequently asked questions
- How do I install frame-logo-outro?
- Run
npx skills add nexu-io/open-design --skill frame-logo-outro. The install tabs above show the steps for each supported agent. - Which AI agents does frame-logo-outro work with?
- It is written for Universal, as a SKILL.md file. Other agents that read the same format can often use it too.
- Is frame-logo-outro safe to use?
- Our scan of the whole file found no instruction hijacking, hidden characters, credential access, data exfiltration or destructive commands. It is Apache-2.0-licensed and scores 100/100 on trust signals. Skills are instructions an agent will follow, so read the file before installing it and do not approve commands you do not understand.
- Is frame-logo-outro still maintained?
- The repository was last updated yesterday, so frame-logo-outro is actively maintained.
Skill content
View source on GitHubname: frame-logo-outro zh_name: "品牌 Logo 收尾帧" en_name: "Logo Outro Frame" emoji: "🎬" description: "Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames." zh_description: "Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕" en_description: "Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames." category: video scenario: video aspect_hint: "1920×1080 (16:9)" featured: 40 recommended: 8 tags: ["logo", "outro", "branding", "end-card", "frame"] example_id: sample-frame-logo-outro example_name: "品牌 Logo 收尾 · HTML Anything" example_format: markdown example_tagline: "Midnight Indigo + glow bloom" example_desc: "Logo 装配 + 品牌名 + tagline + CTA, 视频片尾用" example_source_url: "https://hyperframes.heygen.com/catalog" example_source_label: "hyperframes · logo-outro" od: mode: video surface: video scenario: video featured: 0.16 upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 design_system: requires: false example_prompt: "Use the Logo Outro Frame template to turn my content into a video outro or brand closing frame with segmented logo assembly, glow bloom, and tagline reveal. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." example_prompt_i18n: zh-CN: "用「品牌 Logo 收尾帧」模板把我的内容做成一段「Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
【模板: 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 色) 增加品牌识别。
Related Skills
ai-job-search
44.0kThe job search that runs on your machine. AI job application framework built on Claude Code: evaluate postings, tailor CVs, write cover letters, prep interviews. Fork it and own it.
claude-howto
41.7kA visual, example-driven guide to Claude Code — from basic concepts to advanced agents, with copy-paste templates that bring immediate value.
algorithmic-art
177.9kCreating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.
pptx
177.9kUse this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an em…
Languages
Trust signals
From repository metadata: license, adoption, age and documentation. Not a code audit — see the Safety scan above for what the skill file itself contains.