Frame Logo Outro

Name: Frame Logo Outro
Author: nexu-io

nexu-io/open-design

1.6k installs
82k repo stars
Updated July 28, 2026
nexu-io/open-design

frame-logo-outro is an agent skill that segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.

About

frame-logo-outro is an agent skill from nexu-io/open-design that segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames. 【模板: 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 Developers invoke frame-logo-outro during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.

【模板: 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。

Frame Logo Outro by the numbers

1,626 all-time installs (skills.sh)
+125 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Ranked #222 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
Security screen: LOW risk (skills.sh audit)
Data as of Jul 28, 2026 (Skillselion catalog sync)

At a glance

frame-logo-outro capabilities & compatibility

Capabilities: 【模板: logo 收尾帧 (logo outro)】 · 【意图】视频结尾的品牌 reveal 帧 —— logo 分块拼装 + glow bloom + · 【画布】1920×1080, 黑色 `#08090c` 或品牌深色背景; 加微妙 vignett · 中心 logo**: 用 css / 内联 svg 绘制; 由 4 8 个几何块 (圆 / 方 · 入场动画: 每个块从屏幕外滑入 (±100px 不同方向) + scale 1.4→1.0 +
Use cases: orchestration

From the docs

What frame-logo-outro says it does

【意图】视频结尾的品牌 reveal 帧 —— logo 分块拼装 + glow bloom + tagline 上浮 + CTA。Inspired by hyperframes logo-outro。

SKILL.md

【画布】1920×1080, 黑色 `#08090c` 或品牌深色背景; 加微妙 vignette `radial-gradient(...)` 让中心更亮。

SKILL.md

- **中心 Logo**: 用 CSS / 内联 SVG 绘制; 由 4-8 个几何块 (圆 / 方 / 三角 / hairline) 组成。

SKILL.md

npx skills add https://github.com/nexu-io/open-design --skill frame-logo-outro

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/frame-logo-outro.svg)](https://skillselion.com/skills/nexu-io/open-design/frame-logo-outro)

Installs	1.6k
repo stars	★ 82k
Security audit	3 / 3 scanners passed
Last updated	July 28, 2026
Repository	nexu-io/open-design ↗

What it does

Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.

Who is it for?

Developers working on design & ui/ux during build tasks.

Skip if: Tasks outside Design & UI/UX scope described in SKILL.md.

When should I use this skill?

Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.

What you get

Completed design & ui/ux workflow aligned with SKILL.md steps.

outro frame markup
brand end-card spec

By the numbers

1920×1080 (16:9) aspect ratio
Featured rank 40 and 8 recommended uses in open-design catalog

Files

SKILL.mdMarkdownGitHub ↗

【模板: 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 色) 增加品牌识别。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Logo Outro · HTML Anything</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;700;800;900&family=Inter:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />
<style>
  body {
    font-family:'Inter Tight','Noto Sans SC',system-ui,sans-serif;
    background: radial-gradient(circle at 50% 45%, #1a1535 0%, #08090c 70%);
    color:#f5f5f7;
    margin:0;
    min-height:100vh;
    overflow:hidden;
  }
  .accent { color:#7c5cff; }
  .ribbon { background:#7c5cff; }
  @keyframes pieceIn { 0% { opacity:0; transform: scale(1.4) translate(var(--dx, 0), var(--dy, 0)) } 100% { opacity:1; transform: scale(1) translate(0,0) } }
  @keyframes glow { from { filter: drop-shadow(0 0 0 transparent) } to { filter: drop-shadow(0 0 32px rgba(124,92,255,0.6)) } }
  .piece { animation: pieceIn 1s cubic-bezier(.34,1.56,.64,1) both; }
  .piece:nth-child(1){--dx:-80px;--dy:-40px;animation-delay:0s}
  .piece:nth-child(2){--dx:60px;--dy:-50px;animation-delay:.08s}
  .piece:nth-child(3){--dx:-40px;--dy:50px;animation-delay:.16s}
  .piece:nth-child(4){--dx:70px;--dy:40px;animation-delay:.24s}
  .piece:nth-child(5){--dx:0;--dy:-70px;animation-delay:.32s}
  .logo-wrap { animation: glow .8s ease-out 1.1s both; }
  @keyframes fadeUp { from { opacity:0; transform: translateY(20px) } to { opacity:1; transform: translateY(0) } }
  .brand { animation: fadeUp .8s ease-out 1.4s both; }
  .tagline { animation: fadeUp .8s ease-out 1.7s both; }
  .meta { animation: fadeUp .6s ease-out 2.1s both; }
  /* shimmer */
  @keyframes shimmer { 0% { background-position:-200% 0 } 100% { background-position:200% 0 } }
  .shimmer {
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
    background-size: 200% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation: shimmer 1.8s ease-out 1.9s 1 both;
  }
</style>
</head>
<body class="flex flex-col items-center justify-center relative">
  <div class="ribbon absolute top-0 left-0 right-0" style="height:4px"></div>

  <!-- logo -->
  <div class="logo-wrap relative" style="width:140px;height:140px">
    <svg viewBox="0 0 140 140" class="absolute inset-0">
      <!-- 5 geometric pieces forming an "H" -->
      <rect class="piece" x="20" y="20" width="20" height="100" fill="#7c5cff"/>
      <rect class="piece" x="100" y="20" width="20" height="100" fill="#7c5cff"/>
      <rect class="piece" x="40" y="60" width="60" height="20" fill="#f5f5f7"/>
      <circle class="piece" cx="30" cy="20" r="10" fill="#7c5cff"/>
      <circle class="piece" cx="110" cy="120" r="10" fill="#f5f5f7"/>
    </svg>
  </div>

  <!-- brand -->
  <h1 class="brand mt-10 font-black tracking-[-0.02em] leading-[0.95]" style="font-size:84px">
    <span class="shimmer">HTML Anything</span>
  </h1>

  <!-- tagline -->
  <p class="tagline mt-4 text-[24px] opacity-70 font-medium">
    Anything → <em class="not-italic accent">beautiful HTML</em>
  </p>

  <!-- CTA / meta -->
  <div class="meta mt-12 flex items-center gap-6 text-[11px] uppercase tracking-[0.18em] opacity-50">
    <span>htmlanything.dev</span>
    <span class="opacity-40">·</span>
    <span>@htmlanything</span>
    <span class="opacity-40">·</span>
    <span>2026</span>
  </div>

  <!-- corner timecode -->
  <div class="absolute bottom-8 right-12 text-[10px] font-mono opacity-30 uppercase tracking-[0.18em]">END · 00:03:21</div>
  <div class="absolute bottom-8 left-12 text-[10px] font-mono opacity-30 uppercase tracking-[0.18em]">FRAME · LOGO-OUTRO</div>
</body>
</html>