ProUnlock everything for $49.99 a year, or $79.99 once. See plans ›

Nexus UI

Ring Gallery, animated React component

A ring of photos standing on edge like the leaves of a turbine. Scroll, swipe or drag and it spins, glides and settles; move around it and the camera tilts and swings with your hand. Hover a photo and it rises out of the ring into the corner with its title, click it and that photo grows into a full entry page with links to the previous and next entry. Pure CSS 3D with spring-eased motion, keyboard control, and sounds that follow the ring: a tick per card, a thud as it settles, a whoosh as it spins in.

  • Pro
  • 3D Components
  • Scroll
  • 3D
  • Spring
  • Hover

Ticks as each card passes the front, louder the faster the ring turns, thuds softly when it settles, whooshes as it spins in and as an entry opens or closes, and flicks as you step between entries. Nothing plays on hover. Sound is off on this site until you switch it on.

Play with it

Move the controls and watch it change, or put your own photos in it. Copy code gives you a snippet with the settings you chose.

Pick a few from your device. They stay in your browser and are never uploaded.

Props

PropTypeDefaultWhat it does
itemsRingItem[]—The photos: { src, title, date?, summary?, sections? }. src can be a URL or a data: URI. A card without a src draws a soft gradient plate, so the default works with no image files.
countnumber—Cards in the ring, 12 to 120. Defaults to your photos repeated to about 60.
radiusnumber1Size of the ring, 0.4 to 1.3. Smaller pulls the cards in, larger spreads them out.
cardSizenumber1Size of each card, 0.4 to 2. Bigger cards overlap more.
speednumber1How far the ring turns for each scroll or drag, 0.2 to 4.
glidenumber1How long the ring keeps gliding after you let go, 0.25 to 4. Higher glides further.
tiltnumber1How far the camera follows the pointer, 0 to 3. 0 keeps the camera still.
enableSoundbooleantruePlays the ring's sounds: ticks, a thud when it settles, whooshes. They follow the visitor's sound switch, which is off until switched on.
autoplaybooleanfalseDrifts the camera on its own until the visitor touches it. Off by default, so a copied component reacts only to the visitor. Never runs under reduced motion.
introbooleantrueSpins in with two turns the first time the ring scrolls into view.
captureWheelbooleantrueScrolling over the ring turns it and keeps the page still. Set false to turn it and still scroll the page.
detailbooleantrueOpens the built-in entry page when a photo is clicked. Set false to handle onSelect yourself.
onSelect(item: RingItem, index: number) => void—Called when a photo is clicked or opened with Enter.
classNamestring—Extra classes for the outer card.

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry with your API key

    Ring Gallery is a Pro item, so the CLI has to send your API key. Do this once per project:

    1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
    2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
      NEXUS_API_KEY=nxs_your_key_here
    3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
      "registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}

Ring Gallery questions

Does it make sound, and how do I turn it off?

Ticks as each card passes the front, louder the faster the ring turns, thuds softly when it settles, whooshes as it spins in and as an entry opens or closes, and flicks as you step between entries. Nothing plays on hover. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

More 3d components