Shuffle Loader is a row of blocks that perpetually trade places: one lifts up, slides over its neighbors, and drops into a new slot. The block count, speed, and timing curve are props. Built with Framer Motion and Tailwind CSS. A more interesting waiting state than a spinner for page transitions, AI generation pauses, and background job indicators.
Installation
Usage
import { ShuffleLoader } from "@/components/ui/shuffle-loader";<div className="grid place-content-center bg-neutral-950 p-8">
<ShuffleLoader />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
count | number | 5 | Number of blocks in the row. |
size | number | 32 | Width/height of each block in pixels. Also drives the lift/drop distance. |
className | string | — | Classes for the outer flex container. |