Coverflow Carousel
3D product carousel on native scroll: swipe with momentum, arrows, keyboard. Pro · 3D and motion › 3D objects and showcases
A 3D coverflow of products or covers: the middle item faces you, its neighbours turn away and sink back. The strip is a native horizontal scroller with snap points, so swipes, the trackpad and the wheel glide with the platform's own momentum, and nothing is hijacked; the 3D pose of every item is written to two custom properties once per scrolled frame, and React renders only when the middle item changes. Arrows, Home / End, the buttons, a click on a side item and keyboard focus bring an item to the middle; keys inside the items' own fields and widgets stay theirs. Reduced motion: a flat strip.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add coverflow-carouselnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { CoverflowCarousel } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
children | ReactNode | The items, one per child: product cards, covers, plans — anything of the same width. | |
index | number | Index of the item in the middle (controlled). | |
defaultIndex | number | 0 | Index of the item in the middle at first (uncontrolled). |
onIndexChange | (index: number) => void | Called when another item settles in the middle: by a swipe, the wheel, the arrows or the keyboard. | |
itemWidth | number | 240 | Width of an item, px. On a narrow screen items shrink to fit (never below 160 px). |
angle | number | 48 | How far the side items turn away, degrees. |
depth | number | 140 | How far the side items sink back, px. |
overlap | number | 0.2 | Share of an item's width that neighbours overlap, 0–0.4. |
perspective | number | 1100 | Perspective of the scene, px: smaller is more dramatic. |
controls | boolean | true | Shows the previous / next buttons. |
labels | Partial<CoverflowCarouselLabels> | Text for assistive technology and the buttons. |
Related components
- Orbit Showcase — 3D ring of cards: drag 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: Orbit Showcase · Next: Flip Card · All 3D and motion