Cards that tumble end over end as the carousel advances
04/10
| Name | Type | Default | Description |
|---|---|---|---|
items | TumbleCarouselItem[] | 10 sample cards | Cards rendered by the carousel |
initialIndex | number | 3 | Card focused on mount |
cardWidth | number | 200 | Card width in pixels |
aspectRatio | string | "1 / 1" | Aspect ratio of each card |
frameHeight | number | undefined | Height of the visible frame, derived from the card geometry when omitted |
rotation | number | 30 | Degrees each card tumbles per step away from the focused one |
verticalOffset | number | 50 | Vertical drop per step as a percentage of card height |
inactiveScale | number | 0.6 | Scale applied to every unfocused card |
visibleRange | number | 2.4 | Distance in steps at which cards have faded out completely |
borderRadius | number | 16 | Corner radius of the cards in pixels |
titleBlur | number | 2 | Blur applied to unfocused captions in pixels |
speed | number | 1 | Multiplier for the transition duration |
showTitles | boolean | true | Render the caption over the focused card |
showControls | boolean | true | Show the previous and next buttons |
showCounter | boolean | true | Show the position counter between the buttons |
loop | boolean | false | Tumble endlessly in both directions |
autoplay | boolean | false | Advance on a timer |
autoplayDelay | number | 3000 | Delay between automatic advances in milliseconds |
enableDrag | boolean | true | Allow dragging across the frame to navigate |
enableKeyboard | boolean | true | Allow arrow keys to navigate when focused |
className | string | undefined | Additional CSS classes |
onIndexChange | (index: number) => void | undefined | Fired whenever the focused card changes |
itemsTumbleCarouselItem[]Cards rendered by the carousel
10 sample cardsinitialIndexnumberCard focused on mount
3cardWidthnumberCard width in pixels
200aspectRatiostringAspect ratio of each card
"1 / 1"frameHeightnumberHeight of the visible frame, derived from the card geometry when omitted
undefinedrotationnumberDegrees each card tumbles per step away from the focused one
30verticalOffsetnumberVertical drop per step as a percentage of card height
50inactiveScalenumberScale applied to every unfocused card
0.6visibleRangenumberDistance in steps at which cards have faded out completely
2.4borderRadiusnumberCorner radius of the cards in pixels
16titleBlurnumberBlur applied to unfocused captions in pixels
2speednumberMultiplier for the transition duration
1showTitlesbooleanRender the caption over the focused card
trueshowControlsbooleanShow the previous and next buttons
trueshowCounterbooleanShow the position counter between the buttons
trueloopbooleanTumble endlessly in both directions
falseautoplaybooleanAdvance on a timer
falseautoplayDelaynumberDelay between automatic advances in milliseconds
3000enableDragbooleanAllow dragging across the frame to navigate
trueenableKeyboardbooleanAllow arrow keys to navigate when focused
trueclassNamestringAdditional CSS classes
undefinedonIndexChange(index: number) => voidFired whenever the focused card changes
undefined