Dirt Carousel
3D ring of video worlds. Drag, wheel, or snap. Open the gear panel to change radius, tilt, and auto-rotate.
20.6 KB
•Updated on September 3, 2026
Interactive 3D cylindrical ring carousel. Drag, wheel, or snap between cards. Items, dimensions, and motion physics are configurable via props.
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-dirt-carouselUsage
Code
import { DirtCarousel, type DirtCarouselItem } from '@/components/spaceui/dirt-carousel'
const items: DirtCarouselItem[] = [
{
name: 'Brand',
mediaType: 'video',
videoLink: 'https://...',
thumbnail: 'https://...',
},
{
name: 'Showcase',
mediaType: 'image',
imageLink: 'https://...',
},
]
export default function Example() {
return <DirtCarousel items={items} radius={800} ballSize={800} bounce={false} snap={true} />
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | DirtCarouselItem[] | [] | Array of media items (video or image). |
direction | flat|up|down | flat | Orbital tilt angle of the 3D ring. |
radius | number | 800 | Radius of the circular orbit in pixels. |
perspective | number | 800 | 3D CSS perspective camera distance. |
ballSize | number | 800 | Size of each carousel item container. |
dragSensitivity | number | 0.5 | Drag speed multiplier. |
bounce | boolean | false | Floating / bounce animation up and down. |
mouseTilt | boolean | false | Tilts carousel towards the mouse pointer. |
snap | boolean | true | Snaps smoothly to nearest item when released. |
autoRotate | boolean | false | Enables continuous automatic rotation. |
autoRotateSpeed | number | 0.3 | Speed of auto rotation (items/second). |
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.
On This Page
Powered by