Spatial Orbit Gallery

Galleries

About

A responsive perspective carousel with GSAP momentum dragging, smooth orbital transitions, image parallax and masked captions. Supports keyboard navigation, optional autoplay, reduced motion and host light/dark themes for portfolios and image collections.

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

Code

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

Usage.tsx

import type { CSSProperties } from "react";
import OrbitGallery, { type OrbitGalleryItem } from "@/components/ui/spatial-orbit-gallery";

export const perspectives: OrbitGalleryItem[] = [
  {
    id: "desert-light",
    title: "Desert light",
    subtitle: "Sossusvlei, Namibia / Landscape",
    image: "https://cdn.21st.dev/assets/mirror/5d/5df99411ddab75e8c0b071a0a5813039698cc20f6ae6f6c12e05be783bebe7ce.jpg",
    alt: "An orange sand dune rises beneath a pale blue sky in Namibia.",
    accent: "#e98447",
    href: "https://unsplash.com/photos/A6VwQhPf9SE",
  },
  {
    id: "concrete-calm",
    title: "Concrete & calm",
    subtitle: "Barbican, London / Architecture",
    image: "https://cdn.21st.dev/assets/mirror/d9/d9e347bb4e0f088aaa67b6d9f92880987b6f7450ad00e8202449d1baba283cf5.jpg",
    alt: "Repeating concrete pillars and narrow balconies frame deep shadows at the Barbican.",
    accent: "#b4b7a2",
    href: "https://unsplash.com/photos/p3P20nfqTg4",
  },
  {
    id: "wild-current",
    title: "Wild current",
    subtitle: "Above the canopy / Aerial",
    image: "https://cdn.21st.dev/assets/mirror/2e/2eeaca3c3ebf7212cab32f4175b7b929dd9ddca97ded13cf90fb278ac369455c.jpg",
    alt: "An aerial view of a river winding through dense green forest.",
    accent: "#75b58e",
    href: "https://unsplash.com/photos/mwaQp_50kz8",
  },
  {
    id: "blue-distance",
    title: "Blue distance",
    subtitle: "Ice, water, horizon / Landscape",
    image: "https://cdn.21st.dev/assets/mirror/3c/3cacd6cb5a62c84ae955faf4d784b6ac8ce98a7efc4d7c4f8ecb8317922d069b.jpg",
    alt: "A broad blue glacier meets cold water beneath dark mountains.",
    accent: "#79b9e2",
    href: "https://unsplash.com/photos/UDmQLJ1jk5g",
  },
  {
    id: "last-light",
    title: "The last light",
    subtitle: "Between day and night / Landscape",
    image: "https://cdn.21st.dev/assets/mirror/ff/ffdb888e6d5be6106b4993b34e1efe77f35cf55e61e109726004ab8f315a2d38.jpg",
    alt: "Snowy mountain peaks beneath a vivid pink and orange evening sky.",
    accent: "#d78fae",
    href: "https://unsplash.com/photos/J7-nN71mRd4",
  },
];

const settings = {
  autoPlay: false,
  transitionDuration: 1.15,
  depth: 1,
  showGrid: true,
  useHostTheme: true,
};

const brandTheme = {
  "--color-background": "light-dark(#f5f8ff, #06122d)",
  "--color-foreground": "light-dark(#10244a, #f1f7ff)",
  "--color-card": "light-dark(#ffffff, #101e37)",
  "--color-card-foreground": "light-dark(#10244a, #f1f7ff)",
  "--color-muted-foreground": "light-dark(#49617f, #b7cbee)",
  "--color-border": "light-dark(#c7d3e7, #52617c)",
  "--color-primary": "light-dark(#2457d6, #91abff)",
  "--color-primary-foreground": "light-dark(#ffffff, #10244a)",
} as CSSProperties;

export default function OrbitGalleryDemo(props: Partial<typeof settings> = {}) {
  const s = { ...settings, ...props };
  return (
    <OrbitGallery
      items={perspectives}
      brand="AUTOMATE FLOWS"
      eyebrow="SELECTED PERSPECTIVES"
      title="A different point of view."
      duration={s.transitionDuration}
      autoPlay={s.autoPlay}
      interval={5}
      showGrid={s.showGrid}
      depth={s.depth}
      style={s.useHostTheme ? undefined : brandTheme}
    />
  );
}