---
title: "Rainbow Carousel — Framer component · Best of Framer"
description: "$5.00 · Framer component · by AGR Studio · Carousels. Rainbow Carousel Settings Key Features Fixed arch shape — Consistent curve across all screen sizes Infinite loop — Seamless…"
canonical: "https://framer.elliotli.dev/component/rainbow-carousel"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Rainbow Carousel

# Rainbow Carousel

[View on Framer](https://framer.com/marketplace/components/rainbow-carousel/?via=elliot-li)

![Rainbow Carousel preview image 1](https://framer.elliotli.dev/og/component/rainbow-carousel/d1a069506408b112/1600x1200.jpg)

## 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](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-gl96ooqk-3SHd781Dl4zQCXPkdErVDXVOwIY0yF)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 [How rankings work →](/terms#rankings)

-   All · #10455

## Details

- **Author**: AGR Studio
- **Price**: $5.00
- **Published**: 2025-12-06
- **Updated**: 2025-12-05
- **Added**: 2025-12-01
- **Categories**: Carousels

## More like this

-   [Screen Stage Mockup](/component/screen-stage-mockup) — Aisol Studio · $14 — Your screens in synced devices
-   [Team Reel](/component/team-reel) — Ali Musa · Free — Interactive Team Showcase
-   [Slider](/component/slider) — MAS · Free — A smooth, customizable slider.
-   [Cascade Card Slider](/component/cascade-card-slider) — Tim Yeng · Free — Cards that cascade into view