frame-logo-outro
Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.
- Installs
- 63
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/nexu-io/html-video --skill frame-logo-outro- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads frame-logo-outro automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
【模板: 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 色) 增加品牌识别。
FAQ
What does the frame-logo-outro skill do?
Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.
How do I install frame-logo-outro?
Run npx skills add https://github.com/nexu-io/html-video --skill frame-logo-outro in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/frame-logo-outro/ (personal) or .claude/skills/frame-logo-outro/ (project).
Which AI agents can use frame-logo-outro?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is frame-logo-outro safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains frame-logo-outro?
It is published by nexu-io in nexu-io/html-video. It has 63 recorded installs.
More from nexu-io/html-video
frame-electric-studio
nexu-io/html-video
Two-panel split with quote as hero — white/blue panels open from center, accent bar grows, quote reveals line by line.
frame-build-minimal
nexu-io/html-video
Open the skill to read its SKILL.md instructions.
frame-pentagram-stat
nexu-io/html-video
Swiss-grid statistic anchor — giant number, red accent, growing bars, black data bar. Rational and editorial.
frame-bold-signal
nexu-io/html-video
Open the skill to read its SKILL.md instructions.
frame-data-chart-nyt
nexu-io/html-video
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
frame-light-leak-cinema
nexu-io/html-video
Open the skill to read its SKILL.md instructions.
Popular media & creative skills
hyperframes
heygen-com/hyperframes
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
media-use
heygen-com/hyperframes
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
hyperframes-registry
heygen-com/hyperframes
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
ai-video-generation
101-skills/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
101-skills/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image