Animations & Motion
Pinwheel
Circular rotating gallery with radial image arrangement.
parallaxcircularrotategallery
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [] | Array of image URLs |
bladeCount | number | 8 | Number of blades in the pinwheel |
backgroundColor | string | bg-slate-950 | Background color of the component |
containerHeight | string | h-[300vh] | Height of the container |
wheelSize | string | w-[150vh] h-[150vh] | Size of the pinwheel |
bladeWidth | string | w-80 | Width of each blade |
bladeHeight | string | h-[50vh] | Height of each blade |
bladeBgColor | string | bg-red-500/20 | Background color of blades |
centerSize | string | w-64 h-64 | Size of the center circle |
centerBgColor | string | bg-slate-950 | Background color of center |
centerBorderColor | string | border-white/20 | Border color of center |
centerText | string | ROTATE_Y | Text in the center |
centerTextColor | string | text-white | Color of center text |
centerTextSize | string | text-xl | Size of center text |
rotationRange | [number, number] | [0, 360] | Rotation range in degrees |
className | string | Additional CSS classes |