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