Orbital Image Wheel

Galleries 41

About

A draggable circular carousel that arranges image thumbnails around an orbit, with momentum, snap-to-item, auto-rotate, and keyboard navigation.

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

Code

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

Usage.tsx

"use client";

import type { OrbitalImageWheelItem } from "@/components/ui/orbital-image-wheel";
import OrbitalImageWheel from "@/components/ui/orbital-image-wheel";

const items: OrbitalImageWheelItem[] = [
  {
    id: "amber-violet",
    alt: "Amber and violet abstract color fields",
    image:
      "https://cdn.21st.dev/assets/localized/ae77f366b082cc96af4caea79444770bf648e3b06221950f3415b3a3fcf6bb18.jpg",
    label: "amber violet",
  },
  {
    id: "cobalt-pink",
    alt: "Cobalt blue and pink abstract color fields",
    image:
      "https://cdn.21st.dev/assets/localized/7df6eec8a4adce04463c7cf1571a245c53e88da0e033ca1e3015e57afe9be897.jpg",
    label: "cobalt pink",
  },
  {
    id: "coral-lavender",
    alt: "Coral and lavender abstract color fields",
    image:
      "https://cdn.21st.dev/assets/localized/f7c32cf78f4fae0b3994bc85eef90b4f1d1368a6bcda9fdb55687313bbd8faef.jpg",
    label: "coral lavender",
  },
  {
    id: "cyan-tangerine",
    alt: "Cyan and tangerine abstract color fields",
    image:
      "https://cdn.21st.dev/assets/localized/3ac8ae4d0598b8aaa1c99589d8aa434725ef882f0b67ddf94470a1f0053319cf.jpg",
    label: "cyan tangerine",
  },
  {
    id: "coral-cyan",
    alt: "Coral and cyan heavily blurred color fields with fine grain",
    image:
      "https://cdn.21st.dev/assets/localized/5c7adee04308a99a62546f90a991bfc26a9f9ca492684a74408efd3d9f3dfe38.jpg",
    label: "coral cyan",
  },
  {
    id: "violet-tangerine",
    alt: "Violet and tangerine heavily blurred color fields with fine grain",
    image:
      "https://cdn.21st.dev/assets/localized/fe23ef28e05761801aa64d8ea963c8671b7098a883c638ffce96b9e119909409.jpg",
    label: "violet tangerine",
  },
  {
    id: "teal-apricot",
    alt: "Teal and apricot heavily blurred color fields with fine grain",
    image:
      "https://cdn.21st.dev/assets/localized/337166c5afc1d6f73b147026dc2880b4da5fb7f18f187ae9f305db4b2c744023.jpg",
    label: "teal apricot",
  },
  {
    id: "plum-coral",
    alt: "Plum and coral heavily blurred color fields with fine grain",
    image:
      "https://cdn.21st.dev/assets/localized/0d1f71c1ee25c5f405f29db7303126f73fec91539f5fc2b420c1b899cce50aff.jpg",
    label: "plum coral",
  },
];

export default function OrbitalImageWheelDemo() {
  return (
    <div className="mx-auto flex w-full max-w-lg flex-col items-center gap-4 px-4 py-8">
      <OrbitalImageWheel autoRotate autoRotateSpeed={10} items={items} snap />
      <p className="text-muted-foreground text-xs">
        Drag to spin, or focus an item and use Arrow Left / Right.
      </p>
    </div>
  );
}