Rainbow Carousel

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.