Motion · Logo reveal

Logo reveal — soft glow

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

1920×108016:930 fps4s · 120 quadrosLicença: CC0#logo#intro#brand#glow

Fonte: gimgs ↗ · CC0

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.

Tudo nesta página também é legível por máquina. Aponte seu agente para o JSON ou adicione o servidor MCP do gimgs e peça para buscar templates de motion.

Baixe o JSON — contém o prompt, o schema de parâmetros e o código completo.
Preencha os parâmetros (comece por default_params) e codifique em base64url em ?p=.
Para cada quadro abra o player com ?t=<segundos>, aguarde data-motion-ready, capture no tamanho nativo e junte os PNGs com ffmpeg.

curl -s https://gimgs.net/motion/logo-reveal-glow.json

https://gimgs.net/motion/logo-reveal-glow/play?p=…&t=<seconds>

claude mcp add --transport http gimgs https://gimgs.net/mcp
# then: search_motion_templates / get_motion_template("logo-reveal-glow")

Prompt

Use the gimgs.net motion template "Logo reveal — soft glow".
Spec JSON (prompt + params schema + full HTML source): https://gimgs.net/motion/logo-reveal-glow.json
Raw template: https://gimgs.net/motion/logo-reveal-glow/template.html
Player for frame capture: https://gimgs.net/motion/logo-reveal-glow/play?p=<base64url JSON params>&t=<seconds>  (1920x1080, 30 fps, 4s)

1. Read the JSON and follow its "prompt" section.
2. Fill the params (start from default_params) for: <describe what you want>.
3. Render: open the player at t = i/fps for i in 0..119 in headless Chromium (viewport 1920x1080, wait for document.documentElement.dataset.motionReady === "1"), screenshot each frame, then ffmpeg -framerate 30 -i frame-%04d.png -c:v libx264 -pix_fmt yuv420p out.mp4
4. If you need to change the design, edit the HTML but keep window.motion and #stage so the same renderer works.

JSON · Markdown · llms.txt

3,444 chars · CC0Abrir template bruto ↗

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Logo reveal — soft glow</title>
<style>
  @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')}
  html,body{margin:0;background:#000}
  #stage{position:relative;width:1920px;height:1080px;overflow:hidden;background:var(--bg,#0b0c10);font-family:'Bricolage Grotesque',Inter,system-ui,sans-serif;color:#fff}
  /* every animation uses fill-mode both so any t can be seeked deterministically */
  .glow{position:absolute;left:50%;top:50%;width:900px;height:900px;border-radius:50%;
    background:radial-gradient(circle,var(--accent,#635bff) 0%,transparent 60%);filter:blur(60px);opacity:0;
    animation:glow 4s cubic-bezier(.2,.7,.2,1) both}
  @keyframes glow{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}35%{opacity:.55}100%{transform:translate(-50%,-50%) scale(1.4);opacity:.25}}
  .ring{position:absolute;left:50%;top:50%;width:420px;height:420px;border:3px solid var(--accent,#635bff);border-radius:50%;
    transform:translate(-50%,-50%) scale(.2);opacity:0;animation:ring 1.6s .2s cubic-bezier(.2,.7,.2,1) both}
  @keyframes ring{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}40%{opacity:.9}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}
  .logo{position:absolute;left:50%;top:50%;width:260px;height:260px;display:flex;align-items:center;justify-content:center;
    transform:translate(-50%,-62%) scale(.4);opacity:0;animation:logo 1.4s .35s cubic-bezier(.2,.9,.2,1.1) both}
  .logo img{max-width:100%;max-height:100%;filter:drop-shadow(0 20px 50px rgba(0,0,0,.45))}
  @keyframes logo{0%{transform:translate(-50%,-62%) scale(.4);opacity:0}100%{transform:translate(-50%,-62%) scale(1);opacity:1}}
  .title{position:absolute;left:0;right:0;top:66%;text-align:center;font-weight:800;font-size:88px;letter-spacing:-.02em;
    transform:translateY(40px);opacity:0;animation:up 1s 1.1s cubic-bezier(.2,.7,.2,1) both}
  .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);
    transform:translateY(30px);opacity:0;animation:up 1s 1.45s cubic-bezier(.2,.7,.2,1) both}
  @keyframes up{to{transform:none;opacity:1}}
  .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}
  @keyframes line{to{width:160px}}
</style>
</head>
<body>
<div id="stage">
  <div class="glow"></div>
  <div class="ring"></div>
  <div class="logo"><img id="logo" alt=""></div>
  <div class="line"></div>
  <div class="title" id="title"></div>
  <div class="sub" id="sub"></div>
</div>
<script>
window.motion = {
  width: 1920, height: 1080, fps: 30, duration: 4,
  params: { logo: "https://gimgs.net/brand-logo/stripe.svg", title: "Stripe", subtitle: "Payments infrastructure", accent: "#635bff", bg: "#0b0c10" },
  apply: function (p) {
    var s = document.getElementById("stage");
    s.style.setProperty("--accent", p.accent);
    s.style.setProperty("--bg", p.bg);
    var img = document.getElementById("logo");
    if (img.getAttribute("src") !== p.logo) img.src = p.logo;
    document.getElementById("title").textContent = p.title;
    document.getElementById("sub").textContent = p.subtitle;
  }
};
</script>
</body>
</html>

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.
Set params
title, subtitle, accent = brand colour. Encode as base64url JSON for ?p=.
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

param	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

?p=eyJsb2dvIjoiaHR0cHM6Ly9naW1ncy5uZXQvYnJhbmQtbG9nby9zdHJpcGUuc3ZnIiwidGl0bGUiOiJTdHJpcGUiLCJzdWJ0aXRsZSI6IlBheW1lbnRzIGluZnJhc3RydWN0dXJlIiwiYWNjZW50IjoiIzYzNWJmZiIsImJnIjoiIzBiMGMxMCJ9