Designers
ToolsDocsProAll the Possibles

All 141 tools / Motion

Plan staggered reveal delays for a list so the whole sequence fits a time budget

Stagger plannerFreeFor designers and developers

25/day

free runs a day, no sign-in.

Before: what you give it

The example input, as typed in. You type in numbers or values.

count: 8
duration_ms: 300
pattern: linear
step_ms: 50
budget_ms: 600

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

8 item(s), linear, 300 ms each. Step used: 42.9 ms. Total: 600 ms (budget 600 ms).

Delays (ms): 0, 43, 86, 129, 171, 214, 257, 300

.item { animation: reveal 300ms ease-out both; animation-delay: calc(var(--i) * 42.9ms); }
/* set style="--i:0" ... style="--i:7" on each item */

- Step reduced from 50 ms to 42.9 ms to keep the whole sequence inside 600 ms.

Limits: the 600 ms budget and 30 to 80 ms step range are conventions. Reduced-motion users should get the end state with no stagger. Delays are rounded to whole ms.

What you get

A delay per item, step used, total time, a CSS custom-property snippet, and warnings

What it cannot do

The 600 ms default budget is a convention; the CSS snippet is given for linear patterns only.

Who it is for

  • Designers
  • Developers

Free and Pro

Free25 runs a day per IP address, up to 100,000 characters a run.
ProNo daily limit, 300 requests a minute, up to 200,000 characters a run.

What each plan includes

Use it from your assistant

The tool is called plan_stagger. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.

claude mcp add --transport http designers https://designers.allthepossibles.com/mcp
curl -X POST https://designers.allthepossibles.com/api/stagger-planner -H 'content-type: application/json' -d '{"count":8,"duration_ms":300,"pattern":"linear","step_ms":50,"budget_ms":600}'

Try it here

The form starts with the same example input, so you can run it first and then swap in your own.

More in motion

All motion tools