Orbit Showcase
3D ring of cards: drag with momentum, arrows, keyboard. Pro · 3D and motion › 3D objects and showcases
Items on a ring in 3D space, turning to bring one to the front — a showcase for products, plans or covers. Drag or swipe it (with momentum), use the arrows or the keyboard, or click an item at the side; focusing an item brings it forward too. The ring's rotation is a spring on one custom property — a CSS animation whose curve is worked out once per move, throws included (a frame loop where custom properties can't animate); React renders only when the front item changes. Vertical page scrolling keeps working on touch screens. With reduced motion the ring turns without animation.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add orbit-showcasenpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { OrbitShowcase } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
children | ReactNode | The items on the ring, one per child: product cards, images — anything of the same width. | |
index | number | Index of the item facing the viewer (controlled). | |
defaultIndex | number | 0 | Index of the item facing the viewer at first (uncontrolled). |
onIndexChange | (index: number) => void | Called when another item is brought to the front: by a drag, the arrows, the keyboard or a click. | |
itemWidth | number | 260 | Width of an item, px. On a narrow screen items shrink to fit (never below 160 px). |
gap | number | 28 | Space between neighbouring items around the ring, px. |
tilt | number | 6 | How far the ring tips towards the viewer, degrees: the far side rises above the front. |
perspective | number | 1400 | Perspective of the scene, px: smaller is more dramatic. |
autoplay | number | 0 | Turns to the next item every so many ms (0 — never). Pauses on hover, focus, drag and off screen. |
paused | boolean | false | Holds the autoplay, e.g. from a pause button of the page (moving content must be pausable, WCAG 2.2.2). |
controls | boolean | true | Shows the previous / next buttons. |
labels | Partial<OrbitShowcaseLabels> | Text for assistive technology and the buttons. |
Related components
- Coverflow Carousel — 3D product carousel on native scroll: swipe with momentum, arrows, keyboard
- Flip Card — Two-sided card that flips in 3D
- Word Prism — Words on the faces of a prism that turns to the next one
- Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
- Stagger — Lists, grids and table rows appear in a wave, one after another
- Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
- Layout Group — Jump-free reordering: filter, sort, regrid
- Presence — Enter and exit: an element stays mounted until its exit animation ends
- Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
- Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll
- Stacking Panels — Panels stick on scroll and pile into a stack
- Helix Rail — Cards on a helix that spins with scroll
Previous: Parallax Layers · Next: Coverflow Carousel · All 3D and motion