Motion · Lower third

Lower third — slide bar

Name and role slide in on a frosted bar, hold, then wipe out. Overlay-ready (transparent background). 5 s, 16:9.

1920×108016:930 fps5s · 150 framesLicense: CC0#lower-third#caption#interview#overlay

Source: gimgs ↗ · CC0

When to use

Identify a speaker or a location in interview / documentary / podcast footage. Composite it over the video (set transparent: true, render with alpha) or use the built-in dark gradient for a stand-alone caption card.

How to adapt

name ≤ 24 characters keeps one line at 64px; longer names wrap.
align: "right" mirrors the whole layout for right-side framing.
holdSeconds controls how long the card stays before wiping out; the file is fixed at 5 s so cut the tail if you need it shorter.
Timeline: bar 0–0.5 s, box wipe 0.25–0.85 s, name 0.55–1.05 s, role 0.75–1.25 s, out from holdSeconds for 0.4 s.

Compositing

Render PNG frames with --default-background-color=00000000 (Chromium) or omitBackground: true (Playwright) when transparent is true, then ffmpeg -framerate 30 -i frame-%04d.png -c:v prores_ks -pix_fmt yuva444p10le lower-third.mov.

Do not change

window.motion, #stage size, animation-fill-mode: both.

Everything on this page is also machine-readable. Point your agent at the JSON, or add the gimgs MCP server and ask it to search motion templates.

Fetch the JSON — it contains the prompt, the param schema and the full source.
Fill the params (start from default_params) and encode them as base64url in ?p=.
For each frame open the player with ?t=<seconds>, wait for data-motion-ready, screenshot at the native size, then join the PNGs with ffmpeg.

curl -s https://gimgs.net/motion/lower-third.json

https://gimgs.net/motion/lower-third/play?p=…&t=<seconds>

claude mcp add --transport http gimgs https://gimgs.net/mcp
# then: search_motion_templates / get_motion_template("lower-third")

Prompt

Use the gimgs.net motion template "Lower third — slide bar".
Spec JSON (prompt + params schema + full HTML source): https://gimgs.net/motion/lower-third.json
Raw template: https://gimgs.net/motion/lower-third/template.html
Player for frame capture: https://gimgs.net/motion/lower-third/play?p=<base64url JSON params>&t=<seconds>  (1920x1080, 30 fps, 5s)

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..149 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,186 chars · CC0Open raw template ↗

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Lower third — slide bar</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')}
  @font-face{font-family:'IBM Plex Sans';font-weight:400 600;font-display:block;src:url(https://gimgs.net/fonts/plexsans-400-latin.woff2) format('woff2')}
  html,body{margin:0;background:#000}
  #stage{position:relative;width:1920px;height:1080px;overflow:hidden;font-family:'IBM Plex Sans',system-ui,sans-serif;color:#fff;
    background:var(--bg,linear-gradient(160deg,#1b2735,#090a0f))}
  #stage.transparent{background:transparent}
  .lt{position:absolute;bottom:120px;left:110px;display:flex;align-items:stretch;gap:0}
  #stage.right .lt{left:auto;right:110px;flex-direction:row-reverse}
  .bar{width:14px;background:var(--accent,#ffb224);transform-origin:50% 100%;animation:bar .5s cubic-bezier(.2,.8,.2,1) both,barOut .4s var(--out) ease-in both}
  @keyframes bar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes barOut{to{transform:scaleY(0)}}
  .box{position:relative;overflow:hidden;padding:22px 44px 26px 34px;background:rgba(10,12,18,.82);backdrop-filter:blur(10px);
    clip-path:inset(0 100% 0 0);animation:box .6s .25s cubic-bezier(.2,.8,.2,1) both,boxOut .4s var(--out) ease-in both}
  #stage.right .box{clip-path:inset(0 0 0 100%)}
  @keyframes box{to{clip-path:inset(0 0 0 0)}}
  @keyframes boxOut{to{clip-path:inset(0 0 0 100%)}}
  #stage.right .box{animation-name:boxR,boxOutR}
  @keyframes boxR{to{clip-path:inset(0 0 0 0)}}
  @keyframes boxOutR{to{clip-path:inset(0 100% 0 0)}}
  .name{font-family:'Bricolage Grotesque',Inter,system-ui,sans-serif;font-weight:800;font-size:64px;letter-spacing:-.02em;line-height:1.05;
    transform:translateY(30px);opacity:0;animation:up .5s .55s cubic-bezier(.2,.8,.2,1) both}
  .role{margin-top:8px;font-size:28px;font-weight:500;color:var(--accent,#ffb224);letter-spacing:.06em;text-transform:uppercase;
    transform:translateY(24px);opacity:0;animation:up .5s .75s cubic-bezier(.2,.8,.2,1) both}
  @keyframes up{to{transform:none;opacity:1}}
</style>
</head>
<body>
<div id="stage">
  <div class="lt">
    <div class="bar"></div>
    <div class="box"><div class="name" id="name"></div><div class="role" id="role"></div></div>
  </div>
</div>
<script>
window.motion = {
  width: 1920, height: 1080, fps: 30, duration: 5,
  params: { name: "Ada Lovelace", role: "Founder, Analytical Engines", accent: "#ffb224", align: "left", transparent: false, holdSeconds: 3.6 },
  apply: function (p) {
    var s = document.getElementById("stage");
    s.style.setProperty("--accent", p.accent);
    // out animations start after the hold; the composition is 5 s so keep hold <= 4.4
    var hold = Math.max(1, Math.min(4.4, +p.holdSeconds || 3.6));
    s.style.setProperty("--out", hold + "s");
    s.classList.toggle("right", p.align === "right");
    s.classList.toggle("transparent", !!p.transparent);
    document.getElementById("name").textContent = p.name;
    document.getElementById("role").textContent = p.role;
  }
};
</script>
</body>
</html>

Set params
name, role, accent; transparent=true for overlays.
Render with alpha
playwright: page.screenshot({ omitBackground: true }) per frame → ffmpeg -framerate 30 -i frame-%04d.png -c:v prores_ks -pix_fmt yuva444p10le out.mov
Composite
ffmpeg -i footage.mp4 -i out.mov -filter_complex overlay=0:0:enable='between(t,2,7)' final.mp4

param	type	default	description
`name`	string	`"Ada Lovelace"`	Big line (person, place or topic)
`role`	string	`"Founder, Analytical Engines"`	Small uppercase line in the accent colour
`accent`	string · color	`"#ffb224"`	Bar and role colour
`align`	string left \| right	`"left"`	Which side of the frame
`transparent`	boolean	`false`	true = transparent background for compositing over footage (render PNG frames with alpha, e.g. -c:v prores_ks -pix_fmt yuva444p10le or WebM VP9 with alpha)
`holdSeconds`	number	`3.6`	When the out-animation starts (seconds). The clip is always 5 s

?p=eyJuYW1lIjoiQWRhIExvdmVsYWNlIiwicm9sZSI6IkZvdW5kZXIsIEFuYWx5dGljYWwgRW5naW5lcyIsImFjY2VudCI6IiNmZmIyMjQiLCJhbGlnbiI6ImxlZnQiLCJ0cmFuc3BhcmVudCI6ZmFsc2UsImhvbGRTZWNvbmRzIjozLjZ9