Doodle Card Stack
DiagramsHand-drawn marker cards drop into a stack bottom row first, each outline wobbled off true by its own seed
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
Hand-lettered line above the stack. Omit to let the stack carry the frame alone.
now: Everything, stacked
- Rows *rows · array
Cards per row, bottom row FIRST. [4,3,2,1] builds a pyramid; [3,3,3] builds a wall. Keep rows under five or the cards get too small to read.
now: 4 items
- Wobblewobble · number
How hand-drawn the outlines are. 0 is a clean vector rectangle; 1 is a loose marker sketch.
now: 0.55
- Crowncrown · boolean
Pop a marker star above the top card once the stack completes.
now: true
- Brandbrand · string
Brand token id, one of the keys of BRANDS. Written for the light brands.
now: paper
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A vertical frame where flat illustrated cards drop in and build up into a pyramid, bottom row first. The outlines must look hand-drawn with a marker, wobbling off true, thicker at the corners, not like rounded rectangles. Flat colour fills only, no gradients. Let them overshoot slightly as they land, since they are light illustrated objects, and pop a hand-drawn star above the top card once the stack completes.
