Sliding puzzle image gallery for React and Tailwind CSS (shadcn/ui): each photo arrives shuffled into a 15-puzzle and solves itself one sliding tile at a time, then the last piece drops in, the seams close and a sheen sweeps across the finished picture. It is built to hold attention: an unfinished picture keeps the eye on it until the last tile clicks into place, and every new photo shows up as scrambled pieces first, so visitors stay to see what it becomes. Visitors can take over: click a tile in line with the gap or use the arrow keys, and the board solves itself again once they stop. Thumbnails, prev and next, a move counter, 3x3 to 6x6 grids, optional tile numbers, details beside the board on wide screens and folded into a compact bar under it on narrow ones, and a reduced-motion fallback. Use it where one image should hold attention: hero sections, product reveals and portfolio highlights.
"use client";
import { SlidingPuzzleGallery } from "@/components/ui/sliding-puzzle-gallery";
import type { PuzzleItem } from "@/components/ui/sliding-puzzle-gallery";
const settings = {
size: 4,
autoplay: true,
hold: 2400,
moveDuration: 150,
shuffleMoves: 16,
playable: true,
numbers: false,
gap: 4,
};
const PHOTOS = [
{ id: "photo-1579264688258-c0ebf8c7942a", title: "Eurasian eagle-owl", caption: "Ear tufts up, orange eyes locked on the lens." },
{ id: "photo-1639104738898-ec92e9e40a0a", title: "Red fox", caption: "Caught mid-step at the edge of the woods." },
{ id: "photo-1619475762212-da12e5e15f18", title: "Tiger in the snow", caption: "Frost on the whiskers and a steady stare." },
{ id: "photo-1542880941-1abfea46bba6", title: "Red panda", caption: "Round ears, white brows and plenty of curiosity." },
{ id: "photo-1544923408-75c5cef46f14", title: "Scarlet macaw", caption: "Red, yellow and blue, all on one bird." },
{ id: "photo-1745933115134-9cd90e3efcc7", title: "Lion", caption: "A heavy golden mane and a calm, slow look." },
];
const ITEMS: PuzzleItem[] = PHOTOS.map(({ id, title, caption }) => ({
src: `https://images.unsplash.com/${id}?w=1000&h=1000&fit=crop&q=80&auto=format`,
alt: title,
title,
caption,
}));
const CCGATHER_URL = "https://ccgather.com/?utm_source=21st&utm_medium=component&utm_campaign=sliding_puzzle_gallery";
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="flex min-h-screen w-full flex-col items-center justify-center gap-5 bg-background p-6 text-foreground">
<SlidingPuzzleGallery
items={ITEMS}
size={s.size}
autoplay={s.autoplay}
hold={s.hold}
moveDuration={s.moveDuration}
shuffleMoves={s.shuffleMoves}
playable={s.playable}
numbers={s.numbers}
gap={s.gap}
className="max-w-3xl"
/>
<p className="text-xs text-muted-foreground">
Wildlife portraits that solve themselves. Click a tile to take over.{" "}
<a href={CCGATHER_URL} target="_blank" rel="noreferrer" className="underline underline-offset-4 transition-colors hover:text-foreground">
By the CCgather team
</a>
</p>
</div>
);
}