Pinwheel
Circular rotating gallery with radial image arrangement.
Main Features of Pinwheel
How to Use Pinwheel in Next.js
Installation Guide for Pinwheel
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 |
Related Components
When to Use
Excellent for creative studios, product showcases, and Next.js applications that want to emphasize a central hub. Use this React component to create a radial gallery that rotates like a pinwheel as the user scrolls down.
Best Practices
Follow React best practices by using the `centerText` for high-impact branding. Maintain scalable component architecture by keeping the `bladeCount` reasonable (e.g., 6-12) for visual clarity. Optimize for performance by using efficient radial transforms for the images.
Why This Component Matters in Modern UI Development
Radial and circular galleries provide a unique alternative to standard linear grids. This reusable React component gives developers a robust way to implement complex polar-coordinate motion, adding semantic authority and visual movement to your real-world application architecture.
Frequently Asked Questions
QCan I change the rotation direction?
Yes, by swapping the `rotationRange` values (e.g., from [360, 0]), you can make the pinwheel spin clockwise or counter-clockwise.
QWhat size images should I use?
The `bladeWidth` and `bladeHeight` props let you adapt the blade size to any image aspect ratio.
QIs the center circle interactive?
The center hub is designed for branding, but can be easily extended with hover effects or custom React children.