Shuffle Grid Preloader
A load sequence built from a three by three grid that riffles. Two columns of credits fade up against a wordmark whose fill climbs line by line, then the panel clears and the grid wipes in. Twenty rounds of random nine-image sets are swapped through at 150ms so the tiles flicker like a shuffling deck, and the final round restores the real center frame. Everything but that tile wipes away, and it scales four times while its own image counter-scales back to one.
npx shadcn@latest add https://ui.aryank.space/r/shuffle-grid-preloader.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| images / heroImage | string[] / string | 35 BLANK stills | The pool the shuffle draws from, and the picture the center tile resolves to. |
| projects | ShuffleProject[] | 16 BLANK credits | Name, director, and location for the loading columns. |
| wordmarkLines / title / introCopy | [string, string] / string | BLANK copy | Loader wordmark and the hero copy revealed after it. |
projectstextCredits listed in the two loading columns.
title / introCopytextHeadline and the two intro lines.
gsap








