Three rows of brand cards slide in from alternating sides, hold as a filled wall, then slide out together while the frame fades
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 · 2 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.
- Cards *cards · array
The wall, dealt into three rows in order: the first five to the top row, the next five to the middle, the rest to the bottom. Seventeen fills the reference layout exactly; fewer are cycled to keep every row covered.
now: 17 items
- Brandbrand · string
Brand token id, one of the keys of BRANDS. Written for the light brands; the card grounds are mixed out of ink, surface, accent and accentAlt.
now: sky
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A wall of customer logo cards on a pale blue ground, three rows deep. Each row is a finite strip of rounded cards, and every card has its own ground: near-black, cream, navy, a warm gradient, and one bright card with a screen tipped inside it. A drawn mark and a wordmark sit centred on each. The top and bottom rows come in from the right and the middle one from the left, all decelerating hard into place so the wall fills from three directions at once; the middle row's cards arrive staggered and close up on each other as they settle. Once the wall is full, every row slides out leftward together, the middle one stopping dead and reversing to do it, and the frame fades over the last second. No looping and no edge masks: the strips are finite and their ends are allowed to show.
