Spiral Images
Spiral Images is an image interaction in the UI HUB image interactions collection. An infinite vortex of images flowing along an Archimedean spiral from the outer edge into the center, rotating to follow the spiral tangent and fading at both ends.
The component is driven by 11 documented props (images, turns, speed, spacing, spread, sizeAttenuation and 5 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Archimedean spiral with equal-arc reparameterization; Arc-length-accurate equal card spacing; Per-card tangent rotation + center fade/size attenuation.
Preview the image interaction in the browser above, copy the source, and paste it into your project. Image Interactions components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Spiral Images?
Self-contained Canvas 2D spiral vortex image stream. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
Spiral Images at a glance
- Category
- Image Interactions
- Pricing
- Free to use
- Styling
- Tailwind CSS
- Configurable props
- 11
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Spiral Images works
An infinite vortex of images flowing along an Archimedean spiral from the outer edge into the center, rotating to follow the spiral tangent and fading at both ends.
Technical information for Spiral Images
| Category | Image Interactions |
|---|---|
| Libraries | React only |
| Styling | Tailwind CSS |
| Rendering | HTML canvas, ResizeObserver |
| State change | cards entering at the outer edge to cards shrinking toward the center along equal-arc slots |
| Props | 11 configurable |
| Usage example | Included on this page |
What Spiral Images requires
- Archimedean spiral with equal-arc reparameterization
- Arc-length-accurate equal card spacing
- Per-card tangent rotation + center fade/size attenuation
- DPR-capped (2) canvas with ResizeObserver
- Rounded-rect clipping, placeholder color until image loads
How to use Spiral Images
- Install React if your project does not already use it.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <SpiralImages /> in your page using that import path.
- Pass any of the 11 documented props to change colours, density, speed or behaviour.
Spiral Images questions
What is Spiral Images?
Self-contained Canvas 2D spiral vortex image stream. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
How does Spiral Images work?
An infinite vortex of images flowing along an Archimedean spiral from the outer edge into the center, rotating to follow the spiral tangent and fading at both ends.
Which category does Spiral Images belong to?
Spiral Images is listed under Image Interactions in the UI HUB catalog. Image components that respond to the pointer: 3D tilt cards, cursor-following image trails, distortion and ripple transitions, draggable collages and hover-reveal stacks. These are built to sit inside real content grids, so they accept standard image props and keep alt text intact. Each one lists its transform maths in the props table.
What does the images prop do in Spiral Images?
Source images drawn along the spiral (cycles continuously). It defaults to DEFAULT_IMAGES.
What does the turns prop do in Spiral Images?
Total spiral turns from outer edge to center. It defaults to 3.5.
Is Spiral Images free to use?
Spiral Images is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
What does Spiral Images need to run?
Spiral Images needs Archimedean spiral with equal-arc reparameterization, Arc-length-accurate equal card spacing, Per-card tangent rotation + center fade/size attenuation and DPR-capped (2) canvas with ResizeObserver.