Mmcp.market

frame-logo-outro skill

by nexu-io·nexu-io/html-anything·9.0k stars·Apache-2.0

Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕

A100/100content scan

Is the frame-logo-outro skill safe?

Clean: nothing in its files matched our rules. We read 3 files in the folder on 2026-09-28.

No findings.

Install the frame-logo-outro skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/nexu-io/html-anything.git /tmp/html-anything
mkdir -p ~/.claude/skills
cp -r /tmp/html-anything/next/src/lib/templates/skills/frame-logo-outro ~/.claude/skills/frame-logo-outro
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on 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 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 色) 增加品牌识别。

More skills from nexu-io/html-anything

  • Aarticle-magazineSubstack / Medium 高级感长文排版, 适合公众号、博客发布
  • Aarticle-sketchnote-editorial把一个概念铸成杂志专题档案——真问题→失败→转折→顿悟→命名, 6 个 layout 模具 + 4 字族对比 + 探案档案细节
  • Ablog-post杂志感长文, 含 masthead、hero、figures、pull quote、作者署名
  • Acard-twitter推特金句 / 数据卡, 适合配推文
  • Acard-xiaohongshu小红书风格知识卡片, 多张联排可滑动浏览
  • Acompetitive-teardown定位图 + 功能矩阵 + 价格对比 + 机会窗口, 把竞品资料转成产品决策报告
  • Adashboard固定侧栏 + 顶栏 + KPI 网格 + 1-2 张图
  • Adata-report把 CSV/Excel/JSON 数据转成漂亮的可视化报告页
  • Adating-web消费感配对仪表板: 信号 ticker + KPI + 30 天柱状 + 趋势
  • Adeck-blueprint奶油纸 + 锈红 + 蓝图网格 mask + 黑边硬卡片 + pipeline 盒
  • Adeck-course-module暖纸背景 + Playfair, 左侧学习目标常驻, 含 MCQ 自测页
  • Adeck-dir-key-nav8 页单色背景, 160px display + 4px accent + Mono 箭头列表

All agent skills → · MCP servers