Turn a Claude Animation into a GIF for Your GitHub README
A looping demo at the top of a README is the best README feature there is — and GitHub autoplays GIFs inline (it won't autoplay MP4s in markdown). Here's how to make a crisp, small one from a Claude animation.
Steps
- Build or export your animation from Claude Design.
- Drop it on claudevideo.app, choose GIF.
- Keep it short (3–6s) and modest resolution (GIFs balloon fast) — 720p or smaller is ideal for a README.
- Render, download, and commit it, then reference it in markdown:
Keep the file small
GIF only has 256 colors and no real compression, so:
- Trim the length. A tight 4-second loop beats a 15-second one.
- Drop the resolution. README images display small anyway.
- Loop seamlessly with
window.CLAUDE_VIDEO = { duration: 4 }set to a whole animation cycle.
When to use a video instead
For docs sites or landing pages that can embed video, an MP4 is smaller and sharper than a GIF. Reserve GIF for places (like README markdown) that need inline autoplay with no player.