Sliding Puzzle Image Gallery

Galleries 34

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Sliding Puzzle Image Gallery to your project and fits it to your theme.

Code

How Sliding Puzzle Image Gallery is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}