Motion · Texto cinético

Kinetic words

Words pop in one after another; *starred* words take the accent colour and get underlined. 5 s, 16:9.

1920×108016:930 fps5s · 150 quadrosLicença: CC0#typography#text#quote#hook

Fonte: gimgs ↗ · CC0

0.00s / 5s RepetirAbrir player ↗

When to use

A hook or a quote for social video, a section title, a punchline. One idea per clip.

How to adapt

Put the sentence in text; star the 1–2 words that carry the meaning (*faster*). Everything else stays in fg.
Total run time before the last word lands = startAt + (words − 1) × stagger + 0.55. Keep it under duration (5 s) or the tail is cut; for 12+ words lower stagger.
Long sentences: lower size to 110–120 so the block fits two or three lines.
Chain several clips with different text for a whole script; keep accent/bg identical for continuity.

Do not change

window.motion, #stage size, animation-fill-mode: both. The word spans are rebuilt on every apply() — that is expected.

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/kinetic-words.json

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

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

Prompt

Use the gimgs.net motion template "Kinetic words".
Spec JSON (prompt + params schema + full HTML source): https://gimgs.net/motion/kinetic-words.json
Raw template: https://gimgs.net/motion/kinetic-words/template.html
Player for frame capture: https://gimgs.net/motion/kinetic-words/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

2,936 chars · CC0Abrir template bruto ↗

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kinetic words</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,#111);color:var(--fg,#fff);
    font-family:'Bricolage Grotesque',Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.03em}
  .wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 120px;text-align:center}
  .line{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .28em;font-size:var(--size,150px);line-height:1.02}
  .w{display:inline-block;transform:translateY(60%) rotate(4deg);opacity:0;
    animation:in .55s var(--d) cubic-bezier(.2,.9,.2,1.1) both}
  .w.hi{color:var(--accent,#ffb224)}
  .w.hi::after{content:"";display:block;height:.08em;margin-top:-.06em;background:var(--accent,#ffb224);transform:scaleX(0);transform-origin:0 50%;
    animation:ul .4s calc(var(--d) + .35s) cubic-bezier(.2,.9,.2,1) both}
  @keyframes in{to{transform:none;opacity:1}}
  @keyframes ul{to{transform:scaleX(1)}}
  .dot{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--accent,#ffb224);left:50%;top:50%;transform:translate(-50%,-50%) scale(0);
    animation:dot .9s cubic-bezier(.2,.9,.2,1) both}
  @keyframes dot{0%{transform:translate(-50%,-50%) scale(0)}40%{transform:translate(-50%,-50%) scale(1.6)}100%{transform:translate(-50%,-50%) scale(0)}}
</style>
</head>
<body>
<div id="stage">
  <div class="dot"></div>
  <div class="wrap"><div class="line" id="line"></div></div>
</div>
<script>
window.motion = {
  width: 1920, height: 1080, fps: 30, duration: 5,
  params: { text: "Ship *faster* than your *competitors*", accent: "#ffb224", fg: "#ffffff", bg: "#111111", size: 150, stagger: 0.12, startAt: 0.4 },
  apply: function (p) {
    var s = document.getElementById("stage");
    s.style.setProperty("--accent", p.accent);
    s.style.setProperty("--fg", p.fg);
    s.style.setProperty("--bg", p.bg);
    s.style.setProperty("--size", (+p.size || 150) + "px");
    var line = document.getElementById("line");
    while (line.firstChild) line.removeChild(line.firstChild);
    // words wrapped in *asterisks* get the accent colour + underline
    var words = String(p.text || "").split(/\s+/).filter(Boolean);
    var stagger = Math.max(0.02, +p.stagger || 0.12), start = Math.max(0, +p.startAt || 0);
    words.forEach(function (w, i) {
      var hi = /^\*.+\*$/.test(w);
      var span = document.createElement("span");
      span.className = "w" + (hi ? " hi" : "");
      span.textContent = hi ? w.slice(1, -1) : w;
      span.style.setProperty("--d", (start + i * stagger).toFixed(3) + "s");
      line.appendChild(span);
    });
  }
};
</script>
</body>
</html>

Write the line
Short. Star the key words.
Render
frames 0…149 at t=i/30 → ffmpeg -framerate 30 -i frame-%04d.png -c:v libx264 -pix_fmt yuv420p out.mp4
Chain
ffmpeg -f concat -safe 0 -i list.txt -c copy script.mp4

param	type	default	description
`text`	string	`"Ship faster than your competitors"`	The sentence. Wrap a word in asterisks to highlight it. ~3–9 words works best
`accent`	string · color	`"#ffb224"`	Highlight colour
`fg`	string · color	`"#ffffff"`	Text colour
`bg`	string · color	`"#111111"`	Background
`size`	integer	`150`	Font size in px (auto-wraps)
`stagger`	number	`0.12`	Seconds between consecutive words
`startAt`	number	`0.4`	Delay before the first word (seconds)

?p=eyJ0ZXh0IjoiU2hpcCAqZmFzdGVyKiB0aGFuIHlvdXIgKmNvbXBldGl0b3JzKiIsImFjY2VudCI6IiNmZmIyMjQiLCJmZyI6IiNmZmZmZmYiLCJiZyI6IiMxMTExMTEiLCJzaXplIjoxNTAsInN0YWdnZXIiOjAuMTIsInN0YXJ0QXQiOjAuNH0