Frame Logo Outro

Name: Frame Logo Outro
Author: nexu-io

nexu-io/html-video

1 installs
4.3k repo stars
Updated June 21, 2026
nexu-io/html-video

This is a copy of frame-logo-outro by nexu-io - installs and ranking accrue to the original listing.

Helps with ai & agent building tasks.

About

frame-logo-outro is a Claude Code skill for ai & agent building. It helps developers move faster with AI-assisted coding.

frame-logo-outro
AI & Agent Building
AI-coding skill

Frame Logo Outro by the numbers

1 all-time installs (skills.sh)
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/nexu-io/html-video --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/html-video/frame-logo-outro.svg)](https://skillselion.com/skills/nexu-io/html-video/frame-logo-outro)

Installs	1
repo stars	★ 4.3k
Last updated	June 21, 2026
Repository	nexu-io/html-video ↗

What it does

Helps with ai & agent building tasks.

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

{
  "name": "@html-video/template-frame-logo-outro",
  "version": "0.1.0",
  "description": "html-video template: frame-logo-outro (cherry-picked from nexu-io/open-design)",
  "license": "Apache-2.0",
  "private": true,
  "files": ["template.html-video.yaml", "source", "SKILL.md", "example.md", "preview.png"]
}

<!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>

spec_version: 1
id: frame-logo-outro
name: Logo Outro Frame
description: >
  Segmented logo assembly + glow bloom + tagline reveal — perfect for video outros and brand closing frames.

engine: hyperframes
engine_version: ^0.4.0
source_entry: source/index.html

category: intro-outro
subcategory: outro
tags: [logo, outro, branding, end-card, frame, glow]

best_for:
  - "Video closing card"
  - "Brand outro"
  - "Channel sign-off"

output:
  formats: [mp4, webm]
  default_format: mp4
  resolution:
    default: { width: 1920, height: 1080 }
    supported_aspects: ["16:9", "9:16", "1:1"]
  fps:
    default: 60
    supported: [30, 60]
  duration:
    type: variable
    min_sec: 3
    max_sec: 10
  alpha: false
  audio:
    supported: true
    expected_inputs: [bgm]

inputs:
  schema:
    type: object
    required: [brand_name]
    properties:
      brand_name:
        type: "string"
        maxLength: 60
        description: "Brand or product name displayed below the logo"
      tagline:
        type: "string"
        maxLength: 120
        description: "Tagline shown beneath the brand name"
      primary_url:
        type: "string"
        description: "Footer URL or CTA link"
      duration_sec:
        type: "number"
        minimum: 3
        maximum: 10
        default: 5
  examples:
    - {"brand_name": "Open Design", "tagline": "Design that evolves itself", "primary_url": "open-design.ai", "duration_sec": 5}

license:
  spdx: Apache-2.0
  attribution_required: false
  redistribution_allowed: true
  commercial_use: true

author:
  name: nexu-io
  url: https://github.com/nexu-io
  contact: open-design@nexu.io

version: 0.1.0
changelog:
  - version: 0.1.0
    date: 2026-05-27
    notes: Cherry-picked from open-design/repo/skills/frame-logo-outro/example.html

preview:
  poster: preview.png

performance:
  reference_render:
    duration_sec: 5
    render_wall_clock_sec: 9
    machine: "M2 MacBook Air"