Motion · Chữ động

Chữ động theo từng từ

Từng từ bật ra nối tiếp nhau; từ đánh *dấu sao* nhận màu nhấn và gạch chân. 5 giây, 16:9.

1920×108016:930 fps5s · 150 frameGiấy phép: CC0#typography#text#quote#hook

Nguồn: gimgs ↗ · CC0

0.00s / 5sMở player ↗

Khi nào dùng

Câu hook hoặc trích dẫn cho video social, tiêu đề phân đoạn, câu chốt. Mỗi clip một ý.

Cách chỉnh

  • Đặt câu vào text; đánh dấu sao 1–2 từ mang ý chính (*nhanh*). Các từ còn lại giữ màu fg.
  • Thời điểm từ cuối hiện xong = startAt + (số từ − 1) × stagger + 0.55. Giữ dưới duration (5 s) kẻo bị cắt; từ 12 từ trở lên hãy giảm stagger.
  • Câu dài: hạ size xuống 110–120 để khối chữ vừa 2–3 dòng.
  • Nối nhiều clip với text khác nhau cho cả kịch bản; giữ nguyên accent/bg để liền mạch.

Không đổi

window.motion, kích thước #stage, animation-fill-mode: both. Các span từ được dựng lại mỗi lần apply() — đó là chủ ý.

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.

  1. Tải JSON — trong đó có prompt, schema tham số và toàn bộ source.
  2. Điền params (bắt đầu từ default_params) rồi mã hoá base64url vào ?p=.
  3. 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/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 "Chữ động theo từng từ".
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 · CC0Mở template gốc ↗
<!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>
  1. Write the line
    Short. Star the key words.
  2. Render
    frames 0…149 at t=i/30 → ffmpeg -framerate 30 -i frame-%04d.png -c:v libx264 -pix_fmt yuv420p out.mp4
  3. Chain
    ffmpeg -f concat -safe 0 -i list.txt -c copy script.mp4
paramtypedefaultdescription
textstring"Ship *faster* than your *competitors*"The sentence. Wrap a word in *asterisks* to highlight it. ~3–9 words works best
accentstring · color"#ffb224"Highlight colour
fgstring · color"#ffffff"Text colour
bgstring · color"#111111"Background
sizeinteger150Font size in px (auto-wraps)
staggernumber0.12Seconds between consecutive words
startAtnumber0.4Delay before the first word (seconds)

?p=eyJ0ZXh0IjoiU2hpcCAqZmFzdGVyKiB0aGFuIHlvdXIgKmNvbXBldGl0b3JzKiIsImFjY2VudCI6IiNmZmIyMjQiLCJmZyI6IiNmZmZmZmYiLCJiZyI6IiMxMTExMTEiLCJzaXplIjoxNTAsInN0YWdnZXIiOjAuMTIsInN0YXJ0QXQiOjAuNH0