Docs / Components / Image Wheel
Image Wheel
A 3D horizontal image wheel carousel with depth-of-field blur, smooth spring drag physics, and interactive focus alignment.
Dependencies
Install the following dependencies to use this component:
1npm install motion lucide-react clsx tailwind-merge
Installation
Run the following command in your terminal to add the component to your project:
1npx rankflow-ui@latest add image-wheel
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| images | (string | ImageWheelItem)[] | DEFAULT_IMAGES | Array of image URLs or ImageWheelItem objects. |
| cardWidth | number | 220 | Width of each card in pixels. |
| cardHeight | number | 220 | Height of each card in pixels. |
| radius | number | 520 | Radius of the 3D cylindrical curve. |
| angleStep | number | 24 | Angle in degrees between adjacent cards. |
| defaultIndex | number | 4 | Initial active card index. |
| loop | boolean | false | Whether the wheel rotates continuously in a loop. |
| onIndexChange | (index: number) => void | undefined | Callback triggered when the centered active card index changes. |
| className | string | '' | Additional wrapper CSS classes. |