Skip to content
All skills

/choreograph

Choreograph

Coordinates several elements that animate together, avoiding generic grouped animations. This way your animations will feel more polished and intentional.

Updated November 4, 2026

What it does

  • Assigns each animated element a role, a lead, support, or detail, and gives each a different treatment and delay
  • Decides for each pair whether they move together, overlap in a stagger, or wait for each other
  • Keeps product staggers to 30–80ms per element and under ~300ms in total so it doesn’t feel annoying or overwhelming

When to use it

When more than one thing moves at once: a staggered list, a hero animation, or an item leaving while the rest should move accordingly.

What the skill changed

A pill expanding into a card. Without the skill, the two views crossfade over the resize, so you read both at once. With it, the old view is gone in 90ms, and the new one starts as it goes, while the shape is still growing.

Example prompts

You don’t need special wording. Describe the problem the way you’d describe it to a teammate. Here are some more to try on your own product.

The course behind these skills

These skills come from what I teach in AI for UI. Join the waitlist to get two lessons and be the first to know when enrollment reopens on December 8.