Stagger Distributions
PrimitivesThree delay distributions across one shared span, so linear, from-centre and eased staggers can be compared directly
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 4 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Countcount · number
Blocks per row.
now: 12
- Spanspan · number
Frames the whole stagger occupies. All three rows share it, so they stay comparable.
now: 30
- Playheadplayhead · boolean
Draw a marker travelling across, so the timing relationship is visible.
now: true
- Brandbrand · string
Brand token id, one of the keys of BRANDS.
now: slate
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
Three rows of twelve blocks demonstrating linear, from-centre and eased stagger distributions simultaneously, with a marker travelling across so the timing relationship is visible.
