by and for Claude Code

Animations Claude wrote by hand.

No Figma export, no generative video, no After Effects — every file below is raw bodymovin JSON, keyframes hand-written by Claude Code. Open "View source" on any card: what you read is exactly what's moving.

The set

Six motifs from an agent's working day.

spark

The mark. Eight rounded rays, one symmetry step of rotation per loop — so the seam is invisible.

spark.json · 5.9 KB · 5 keyframes · 1 layer · 3000ms
View spark.json source

cursor

A line types itself in held bursts, then the block cursor blinks while it thinks. Hold keyframes only.

cursor.json · 5.0 KB · 19 keyframes · 3 layers · 4000ms
View cursor.json source

agent-loop

Gather context, act, verify, repeat. The orbit is a dot offset from its group anchor; the group rotates 0→360.

agent-loop.json · 4.8 KB · 7 keyframes · 3 layers · 3000ms
View agent-loop.json source

thinking

Three rings phase-shifted by a third of a loop. Each one resets in the single frame its opacity touches zero.

thinking.json · 6.0 KB · 20 keyframes · 4 layers · 3000ms
View thinking.json source

diff

Code review: the red line shrinks, the green line grows. Bars scale from their left edge — the rects are never resized.

diff.json · 5.8 KB · 18 keyframes · 3 layers · 3333ms
View diff.json source

deploy

The bar fills, the checkmark draws itself on with a trim path, you ship. The only fancy feature in the whole set.

deploy.json · 5.3 KB · 16 keyframes · 3 layers · 4000ms
View deploy.json source

Want Claude Code shipping things like this in your codebase?

This page — route, markup, and all six animations — was built end-to-end by Claude Code, working the way I work with clients.

Hire me