# Logo reveal — soft glow

Logo pops in over a soft radial glow, then title and tagline rise. 4 s, 16:9.

- Category: logo-reveal · Tags: logo, intro, brand, glow
- Spec: 1920×1080 @ 30 fps · 4s (16:9)
- License: CC0 · Tier: free
- JSON: https://gimgs.net/motion/logo-reveal-glow.json
- Kind: html
- Template HTML: https://gimgs.net/motion/logo-reveal-glow/template.html
- Player: https://gimgs.net/motion/logo-reveal-glow/play?p=<base64url JSON params>[&t=<seconds>]
- Credits: gimgs — https://gimgs.net/motion
- Page: https://gimgs.net/motion/logo-reveal-glow.html

## Params

| name | type | default | description |
|---|---|---|---|
| `logo` | string (uri) | `"https://gimgs.net/brand-logo/stripe.svg"` | Logo URL (SVG/PNG). gimgs.net/brand-logo/{slug}.svg, /crypto/{ticker}.svg or /stock/{slug}.svg work without CORS issues |
| `title` | string | `"Stripe"` | Big headline under the logo |
| `subtitle` | string | `"Payments infrastructure"` | Small uppercase line in the accent colour |
| `accent` | string (color) | `"#635bff"` | Glow, ring, divider and subtitle colour — use the brand colour |
| `bg` | string (color) | `"#0b0c10"` | Background |

Default params (base64url for `?p=`): `eyJsb2dvIjoiaHR0cHM6Ly9naW1ncy5uZXQvYnJhbmQtbG9nby9zdHJpcGUuc3ZnIiwidGl0bGUiOiJTdHJpcGUiLCJzdWJ0aXRsZSI6IlBheW1lbnRzIGluZnJhc3RydWN0dXJlIiwiYWNjZW50IjoiIzYzNWJmZiIsImJnIjoiIzBiMGMxMCJ9`

## Prompt

## When to use
Opening 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.

## How to adapt
- `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`).
- `accent`: pull the brand's primary colour. Keep `bg` very dark so the glow reads.
- Keep `title` ≤ 20 characters if you want a single line at 88px.
- 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.

## Do not change
- `window.motion` block and `#stage` size: the host runtime and the frame renderer rely on them.
- `animation-fill-mode: both` on every animated element — this is what makes seeking to any `t` deterministic.

## Flow

1. **Find the logo** — tool: gimgs MCP check_icon / upload_icon
   Use https://gimgs.net/brand-logo/{slug}.svg. Upload an official SVG if it is missing.
2. **Set params**
   title, subtitle, accent = brand colour. Encode as base64url JSON for ?p=.
3. **Render**
   `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`

## Render

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.

## 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.