Installation
Usage
import { RainbowCarousel } from "@/components/motionx/rainbow-carousel";
const images = [
"https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?w=400&h=500&fit=crop",
"https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=400&h=500&fit=crop",
"https://images.unsplash.com/photo-1444723121867-7a241cacace9?w=400&h=500&fit=crop",
];
export default function App() {
return (
<RainbowCarousel
items={images.map((src, i) => ({
id: String(i),
content: (
<img
src={src}
alt={`Image ${i + 1}`}
className="h-full w-full rounded-2xl object-cover shadow-xl"
/>
),
}))}
cycleDuration={10}
pauseOnHover
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | RainbowCarouselItem[] | required | Array of items with id and content (ReactNode) |
cycleDuration | number | 8 | Seconds for one full cycle |
pauseOnHover | boolean | true | Pause rotation when hovered |
maxTilt | number | 25 | Maximum tilt angle (degrees) for outermost cards |
spread | number | 1 | Horizontal spread factor — increase for wider arc |
cardClassName | string | - | Additional className for each card wrapper |
className | string | - | Additional className for the root container |
height | string | "500px" | Container height |