Infinite Loop
Seamless infinite scrolling carousel with auto-play.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [url1, url2, ...] | Array of image URLs to loop. |
| animationDuration | number | 20 | Duration of one complete loop in seconds. |
| imageHeight | string | 6rem | Height of each image card. |
| imageWidth | string | 8rem | Width of each image card. |
| imageGap | string | 0.5rem | Gap between image cards. |
| maxWidth | string | 32rem | Maximum width of the carousel. |
When to Use
Ideal for logo walls, sponsor strips, image galleries, and any context where content should feel continuously in motion.
Best Practices
Use a consistent aspect ratio for all images. Slower animation speeds work better for readability; faster speeds work for abstract visual texture.
Why This Component Matters
Infinite loops create a sense of abundance and momentum — they communicate an active, living brand.
FAQ
QHow does the seamless loop work?
Images are duplicated and the strip repositions silently when it reaches the end, creating a perfect infinite scroll.
QCan I pause on hover?
Yes — add onMouseEnter/Leave handlers to pause and resume the Framer Motion animation controls.
QIs it mobile responsive?
Yes — the horizontal flow adapts naturally to any container width.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.