01
It starts by itself
new logo brief. Runs in Claude Code routine.
- ↻ new logo brief
run when a logo animation is requested
iart-ai · 3K installsLogo Animation skill
Runs by itself, new logo brief.
Every logo reveal ships clean.
Install the Logo Animation skill and make it a habit: follow https://gethabit.dev/skills/iart-ai/logo-animation.md
- 1Copy
- 2Paste into Claude Code, Codex or Cursor
- 3It runs by itself
3K installs151 starsMIT licenceSource on GitHub ↗
Logo Animation
by iart-ai · 3K installs
The skill
The logo animation skill helps designers and developers animate a brand mark for web, video or app splash with one clear technique, a reduced-motion path and a static fallback frame.
Only when you ask.
The habit
Every logo reveal ships clean.
↻ Runs by itselfnew logo brief
How the habit works.
You don't have to.
When does it start? How does it check its work? What does it remember?
One run, step by step.
Then it stops.
Stops after one logo per run, with at most 2 fix rounds.
- 01
Pick one technique
Choose draw, build or morph for the mark, never all three.
- 02
Build the file
Write one .html file with the inline SVG or Lottie canvas, one driver and the freeze harness.
- 03
Freeze and shoot
Open the file at ?t=0, mid and end and screenshot each frame with npx playwright screenshot.
- 04
Check the frames
Confirm geometry is intact, clearspace is clear and the end frame is the true logo.
- 05
Fix and repeat
Adjust stroke-dashoffset, duration or easing and reshoot the same ?t=N until clean.
- 06
Ship fallbacks
Add the prefers-reduced-motion path and a static end-frame SVG or PNG.
What it may do.
Nothing more.
It writes only in its own folder and asks you before anything goes out.
- Writes only inlogo.html, frame-*.png, loops/logo-animation-loop/**
- Talks tono outside service
- Sendsnothing
- Your OKNothing goes out, so it needs no OK.
Is it for you?
Use it when it fits.
Read both lists. If the left one sounds like you, the Logo Animation skill helps.
Use it when
- ✓ You need a logo intro or splash
- ✓ You want an SVG draw-on reveal
- ✓ You sync a mark to a sound-logo
Skip it when
- – You need a full brand identity
- – The logo itself is not designed yet
Logo Animation skill, answered.
Does it do video logo stings?
No. The skill sends video stings to a remotion-video verify loop instead; this loop covers web, SVG and Lottie.
Why freeze frames?
The ?t=N harness pins an exact moment, so the same frame can be checked again after a fix.
How do I install the Logo Animation skill?
Copy the prompt at the top into your agent. It installs the skill from iart-ai/motion-design-skills and sets up the habit. Or run npx skills add iart-ai/motion-design-skills --skill logo-animation.
Is the Logo Animation skill free?
Yes. It is published under MIT. Habit is free too.
Logo Animation. Now as a habit.
Install the Logo Animation skill and make it a habit: follow https://gethabit.dev/skills/iart-ai/logo-animation.md
All iart-ai skills →More design skills →
Works in
- Claude Code
- Codex
- Cursor
- ChatGPT
- Claude app
Made by iart-ai, published under MIT. Habit links to the original and never changes it. Is this your skill?