say it in motion (free for the taking)
Miggi from Figma hit us up about the tumbl motion ads and asked if we'd post them to the Community, unbranded. So we did.
Five pastel moods with something bold to say. 9:16 story templates that keep it to six words — soft gradients, chunky lowercase, and a bossy period.
Inside:
- 5 remixable story frames
- a 10-second motion cut (hard cuts, slow zoom, text that rises like it means it)
- pixel-doodle how-tos
- a SKILL.md so your AI agent can remix it too 🤖
Swap the words. Keep the pause. Snark not included — bring your own. 💅🏽
Get the file on Figma Community →
the ask
Unbranded doesn't mean de-fanged. Miggi didn't ask us to sand off the attitude — just the ads. So the copy changed (no product names, no shop links baked into the headlines) but the aesthetic didn't move an inch: same gradients, same Maven Pro, same period doing all the emotional labor at the end of a six-word sentence. If you've seen our tumbl stories, this will feel familiar. If you haven't, this is basically the demo reel.
the moods
Five gradients, five one-liners, one rule: six words max, the period does the acting. Mint is the new one — first time it's shown up outside our own palette, and it might be staying.
hot pink · lilac · cream · mint · powder blue — tap any of them to open full size
now watch them move ↓
the motion recipe
The 10-second loop isn't crossfading between scenes — it's cutting. Hard, stepped-opacity cuts every 15% of the timeline, so each mood gets its own beat instead of bleeding into the next one. That's the whole trick: story ads live or die in the first half-second, and a clean cut reads faster than a fade ever will.
Underneath the cuts, the entire frame is doing a slow 1.2% zoom over the full 10 seconds — barely perceptible, but it's the difference between a slideshow and something that feels alive. Each headline rises in on its own delay (13px for the kicker, 26px for the big lowercase line) with an ease-out curve, so the text lands like it's arriving on purpose, not just appearing. The closing scene staggers kicker → wordmark → body → CTA about 0.45 seconds apart, which is long enough to actually read each line before the next one shows up.
the clone trick
Small dev note for anyone poking at the file: Figma's Plugin API exposes keyframe animation data, but it's read-only — you can inspect a timeline, you cannot write one. So there was no "generate 5 new animated scenes from scratch" shortcut here. The move was cloning the original animated frame (keyframes travel with a clone) and reskinning the copy's text, fills, and colors in place. The timeline itself never got touched, which is also why the motion in the Community file is bit-for-bit identical to the version Miggi saw. If you want to swap which five moods are in the loop, that part's still a manual edit in the Figma timeline panel — the API won't let an agent do it for you yet.
the whole file, one page, doodle arrows doing the tour-guide work
for the robots
Every design file we ship from here on out gets a SKILL.md. It's a plain-text spec — frame anatomy, exact type sizes, the five gradient hex pairs, voice rules, motion timings — written so an AI agent can read the file and remix it correctly without guessing. We build with agents daily; it felt dishonest to ship a "remix this" file that only a human could actually remix. Bring your own Claude, ChatGPT, whatever — point it at the file and it'll know the rules.
the actual SKILL.md, dropped straight into the file
remix rules ↓
how-to cards + credits
Static instructions are boring, so the "how to remix this" section is three pixel-doodle cards instead of a wall of text: pick a mood (swap the gradient, that's it), say less (six words max, the period does the acting), let it breathe (the pause is the motion — don't crowd it).
The pixel sprites are just grids of rounded rectangles — no plugin, no icon library, just rectangles placed by coordinate. Cheap to make, weirdly charming at this scale.
Cover art, five story templates, the animated cut, three how-to cards, a credits frame, and the agent-readable spec. Doodle arrows connect all of it, because static instructions are boring.
Get the file on Figma Community →
made by Joi @joijetson for love of keys @clawsxcode · clawsxcode.com