Components
3D carousel
A ring of cards in 3D. Drag to spin it with inertia — it snaps the nearest card to the front.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { Carousel3D } from '@vizzele/react';
<Carousel3D itemWidth={220} itemHeight={300} label="Projects">
{projects.map((p) => <ProjectCard key={p.id} {...p} />)}
</Carousel3D>Props
| Prop | Type | Default | Description |
|---|---|---|---|
itemWidth / itemHeight | number | 220 / 300 | Card size. |
spacing | number | 1.15 | Ring spacing. |
autoplay | number | 0 | Seconds per card (pauses on hover). |
onIndexChange | (i: number) => void | — | Front card changes. |
Accessibility
- aria-roledescription="carousel" with labelled slides; ←/→ on the focused stage, plus visible prev/next buttons.