PRO

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.

Component

Project

Director

Lunar Eclipse

Amelia Crawford

Visitor Quarters

Marcus Reynolds

Celestial

Nina Liu // Weston

Streamwave Original

Dylan Pierce

Viewfinder

Javier // Rodriguez

Rhythm Collective

Sophia // Chen

Urban Odyssey

Leo Thompson

Prism No. 1

Taylor // McKnight

Vision Quest

Spencer // Hudson

Wavelength

Kai Nakamura

Desert Horizon

Olivia

Spectrum

Ellis // Moss

Vision Quest II

Hudson // Wright

Auteur

Leo Thompson

Capsule X Design

Sophia // Chen

Pulse

Callum // Winters

Nova

Vice

Location

Toronto, ON

Vancouver Studio, BC

Austin, TX

Sunset Studios - Miami

BLANK Studios - Chicago

London, UK

Pioneer Studios - Seattle

Private Estate - Sedona

Elevation - Denver

San Francisco, CA

New Mexico

Harmony Studio - Montreal

Elevation Studios - Denver

Berlin, DE

Neon House - Brooklyn

Echo Pavilion - Portland

Creative Solutions

Impactful Results

Crafting bold experiences

Install
npx shadcn@latest add https://ui.aryank.space/r/shuffle-grid-preloader.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
images / heroImagestring[] / string35 BLANK stillsThe pool the shuffle draws from, and the picture the center tile resolves to.
projectsShuffleProject[]16 BLANK creditsName, director, and location for the loading columns.
wordmarkLines / title / introCopy[string, string] / stringBLANK copyLoader wordmark and the hero copy revealed after it.
Customize
projectstext

Credits listed in the two loading columns.

title / introCopytext

Headline and the two intro lines.

Dependencies
gsap