Circular orbit gallery rotating images.
Drag, scroll or use the arrow keys to rotate the gallery. Every prop is wired to the controls underneath.
| Prop | Type | Default | Description |
|---|---|---|---|
items | Array<{ image: string; text: string }> | undefined | List of items to display in the gallery. Each item should have an image URL and a text label. |
bend | number | 3 | Determines the curvature of the gallery layout. A negative value bends in one direction, a positive value in the opposite. |
textColor | string | "#ffffff" | Specifies the color of the text labels. |
borderRadius | number | 0.05 | Sets the border radius for the media items to achieve rounded corners. |
font | string | "bold 30px Figtree" | CSS font shorthand (style, weight, size, family) used for the text labels below each card. |
fontUrl | string | undefined | URL of a font to load for the labels. Accepts a stylesheet URL (e.g. a Google Fonts link) or a direct font file (.woff2, .woff, .ttf, .otf). The loaded family overrides the family in font. |
scrollSpeed | number | 2 | Controls how much the gallery moves per scroll event. Lower values result in slower scrolling, higher values in faster scrolling. |
scrollEase | number | 0.05 | Controls the smoothness of scroll transitions. Lower values create smoother, more fluid motion, while higher values make it more responsive. |
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| ArrowRight | Rotates the gallery forward. |
| ArrowLeft | Rotates the gallery backward. |
| Home | Returns to the first image. |