Frame Logo Outro
Generate polished video outros or brand end-cards with segmented logo assembly, glow bloom, and tagline reveals without hand-building motion graphics.
Overview
Frame Logo Outro is an agent skill for the Launch phase that builds segmented logo assembly, glow bloom, and tagline reveals for video outros and brand closing frames.
Install
npx skills add https://github.com/nexu-io/open-design --skill frame-logo-outroWhat is this skill?
- Logo segments assemble on-screen with glow bloom before tagline and CTA reveal
- Tuned for 1920×1080 (16:9) video outros and brand closing frames
- HTML Anything / Hyperframes template with live HTML preview and debounced reload
- Example flow: brand name, tagline, and CTA—no lorem ipsum or placeholder imagery
- Category: video; scenario tags include logo, outro, branding, end-card, frame
- 16:9 aspect hint at 1920×1080
- Template tags: logo, outro, branding, end-card, frame
Adoption & trust: 669 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have real brand copy and a logo but no fast way to produce a credible video outro or end-card that matches your visual system.
Who is it for?
Indie builders shipping demo or launch videos who need a repeatable branded outro from HTML/template tooling.
Skip if: Teams that need full NLE timelines, custom 3D logo animation, or audio mixing beyond a static or template-driven closer.
When should I use this skill?
Use the Logo Outro Frame template to turn content into a video outro or brand closing frame with segmented logo assembly, glow bloom, and tagline reveal while preserving the template visual signature.
What do I get? / Deliverables
You get a 16:9 closing frame or outro sequence ready to attach to launch and distribution videos with on-brand motion and typography.
- Video outro or brand closing frame with logo assembly and tagline reveal
- HTML previewable end-card suitable for export in your video pipeline
Recommended Skills
Journey fit
Closing frames and outros ship with distribution assets—trailers, social clips, and product videos—when solo builders need recognizable brand sign-offs. Distribution is where publish-ready video closers and end-cards leave the editor and attach to channels, demos, and launch content.
How it compares
Use as a structured video end-card template instead of improvising outros in chat or generic slide exports.
Common Questions / FAQ
Who is frame-logo-outro for?
Solo builders and small teams publishing product or marketing videos who want branded closers without dedicated motion staff.
When should I use frame-logo-outro?
During Launch distribution when finishing YouTube or social clips, after Validate when a landing video needs a sign-off, or anytime a demo reel needs a consistent end-card.
Is frame-logo-outro safe to install?
Review the Security Audits panel on this Prism page and only connect upstream repos and preview hosts you trust.
SKILL.md
READMESKILL.md - Frame Logo Outro
【模板: 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)`; 同时一道 shimmer `mask-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 SC` weight 700。 - 必须用用户提供的品牌名 + tagline; 若没有, 跑 fallback "HTML Anything" / "Anything → beautiful HTML"。 - 单文件 HTML; 整个动画完成后 freeze (不要 loop, 这是视频结尾帧)。 - 顶部可选 5px ribbon (accent 色) 增加品牌识别。