Orbit Carousel
Orbiting image carousel for product shots and landing-page accents. Center it for a full showcase, or anchor to a corner so items drift on and off screen.
Default
Centered product showcase
Orbit carousel
Showcase projects without a standard slider
A circular image showcase for SaaS pages, portfolios, product previews, and visual component demos.
Sign in to view this example's source code.
Sign inCorner example
Landing-page hero with the orbit anchored to a corner
Now shipping
Ship faster with one platform
Anchor the orbit to a corner so product shots drift in from off-screen while your hero copy stays front and center.
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| items | array | [] | The items to display in the carousel |
| itemSize | "sm" | "md" | "lg" | "xl" | "lg" | Size of each orbiting image |
| aspect | "square" | "video" | "portrait" | "video" | Aspect ratio of the orbiting images |
| spread | "compact" | "normal" | "wide" | "normal" | Controls the spacing between the orbit centre and image cards |
| radius | number | undefined | Manual radius override in pixels |
| origin | "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center" | Where the orbit path originates inside the component |
| duration | number | 36 | Seconds for a full revolution |
| autoRotate | boolean | true | Whether the carousel should automatically rotate |
| direction | "clockwise" | "counter-clockwise" | "clockwise" | Direction of rotation |
| startAngle | number | -90 | Starting angle in degrees |
| pauseOnItemHover | boolean | true | Whether the carousel should pause on item hover |
| className | string | undefined | Additional classes on the root container |
| itemClassName | string | undefined | Additional classes on the item container |
| imageClassName | string | undefined | Additional classes on the image container |