Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
A sophisticated carousel component featuring 3D perspective effects, a draggable scrubber for quick navigation, and smooth spring animations. Designed for showcasing images with depth and visual impact.
Key Features:
| Prop | Type | Default | Description |
|---|---|---|---|
images | CarouselImage[] | required | Array of images to display |
autoPlay | boolean | true | Enable automatic slide advancement |
intervalMs | number | 4000 | Autoplay interval in milliseconds |
initialIndex | number | Middle image | Starting slide index |
loop | boolean | true | Enable infinite looping |
pauseOnHover | boolean | false | Pause autoplay when hovering |
onSlideChange | (index: number, image: CarouselImage) => void | undefined | Callback when active slide changes |
className | string | undefined | Additional CSS classes |
| Property | Type | Description |
|---|---|---|
src | string | Image source URL |
alt | string | Alt text for the image |
The carousel supports multiple ways to navigate:
The active slide is displayed at full scale and opacity, while adjacent slides receive:
This creates a natural depth-of-field effect that draws attention to the center item.
region, slider, group)