Create an infinite scrolling carousel with a fixed rainbow arch. Cards rise to the center and descend at the edges as they scroll. Works for product showcases, image galleries, testimonials, and hero sections.
How It Works
The arch is fixed to the screen center (center = peak). Cards scroll horizontally along the arch, rotating to align with the curve. As they pass the center, they rise; as they move to the edges, they descend. The loop wraps seamlessly for continuous scrolling.
Visual Customization
Adjustable slide dimensions — Set width and height (default 300×400px)
Speed control — From slow to fast (0–10)
Direction toggle — Scroll left or right
Gap spacing — Control spacing between cards (0–100px)
Curve height — Adjust arch intensity (-300 to 300px; positive = convex, negative = concave)
Key Features
Fixed arch shape — Consistent curve across all screen sizes
Infinite loop — Seamless wrapping for continuous scrolling
Equal spacing — Consistent gaps maintained during rotation
Center-based positioning — Cards positioned by center point to prevent overlap
Smooth rotation — Cards rotate to align with the curve
No entry/exit effects — Static rainbow shape that scrolls as one unit
Responsive design — Adapts to container size while keeping arch shape consistent
Customization
Adjust everything through property controls: slide dimensions with number inputs, speed and gap with sliders, direction with a dropdown, and curve height with a slider. No coding required. Mix settings to match your brand.
Best For
Product showcases, image galleries, testimonial carousels, portfolio displays, feature highlights, hero sections, landing pages, e-commerce sites, or anywhere you need smooth, eye-catching motion that guides attention.
AGR Studio
