Infinity Image
Infinity Image is an image interaction in the UI HUB image interactions collection. A continuous infinity ring gallery where thumbnail cards flow seamlessly along a figure-eight path using CSS offset-path, rotating tangentially and evenly spaced around the dual-lobe loop.
The component is driven by 11 documented props (images, count, duration, cardWidth, cardHeight, cardRadius and 5 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: CSS offset-path figure-eight curve; Evenly staggered negative animation delays; High-res images with glossy glassmorphic overlay.
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 Infinity Image?
Premium continuous infinity figure-8 loop gallery with photographic thumbnail cards.
Infinity Image at a glance
- Category
- Image Interactions
- Pricing
- Free to use
- Libraries
- React
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 11
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Infinity Image works
A continuous infinity ring gallery where thumbnail cards flow seamlessly along a figure-eight path using CSS offset-path, rotating tangentially and evenly spaced around the dual-lobe loop.
Technical information for Infinity Image
| Category | Image Interactions |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Rendering | requestAnimationFrame |
| State change | still thumbnail cards to infinite flowing cards along figure-eight motion path |
| Props | 11 configurable |
| Usage example | Included on this page |
What Infinity Image requires
- CSS offset-path figure-eight curve
- Evenly staggered negative animation delays
- High-res images with glossy glassmorphic overlay
- Responsive container scaling
- Pause on hover
How to use Infinity Image
- 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 <InfinityImage /> in your page using that import path.
- Pass any of the 11 documented props to change colours, density, speed or behaviour.
Infinity Image questions
What is Infinity Image?
Premium continuous infinity figure-8 loop gallery with photographic thumbnail cards.
How does Infinity Image work?
A continuous infinity ring gallery where thumbnail cards flow seamlessly along a figure-eight path using CSS offset-path, rotating tangentially and evenly spaced around the dual-lobe loop.
Which category does Infinity Image belong to?
Infinity Image 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 Infinity Image?
Array of image objects rendered onto loop cards. It defaults to DEFAULT_IMAGES.
What does the count prop do in Infinity Image?
Total number of cards travelling around the infinity loop. It defaults to 26.
Is Infinity Image free to use?
Infinity Image is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Infinity Image use?
Infinity Image uses React and is styled with Tailwind CSS.
What does Infinity Image need to run?
Infinity Image needs CSS offset-path figure-eight curve, Evenly staggered negative animation delays, High-res images with glossy glassmorphic overlay and Responsive container scaling.