{
  "slug": "logo-reveal-glow",
  "title": "Logo reveal — soft glow",
  "tagline": "Logo pops in over a soft radial glow, then title and tagline rise. 4 s, 16:9.",
  "description": "Free CC0 logo reveal motion template: self-contained HTML, deterministic, agent-friendly. Swap the logo, title and accent colour, render to MP4 frame by frame.",
  "category": "logo-reveal",
  "tags": [
    "logo",
    "intro",
    "brand",
    "glow"
  ],
  "tier": "free",
  "license": "CC0",
  "spec": {
    "width": 1920,
    "height": 1080,
    "fps": 30,
    "duration": 4,
    "aspect": "16:9"
  },
  "kind": "html",
  "params_schema": {
    "type": "object",
    "properties": {
      "logo": {
        "type": "string",
        "format": "uri",
        "default": "https://gimgs.net/brand-logo/stripe.svg",
        "description": "Logo URL (SVG/PNG). gimgs.net/brand-logo/{slug}.svg, /crypto/{ticker}.svg or /stock/{slug}.svg work without CORS issues"
      },
      "title": {
        "type": "string",
        "default": "Stripe",
        "maxLength": 32,
        "description": "Big headline under the logo"
      },
      "subtitle": {
        "type": "string",
        "default": "Payments infrastructure",
        "maxLength": 48,
        "description": "Small uppercase line in the accent colour"
      },
      "accent": {
        "type": "string",
        "format": "color",
        "default": "#635bff",
        "description": "Glow, ring, divider and subtitle colour — use the brand colour"
      },
      "bg": {
        "type": "string",
        "format": "color",
        "default": "#0b0c10",
        "description": "Background"
      }
    }
  },
  "default_params": {
    "logo": "https://gimgs.net/brand-logo/stripe.svg",
    "title": "Stripe",
    "subtitle": "Payments infrastructure",
    "accent": "#635bff",
    "bg": "#0b0c10"
  },
  "preview": {
    "poster": "https://gimgs.net/motion/media/logo-reveal-glow/poster-3f557412ab64.jpg",
    "video": ""
  },
  "variants": [],
  "credits": {
    "author": "gimgs",
    "url": "https://gimgs.net/motion"
  },
  "page_url": "https://gimgs.net/motion/logo-reveal-glow.html",
  "json_url": "https://gimgs.net/motion/logo-reveal-glow.json",
  "template_url": "https://gimgs.net/motion/logo-reveal-glow/template.html",
  "play_url": "https://gimgs.net/motion/logo-reveal-glow/play",
  "markdown_url": "https://gimgs.net/motion/logo-reveal-glow.md",
  "updated_at": "2026-09-24T07:24:48.243Z",
  "prompt": "## When to use\nOpening sting for a video about a company or product: the logo appears, a headline and a short descriptor follow. Works for brand intros, sponsor bumpers, app launch teasers.\n\n## How to adapt\n- `logo`: prefer an SVG with transparent background. Look the brand up on gimgs.net first (`check_icon` on the MCP server, or just try `https://gimgs.net/brand-logo/{brand}.svg`).\n- `accent`: pull the brand's primary colour. Keep `bg` very dark so the glow reads.\n- Keep `title` ≤ 20 characters if you want a single line at 88px.\n- Timeline: glow 0–4 s, ring 0.2–1.8 s, logo 0.35–1.75 s, divider 1.0–1.9 s, title 1.1–2.1 s, subtitle 1.45–2.45 s. Final frame holds from 2.5 s — cut there for a shorter sting.\n\n## Do not change\n- `window.motion` block and `#stage` size: the host runtime and the frame renderer rely on them.\n- `animation-fill-mode: both` on every animated element — this is what makes seeking to any `t` deterministic.",
  "flow": [
    {
      "step": "Find the logo",
      "tool": "gimgs MCP check_icon / upload_icon",
      "note": "Use https://gimgs.net/brand-logo/{slug}.svg. Upload an official SVG if it is missing."
    },
    {
      "step": "Set params",
      "note": "title, subtitle, accent = brand colour. Encode as base64url JSON for ?p=."
    },
    {
      "step": "Render",
      "cmd": "for i in $(seq 0 119); do t=$(echo \"$i/30\" | bc -l); chromium --headless --window-size=1920,1080 --screenshot=frame-$(printf %04d $i).png \"https://gimgs.net/motion/logo-reveal-glow/play?p=$P&t=$t\"; done; ffmpeg -framerate 30 -i frame-%04d.png -c:v libx264 -pix_fmt yuv420p out.mp4"
    }
  ],
  "files": [],
  "contract": "Self-contained HTML. Declares window.motion = { width, height, fps, duration, params, apply(params) [, seek(t)] }; root element #stage sized width×height; animations are CSS/WAAPI with animation-fill-mode: both so any t can be seeked via document.getAnimations(). The host runtime (injected by /play) merges ?p params, calls apply(), scales #stage to the viewport and, when ?t is given, pauses and seeks deterministically.",
  "render": {
    "frames": 120,
    "frame_url": "https://gimgs.net/motion/logo-reveal-glow/play?p=<base64url(JSON params)>&t=<seconds>",
    "note": "Open frame_url in a headless browser with viewport width×height (deviceScaleFactor 1), wait for document.documentElement.dataset.motionReady === '1', screenshot; repeat for t = i/fps (i = 0…frames-1); then `ffmpeg -framerate <fps> -i frame-%04d.png -c:v libx264 -pix_fmt yuv420p out.mp4`. Or drop ?t to play it live."
  },
  "source": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Logo reveal — soft glow</title>\n<style>\n  @font-face{font-family:'Bricolage Grotesque';font-weight:600 800;font-display:block;src:url(https://gimgs.net/fonts/bricolage-600-latin.woff2) format('woff2')}\n  html,body{margin:0;background:#000}\n  #stage{position:relative;width:1920px;height:1080px;overflow:hidden;background:var(--bg,#0b0c10);font-family:'Bricolage Grotesque',Inter,system-ui,sans-serif;color:#fff}\n  /* every animation uses fill-mode both so any t can be seeked deterministically */\n  .glow{position:absolute;left:50%;top:50%;width:900px;height:900px;border-radius:50%;\n    background:radial-gradient(circle,var(--accent,#635bff) 0%,transparent 60%);filter:blur(60px);opacity:0;\n    animation:glow 4s cubic-bezier(.2,.7,.2,1) both}\n  @keyframes glow{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}35%{opacity:.55}100%{transform:translate(-50%,-50%) scale(1.4);opacity:.25}}\n  .ring{position:absolute;left:50%;top:50%;width:420px;height:420px;border:3px solid var(--accent,#635bff);border-radius:50%;\n    transform:translate(-50%,-50%) scale(.2);opacity:0;animation:ring 1.6s .2s cubic-bezier(.2,.7,.2,1) both}\n  @keyframes ring{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}40%{opacity:.9}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}\n  .logo{position:absolute;left:50%;top:50%;width:260px;height:260px;display:flex;align-items:center;justify-content:center;\n    transform:translate(-50%,-62%) scale(.4);opacity:0;animation:logo 1.4s .35s cubic-bezier(.2,.9,.2,1.1) both}\n  .logo img{max-width:100%;max-height:100%;filter:drop-shadow(0 20px 50px rgba(0,0,0,.45))}\n  @keyframes logo{0%{transform:translate(-50%,-62%) scale(.4);opacity:0}100%{transform:translate(-50%,-62%) scale(1);opacity:1}}\n  .title{position:absolute;left:0;right:0;top:66%;text-align:center;font-weight:800;font-size:88px;letter-spacing:-.02em;\n    transform:translateY(40px);opacity:0;animation:up 1s 1.1s cubic-bezier(.2,.7,.2,1) both}\n  .sub{position:absolute;left:0;right:0;top:77%;text-align:center;font-weight:600;font-size:30px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent,#635bff);\n    transform:translateY(30px);opacity:0;animation:up 1s 1.45s cubic-bezier(.2,.7,.2,1) both}\n  @keyframes up{to{transform:none;opacity:1}}\n  .line{position:absolute;left:50%;top:62.5%;height:2px;width:0;background:var(--accent,#635bff);transform:translateX(-50%);animation:line .9s 1s cubic-bezier(.2,.7,.2,1) both}\n  @keyframes line{to{width:160px}}\n</style>\n</head>\n<body>\n<div id=\"stage\">\n  <div class=\"glow\"></div>\n  <div class=\"ring\"></div>\n  <div class=\"logo\"><img id=\"logo\" alt=\"\"></div>\n  <div class=\"line\"></div>\n  <div class=\"title\" id=\"title\"></div>\n  <div class=\"sub\" id=\"sub\"></div>\n</div>\n<script>\nwindow.motion = {\n  width: 1920, height: 1080, fps: 30, duration: 4,\n  params: { logo: \"https://gimgs.net/brand-logo/stripe.svg\", title: \"Stripe\", subtitle: \"Payments infrastructure\", accent: \"#635bff\", bg: \"#0b0c10\" },\n  apply: function (p) {\n    var s = document.getElementById(\"stage\");\n    s.style.setProperty(\"--accent\", p.accent);\n    s.style.setProperty(\"--bg\", p.bg);\n    var img = document.getElementById(\"logo\");\n    if (img.getAttribute(\"src\") !== p.logo) img.src = p.logo;\n    document.getElementById(\"title\").textContent = p.title;\n    document.getElementById(\"sub\").textContent = p.subtitle;\n  }\n};\n</script>\n</body>\n</html>\n"
}