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

frame-logo-outro

Design & creation

View repository

Updated 10-16 09:34

About this skill

[Template: Logo Outro Frame (Logo Outro)] [Intent] Brand reveal frame at the end of a video — logo block assembly + glow bloom + tagline float-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 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-row bottom row, e.g. htmlanything.dev · @htmlanything · 2026, 11px uppercase letter-spacing 0.16em, color opacity 0.4, hairline divider.

[Color — 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, change glow to shadow).

[Design Details]

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