SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsframe-logo-outro

frame-logo-outro

Design & creation

View repository

Updated 10-16 06:51

About this skill

[Template: Logo Outro] [Intent] The brand reveal frame at the end of the video — logo block assembly + glow bloom + tagline floating up + CTA. Inspired by hyperframes logo-outro.

[Canvas] 1920×1080, black #08090c or brand dark background; add a subtle vignette radial-gradient(...) to make the center brighter.

[Layout]

  • Center Logo: drawn with CSS / inline SVG; composed of 4-8 geometric blocks (circle / square / triangle / hairline).
    • Entrance animation: each block slides in from off-screen (±100px in different directions) + scale 1.4→1.0 + opacity 0→1, staggered by 80ms; total duration 1.2s.
    • After the entrance completes, add a glow bloom to the entire logo: filter: drop-shadow(0 0 24px <accent>40); at the same time a shimmer mask-image sweeps across the logo (500ms).
  • Brand name: positioned 6-8% below the logo, large text (Inter Tight / SF Pro Display, 48-72px, weight 700, letter-spacing -0.02em), entrance: typewriter or fade-up after logo bloom (starts at 1.4s).
  • Tagline: one line below the brand name (24-28px, weight 400, opacity 0.7), fade in (1.8s).
  • Bottom CTA + metadata: two-line bottom row, e.g. htmlanything.dev · @htmlanything · 2026, 11px uppercase letter-spacing 0.16em, color opacity 0.4, hairline divider.

[Color grading — choose 1 of 4, do not mix]

  • 🌌 Midnight Indigo — bg #08090c, accent #7c5cff (neon purple-blue glow).
  • 🌅 Solar Amber — bg #0e0a08, accent #ffb547 (warm amber).
  • 🌿 Forest Mint — bg #0a1410, accent #5fb38a (mint green).
  • ⚪ Bone & Ink — bg #f1efea, accent #0a0a0b (no neon, editorial style, glow changed to shadow).

[Design details]

  • Never: use an external logo image; the logo must be drawn purely with CSS / inline SVG geometry.
  • Use @keyframes + animation-delayfor the entrance animation; it can be disabled by prefers-reduced-motion .
  • Fonts: Western Inter Tight / SF Pro Display / Manrope; Chinese Noto Sans SC weight 700。
  • must use the brand name + tagline provided by the user; if there is none, run the fallback "HTML Anything" / "Anything → beautiful HTML".
  • Single-file HTML; freeze after the entire animation completes (do not loop, this is the video's ending frame).
  • Optional 5px ribbon at the top (accent color) to increase brand recognition.