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 @compronents/shuffle-grid-preloaderInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| 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








