Spiral Images
Customize
Props
| Property | Type | Default | Description |
|---|---|---|---|
images | { src: string }[] | [] | Array of image sources cycled along the spiral. If empty, fallback demo images are shown. |
turns | number | 3.5 | Number of spiral turns from the outer edge to the center. |
speed | number | 2 | Progress speed of the flow, in loop-units per second. |
spacing | number | 5 | Arc-length spacing between cards along the path — smaller values pack cards closer together. |
spread | number | 6 | Outward radius multiplier for the spiral — higher values push the arms further out (clipped by the container). |
sizeAttenuation | number | 2 | How strongly cards shrink as they approach the center. 0 disables shrinking. |
imageSize | number | 200 | Base card size in pixels, before size attenuation is applied. |
fadeIn | number | 20 | Percentage of the path (from the outer edge) over which cards fade in. |
fadeOut | number | 0 | Percentage of the path (approaching the center) over which cards fade out. |
cornerRadius | number | 5 | Corner rounding applied to each image card. |
className | string | "" | Additional CSS classes for the outer container. No background is applied by the component itself. |
images{ src: string }[]Array of image sources cycled along the spiral. If empty, fallback demo images are shown.
[]turnsnumberNumber of spiral turns from the outer edge to the center.
3.5speednumberProgress speed of the flow, in loop-units per second.
2spacingnumberArc-length spacing between cards along the path — smaller values pack cards closer together.
5spreadnumberOutward radius multiplier for the spiral — higher values push the arms further out (clipped by the container).
6sizeAttenuationnumberHow strongly cards shrink as they approach the center. 0 disables shrinking.
2imageSizenumberBase card size in pixels, before size attenuation is applied.
200fadeInnumberPercentage of the path (from the outer edge) over which cards fade in.
20fadeOutnumberPercentage of the path (approaching the center) over which cards fade out.
0cornerRadiusnumberCorner rounding applied to each image card.
5classNamestringAdditional CSS classes for the outer container. No background is applied by the component itself.
""Crafted withbyMohammad Tasin