Constellation Image Gallery

Galleries 80

About

Interactive image gallery for React and Tailwind CSS (shadcn/ui) where photos float like stars and their tags form constellations. It is built for exploring by theme: the lines show how photos relate, so visitors follow a thread from one picture to the next instead of scanning a flat grid. Hover or focus a photo and lines connect every photo sharing a tag (a minimum spanning tree, so it reads like a star chart) while the rest dim; click to gather the constellation into a ring around the enlarged photo, Esc scatters it back. Seeded layout, slow idle drift, optional autoplay, light and dark themes, reduced-motion fallback, no dependencies. Use it for portfolios, mood boards and tag-based photo collections.

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

Code

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

Usage.tsx

"use client";

import { ConstellationGallery } from "@/components/ui/constellation-gallery";
import type { ConstellationItem } from "@/components/ui/constellation-gallery";

const settings = {
  autoplay: true,
  autoplayInterval: 8300,
  starSize: 85,
  drift: 10,
};

const PHOTOS = [
  { id: "photo-1488972685288-c3fd157d7c7a", title: "White stair", tags: ["modern", "shadow", "curves"] },
  { id: "photo-1546414701-81cc6963c67f", title: "Raw tower", tags: ["concrete", "light"] },
  { id: "photo-1614159869126-0f06a742eecb", title: "Cloister", tags: ["arches", "shadow"] },
  { id: "photo-1523477593243-78bbf626fd3b", title: "Mirror wall", tags: ["glass", "light", "curves"] },
  { id: "photo-1479839672679-a46483c0e7c8", title: "Clean edge", tags: ["modern", "shadow"] },
  { id: "photo-1504625709867-b4e45e3bb9dd", title: "Grey block", tags: ["concrete", "light"] },
  { id: "photo-1547612403-81da6259bdaf", title: "Stone arcade", tags: ["arches", "shadow", "curves"] },
  { id: "photo-1490351267196-b7a67e26e41b", title: "Blue grid", tags: ["glass", "light"] },
  { id: "photo-1527576539890-dfa815648363", title: "Sun deck", tags: ["modern", "shadow"] },
  { id: "photo-1737442981890-0a87ef3ce9f5", title: "Concrete wave", tags: ["concrete", "light", "curves"] },
  { id: "photo-1599089245397-ba66755081f4", title: "Vaulted hall", tags: ["arches", "shadow"] },
  { id: "photo-1554469384-e58fac16e23a", title: "Glass canyon", tags: ["glass", "light"] },
  { id: "photo-1487958449943-2429e8be8625", title: "Quiet lobby", tags: ["modern", "shadow", "curves"] },
  { id: "photo-1446771326090-d910bfaf00f6", title: "Monolith", tags: ["concrete", "light"] }
];

const ITEMS: ConstellationItem[] = PHOTOS.map(({ id, title, tags }) => ({
  src: `https://images.unsplash.com/${id}?w=320&h=320&fit=crop&q=80&auto=format`,
  alt: title,
  title,
  tags,
}));

const CCGATHER_URL = "https://ccgather.com/?utm_source=21st&utm_medium=component&utm_campaign=constellation_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">
      <ConstellationGallery items={ITEMS} autoplay={s.autoplay} autoplayInterval={s.autoplayInterval} starSize={s.starSize} drift={s.drift} className="max-w-3xl" />
      <p className="text-xs text-muted-foreground">
        Hover a photo to see its constellation, click to gather it.{" "}
        <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>
  );
}