Skip to content

component

Rainbow Carousel

By AGR Studio

Details

Summary

Rainbow Carousel Settings Key Features Fixed arch shape — Consistent curve across all screen sizes Infinite loop — Seamless wrapping for continuous scrolling Equal spacing —…

Description

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) Rainbow Carousel Settings 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.

Rank history

Daily rank per list, from the first snapshot — lower is better.

125015001750181648/148/228/309/79/15
  • All · #8164