Checklist Tick
DiagramsThe whole list arrives first to set the scope, then each item ticks in turn with the one overshoot this library allows
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 · 5 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.
- Titletitle · string
Mono label above the list.
now: Ships with
- Items *items · array
The list. Four to six items reads best at 16:9.
now: 5 items
- Strikestrike · boolean
Strike through each item as it ticks. Use for a 'no longer needed' list.
now: false
- Per itemperItem · number
Frames between ticks. Below ~10 the sequence stops reading as individual beats.
now: 13
- 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
A checklist where items fade up as a group, then each checkbox fills with the accent colour and a tick draws inside it one after another, with a small satisfying overshoot.
