Sphere Gallery

new

Stand inside a dome of images. Drag to look around with inertia; click a tile to bring it forward. CSS 3D only.

css-3ddragdome2 files · 152 locdeps: clsx, tailwind-merge

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/sphere-gallery.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs sphere-gallery

import { SphereGallery } from "@/components/opus/three/sphere-gallery";

<SphereGallery images={urls} className="h-[600px]" />

Prop	Type	Default	Description
images	string[]	—	Image URLs (repeated to fill the sphere).
radius / tile	number	420 / 110	Sphere radius and tile size (px).
rings	number	5	Latitude rings.
speed	number	6	Idle rotation (deg/s).