Cards recede into depth on a 3D rail, with drag, keyboard and auto-advance.
Drag, scroll, use the arrow keys or click a card. Every prop is wired to the controls underneath.
| Prop | Type | Default | Description |
|---|---|---|---|
items | Array<string | { image: string; alt?: string }> | 6 sample images | Slides to display. Pass image URLs or objects with an image URL and alt text. |
cardWidth | number | 300 | Width of each card in pixels. |
cardHeight | number | 380 | Height of each card in pixels. |
radius | number | 18 | Corner rounding of the cards in pixels. |
tint | string | '#05060a' | Colour multiplied over cards as they recede, shading the depth of the stack. |
depth | number | 220 | Z distance in pixels between each card along the depth rail. Higher values push the stack further back. |
spread | number | 90 | Lateral offset in pixels applied per card so the stack fans out to one side. |
tilt | number | 22 | Degrees each receding card rotates around the vertical axis, revealing its edge. |
tiltDirection | 'left' | 'right' | 'right' | Which side the stack fans and tilts toward. |
perspective | number | 1400 | CSS perspective in pixels. Lower values exaggerate the depth foreshortening. |
visibleCards | number | 4 | How many cards deep remain visible before further ones fade out. |
falloff | number | 0.2 | How quickly brightness, tint and blur ramp up with depth. |
blur | number | 6 | Maximum blur in pixels applied to the furthest visible card. |
duration | number | 700 | Length of the advance transition in milliseconds. |
ease | string | 'power3.out' | GSAP easing used for navigation transitions. |
autoplay | boolean | false | Auto-advance the carousel, pausing on hover or focus. |
autoplayDelay | number | 3200 | Delay between auto-advances in milliseconds. |
loop | boolean | true | Wrap seamlessly from the last card back to the first. |
showControls | boolean | true | Show the previous / next arrow buttons. |
showIndicators | boolean | true | Show the dot indicators. |
| Prop | Type | Default | Description |
|---|---|---|---|
change | (index: number, item) => void | - | Emitted whenever the focused card changes. |
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| ArrowLeft | Focus the previous card. |
| ArrowRight | Focus the next card. |