Logo entrance animation (credits)

--- name: frame-logo-outro zhname e: "Brand Logo Closing Frame" enname e: "Logo Outro Frame" emoji: "🎬" description: "Logo assembled from pieces + glow bloom + tagline reveal, suitable for video endings / brand closings" category: video scenario: video aspecthint e: "1920×1080 (16:9)" featured: 40 recommended: 8 tags: ["logo", "outro", "branding", "end-card", "frame"] exampleid : sample-frame-logo-outro examplename : "Brand Logo Outro · HTML Anything" exampleformat : markdown exampletagline : "Midnight Indigo + glow bloom" exampledesc : "Logo Assembly + Brand Name + Tagline + CTA, for Video End Credits" examplesourceurl : "https://hyperframes.heygen.com/catalog" examplesourcelabel : "hyperframes · logo-outro" od: mode: video surface: video scenario: video featured: 0.16 upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 designsystem : requires: false exampleprompt : "Use the 'Brand Logo Outro' template to turn my content into a sequence featuring 'logo piece-by-piece assembly + glow bloom + tagline reveal,' suitable for video endings or brand closings. Maintain the template’s visual signature, use real content and data, and avoid lorem ipsum and placeholder images." --- [Template: Logo Outro] [Intent] Brand reveal frame for the end of a video : logo assembled from blocks + glow bloom + tagline floating up + CTA. Inspired by hyperframes logo-outro. 【Canvas】1920×1080, black#08090c or a dark brand background; add a subtle vignetteradial-gradient(...) to make the center brighter. 【Layout】 - Center Logo: Rendered using CSS or inline SVG; composed of 4:8 geometric blocks (circles, squares, triangles, hairline). - Entry 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 animation is complete, apply a glow bloom effect to the entire logo:filter: drop-shadow(0 0 24px <accent>40) ; simultaneously, a shimmer effectmask-image sweeps across the logo (500 ms). - Brand Name: Positioned 6:8% below the logo, in large type (Inter Tight / SF Pro Display, 48:72px, weight 700, letter-spacing -0.02em); entry: typewriter or fade-up after the logo bloom (starting 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, separated by a hairline. 【Color Schemes : Choose 1 of 4, do not mix】 - 🌌 Midnight Indigo : background#08090c , accent#7c5cff (neon purple-blue glow). - 🌅 Solar Amber : background#0e0a08 , accent#ffb547 (warm amber). - 🌿 Forest Mint : bg#0a1410 , accent#5fb38a (薄荷绿). - ⚪ Bone & Ink : bg#f1efea , accent#0a0a0b (no neon, editorial style, replace glow with shadow). 【Design Details】 - Absolutely do not: Use externally linked logo images; logos must be rendered using pure CSS or inline SVG geometry. - Use@keyframes +animation-delay for the entrance animation; this can be disabled viaprefers-reduced-motion . - Fonts: LatinInter Tight /SF Pro Display /Manrope ; ChineseNoto Sans SC , weight 700. - Must use the brand name and tagline provided by the user; If not provided, use the fallback "HTML Anything" / "Anything → beautiful HTML". - Single HTML file; freeze after the entire animation is complete (do not loop; this is the final frame of the video). - Optional 5px ribbon at the top (accent color) to enhance brand recognition.