Orbit Spotlight Image Gallery for React and Tailwind CSS (shadcn/ui) folds an image orbit into a focused view. It is built to make portfolios easy to explore. Includes depth, hover slowdown, dot navigation and 600ms transitions. Controlled or local selection, keyboard access, reduced motion and light/dark themes. Use it for portfolios and collections. The included demo uses sample titles; the component makes no requests beyond image loads. Requires React and lucide-react, with no animation library.
"use client";
import * as React from "react";
import { RotateCcw } from "lucide-react";
import { OrbitSpotlightGallery } from "@/components/ui/orbit-spotlight-gallery";
import type { OrbitSpotlightItem } from "@/components/ui/orbit-spotlight-gallery";
export const ORBIT_DEMO_ITEMS: OrbitSpotlightItem[] = [
{ src: "https://cdn.21st.dev/assets/mirror/83/8327bac3ef5a685ef2b2cd64fa710061deb2f249f45665c3089f549b07064ce6.jpg", alt: "Layered black and white building balconies", title: "Between the lines", meta: "2026 · Architecture study", description: "A study of rhythm, repetition and the spaces in between." },
{ src: "https://cdn.21st.dev/assets/mirror/e8/e8eec2cf6dcd16fe26ee7122707db26752b9a928143abc64df74027dde794285.jpg", alt: "A winding road along a forested coastline", title: "A softer edge", meta: "2026 · Landscape study", description: "Following the quiet meeting of land and water." },
{ src: "https://cdn.21st.dev/assets/mirror/b1/b1b6a4cf0f7a3f3ae792e958a4c3aec8178c3e3579450454b26591a6e33a2bb2.jpg", alt: "Curved blue and white architecture against a clear sky", title: "Open to the sky", meta: "2026 · Form study", description: "Two sweeping curves frame a small piece of sky." },
{ src: "https://cdn.21st.dev/assets/mirror/54/54bb33f690b3f29b7c7addd6f7a32f0ec541503c7df9b65e41eebfb1fbf86703.jpg", alt: "Aerial view of rugged ochre mountain ridges", title: "Earth in folds", meta: "2026 · Aerial study", description: "Light finds its way across a landscape of folded contours." },
{ src: "https://cdn.21st.dev/assets/mirror/04/04a9c958e76ccec242b8c99bb1ed8972c7bf17aed9a238cd5e77479f5bd2e9f8.jpg", alt: "Angular white building with a glass facade", title: "Quiet geometry", meta: "2025 · Architecture study", description: "Clean planes and generous space, held in balance." },
{ src: "https://cdn.21st.dev/assets/mirror/6e/6e3dd7582fc90ec27d7a18951bfb9c209012a7d786e39f63ad541dd9e0fbe816.jpg", alt: "A mountain lake reflecting a soft evening sky", title: "After the light", meta: "2025 · Landscape study", description: "A still surface holds the last colors of the day." },
{ src: "https://cdn.21st.dev/assets/mirror/c2/c273b8a45f272cdc2db41bfbcb4319bb2bc178a0fe87e47515e4d392d063799d.jpg", alt: "Sculptural orange building walls under a blue sky", title: "Warm embrace", meta: "2025 · Form study", description: "An open curve brings warmth to a simple silhouette." },
{ src: "https://cdn.21st.dev/assets/mirror/c1/c1816fcaa56ae4e5a3b1604855261f760baef16279e1af5e8f7464ad5b2cc4ae.jpg", alt: "Small green islands in clear turquoise water", title: "Little worlds", meta: "2025 · Aerial study", description: "Islands, paths and the space that connects them." },
];
export default function OrbitSpotlightGalleryDemo({ autoplay = true }: { autoplay?: boolean }) {
const [selected, setSelected] = React.useState(null as number | null);
const [interacted, setInteracted] = React.useState(false);
const [reduced, setReduced] = React.useState(false);
const [replay, setReplay] = React.useState(0);
React.useEffect(() => {
const query = matchMedia("(prefers-reduced-motion: reduce)");
const update = () => setReduced(query.matches);
update(); query.addEventListener("change", update);
return () => query.removeEventListener("change", update);
}, []);
React.useEffect(() => {
if (!autoplay || interacted || reduced || matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const timers = [
setTimeout(() => setSelected(2), 2400),
setTimeout(() => setSelected(3), 4000),
setTimeout(() => setSelected(null), 6400),
];
return () => timers.forEach(clearTimeout);
}, [autoplay, interacted, reduced, replay]);
return <main data-orbit-demo className="flex min-h-svh w-full items-center justify-center bg-background p-4 text-foreground">
<div className="w-full max-w-[840px]">
<header className="mb-3 flex h-7 items-center justify-between px-1">
<h1 className="text-xs font-medium tracking-tight">Orbit spotlight</h1>
<span className="rounded-full border border-border px-2.5 py-1 text-[10px] text-muted-foreground">Sample collection</span>
</header>
<div className="overflow-hidden rounded-3xl border border-border" onPointerDownCapture={() => setInteracted(true)} onKeyDownCapture={() => setInteracted(true)} onWheelCapture={() => setInteracted(true)}>
<OrbitSpotlightGallery key={replay} items={ORBIT_DEMO_ITEMS} selected={selected} onSelectedChange={setSelected} title="Selected work" autoplay={autoplay} style={{ height: "min(560px, calc(100svh - 116px))" }} />
</div>
<footer className="mt-3 flex h-6 items-center justify-between gap-3 px-1 text-[10px] text-muted-foreground">
<p>Eight sample studies in shape, space & light.</p>
<button type="button" data-replay onClick={() => { setSelected(null); setInteracted(false); setReplay(value => value + 1); }} className="flex shrink-0 items-center gap-1.5 rounded py-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><RotateCcw className="size-3" aria-hidden />Replay</button>
</footer>
</div>
</main>;
}