Motion · Social

Story countdown 9:16

3-2-1 countdown with pulse rings, then a headline and a pill CTA. Vertical 1080×1920 for Stories, Reels, Shorts. 6 s.

1080×19209:1630 fps6s · 180 framesLicense: CC0#countdown#story#reels#shorts#vertical#9:16

Source: gimgs ↗ · CC0

When to use

Teasers and announcements for vertical social video: product drops, live-stream start, giveaway deadline, event reminder.

How to adapt

from = 3 gives the classic 3-2-1; the GO word appears at from seconds, headline at from + 0.35, CTA at from + 0.7. With from: 5 the clip is fully used (6 s total); with from: 1 there is a long hold — cut at ~3 s.
Keep headline under ~40 characters for two clean lines at 96px.
Match accent to the campaign colour; the top glow is derived from it automatically.
Add sound: a tick per second and a hit on GO line up with t = 0,1,2,… and t = from.

Do not change

window.motion, #stage size (1080×1920), 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/story-countdown.json

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

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

Prompt

Use the gimgs.net motion template "Story countdown 9:16".
Spec JSON (prompt + params schema + full HTML source): https://gimgs.net/motion/story-countdown.json
Raw template: https://gimgs.net/motion/story-countdown/template.html
Player for frame capture: https://gimgs.net/motion/story-countdown/play?p=<base64url JSON params>&t=<seconds>  (1080x1920, 30 fps, 6s)

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..179 in headless Chromium (viewport 1080x1920, 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

4,180 chars · CC0Open raw template ↗

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Story countdown 9:16</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:1080px;height:1920px;overflow:hidden;color:#fff;font-family:'Bricolage Grotesque',Inter,system-ui,sans-serif;
    background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--accent,#ff4d6d) 55%,#000) 0%,var(--bg,#0b0c10) 60%)}
  .num{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-weight:800;font-size:520px;line-height:1;letter-spacing:-.06em;
    opacity:0;animation:num 1s var(--d) cubic-bezier(.2,.9,.2,1) both}
  @keyframes num{0%{transform:translate(-50%,-50%) scale(1.6);opacity:0}25%{transform:translate(-50%,-50%) scale(1);opacity:1}80%{opacity:1}100%{transform:translate(-50%,-50%) scale(.9);opacity:0}}
  .ring{position:absolute;left:50%;top:38%;width:640px;height:640px;border-radius:50%;border:6px solid var(--accent,#ff4d6d);transform:translate(-50%,-50%) scale(.6);opacity:0;
    animation:ring 1s var(--d) cubic-bezier(.2,.9,.2,1) both}
  /* 0% must be invisible: with fill-mode both the 0% state shows during the delay, so rings for 2 and 1 would stack on the 3 */
  @keyframes ring{0%{transform:translate(-50%,-50%) scale(.6);opacity:0}8%{transform:translate(-50%,-50%) scale(.68);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
  .go{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-weight:800;font-size:260px;letter-spacing:-.04em;color:var(--accent,#ff4d6d);
    opacity:0;animation:go .7s var(--go) cubic-bezier(.2,.9,.2,1.2) both}
  @keyframes go{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
  .head{position:absolute;left:90px;right:90px;top:62%;text-align:center;font-weight:800;font-size:96px;line-height:1.05;letter-spacing:-.03em;
    opacity:0;transform:translateY(40px);animation:up .6s calc(var(--go) + .35s) cubic-bezier(.2,.8,.2,1) both}
  .cta{position:absolute;left:50%;top:80%;transform:translateX(-50%) translateY(30px);padding:26px 60px;border-radius:999px;background:var(--accent,#ff4d6d);color:#fff;font-weight:700;font-size:44px;letter-spacing:.02em;white-space:nowrap;
    opacity:0;animation:cta .6s calc(var(--go) + .7s) cubic-bezier(.2,.8,.2,1) both}
  @keyframes up{to{transform:none;opacity:1}}
  @keyframes cta{to{transform:translateX(-50%);opacity:1}}
  .bar{position:absolute;left:0;top:0;height:14px;background:var(--accent,#ff4d6d);width:0;animation:bar var(--total) linear both}
  @keyframes bar{to{width:100%}}
</style>
</head>
<body>
<div id="stage">
  <div class="bar"></div>
  <div id="nums"></div>
  <div class="go" id="go"></div>
  <div class="head" id="head"></div>
  <div class="cta" id="cta"></div>
</div>
<script>
window.motion = {
  width: 1080, height: 1920, fps: 30, duration: 6,
  params: { from: 3, goText: "GO", headline: "New drop this Friday", cta: "Set a reminder", accent: "#ff4d6d", bg: "#0b0c10" },
  apply: function (p) {
    var s = document.getElementById("stage");
    s.style.setProperty("--accent", p.accent); s.style.setProperty("--bg", p.bg);
    var from = Math.max(1, Math.min(5, Math.round(+p.from || 3)));
    var nums = document.getElementById("nums");
    while (nums.firstChild) nums.removeChild(nums.firstChild);
    for (var i = 0; i < from; i++) {
      var d = i * 1; // one second per number
      var n = document.createElement("div"); n.className = "num"; n.textContent = String(from - i); n.style.setProperty("--d", d + "s"); nums.appendChild(n);
      var r = document.createElement("div"); r.className = "ring"; r.style.setProperty("--d", d + "s"); nums.appendChild(r);
    }
    s.style.setProperty("--go", from + "s");
    s.style.setProperty("--total", window.motion.duration + "s");
    document.getElementById("go").textContent = p.goText;
    document.getElementById("head").textContent = p.headline;
    document.getElementById("cta").textContent = p.cta;
  }
};
</script>
</body>
</html>

Write copy
headline ≤ 40 chars, cta ≤ 20 chars.
Render 9:16
viewport 1080×1920; frames 0…179 at t=i/30 → ffmpeg -framerate 30 -i frame-%04d.png -c:v libx264 -pix_fmt yuv420p story.mp4
Add audio
ffmpeg -i story.mp4 -i ticks.wav -c:v copy -shortest story-audio.mp4

param	type	default	description
`from`	integer	`3`	Count from this number down to 1 (one second each)
`goText`	string	`"GO"`	Word shown after the countdown
`headline`	string	`"New drop this Friday"`	Two-line headline under the number
`cta`	string	`"Set a reminder"`	Pill button text
`accent`	string · color	`"#ff4d6d"`	Rings, GO, pill, progress bar and the top glow
`bg`	string · color	`"#0b0c10"`	Base background

?p=eyJmcm9tIjozLCJnb1RleHQiOiJHTyIsImhlYWRsaW5lIjoiTmV3IGRyb3AgdGhpcyBGcmlkYXkiLCJjdGEiOiJTZXQgYSByZW1pbmRlciIsImFjY2VudCI6IiNmZjRkNmQiLCJiZyI6IiMwYjBjMTAifQ