Motion · Logo reveal

Logo reveal — quầng sáng mềm

Logo hiện ra trên quầng sáng toả, rồi tiêu đề và tagline trồi lên. 4 giây, 16:9.

1920×108016:930 fps4s · 120 frameGiấy phép: CC0#logo#intro#brand#glow

Nguồn: gimgs ↗ · CC0

Khi nào dùng

Đoạn mở đầu cho video về một công ty/sản phẩm: logo hiện ra, tiếp theo là tiêu đề và mô tả ngắn. Hợp intro thương hiệu, bumper nhà tài trợ, teaser ra mắt app.

Cách chỉnh

logo: ưu tiên SVG nền trong suốt. Tra trên gimgs.net trước (check_icon qua MCP, hoặc thử thẳng https://gimgs.net/brand-logo/{brand}.svg).
accent: lấy màu chủ đạo của thương hiệu. Giữ bg thật tối để quầng sáng nổi.
title ≤ 20 ký tự để nằm một dòng ở cỡ 88px.
Timeline: glow 0–4 s, vòng 0.2–1.8 s, logo 0.35–1.75 s, gạch 1.0–1.9 s, tiêu đề 1.1–2.1 s, phụ đề 1.45–2.45 s. Từ 2.5 s giữ frame cuối — cắt ở đó nếu cần ngắn hơn.

Không đổi

Khối window.motion và kích thước #stage: runtime và bộ render frame phụ thuộc vào chúng.
animation-fill-mode: both trên mọi phần tử động — nhờ nó mà seek tới bất kỳ t nào cũng cho cùng kết quả.

Mọi thứ trên trang này đều có bản máy đọc. Đưa agent link JSON, hoặc thêm MCP server gimgs rồi bảo nó tìm motion template.

Tải JSON — trong đó có prompt, schema tham số và toàn bộ source.
Điền params (bắt đầu từ default_params) rồi mã hoá base64url vào ?p=.
Với mỗi frame mở player với ?t=<giây>, chờ data-motion-ready, chụp đúng kích thước gốc, rồi ghép PNG bằng 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 — quầng sáng mềm".
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 · CC0Mở template gốc ↗

<!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