A draggable ring of cards rotating in 3D
| Name | Type | Default | Description |
|---|---|---|---|
cards | Card[] | [] | Array of card objects with id, content, optional background, and optional image |
radius | number | 360 | Radius of the circle in pixels |
duration | number | 20 | Duration of one full rotation in seconds |
cardWidth | number | 160 | Width of each card in pixels |
cardHeight | number | 190 | Height of each card in pixels |
pauseOnHover | boolean | true | Pause rotation when hovering over the component |
reverse | boolean | false | Reverse the rotation direction |
draggable | boolean | false | Enable drag to rotate the circle |
autoPlay | boolean | true | Auto-play rotation animation |
onCardClick | (card: Card, index: number) => void | undefined | Callback when a card is clicked |
mouseWheel | boolean | false | Enable mouse wheel to control rotation |
className | string | "" | Additional CSS classes for the container |
cardClassName | string | "" | Additional CSS classes for individual cards |
initialRotation | number | 0 | Initial rotation offset in degrees |
cardsCard[]Array of card objects with id, content, optional background, and optional image
[]radiusnumberRadius of the circle in pixels
360durationnumberDuration of one full rotation in seconds
20cardWidthnumberWidth of each card in pixels
160cardHeightnumberHeight of each card in pixels
190pauseOnHoverbooleanPause rotation when hovering over the component
truereversebooleanReverse the rotation direction
falsedraggablebooleanEnable drag to rotate the circle
falseautoPlaybooleanAuto-play rotation animation
trueonCardClick(card: Card, index: number) => voidCallback when a card is clicked
undefinedmouseWheelbooleanEnable mouse wheel to control rotation
falseclassNamestringAdditional CSS classes for the container
""cardClassNamestringAdditional CSS classes for individual cards
""initialRotationnumberInitial rotation offset in degrees
0