Circular Carousel

A draggable 3D ring of images with four shapes, momentum, snapping and an entrance animation.

Default

Drag, flick or use the arrow keys. Every prop is wired to the controls underneath.

Valley, 1 of 10

Customize

Preset

Intro

Aspect

Card Width220px

Gap25px

Curve1

Tilt-5°

Perspective2500px

Autoplay

Speed14°/s

Interval3s

Direction

Momentum0.6

Parallax0.3

Stretch0.5

SnapPause On HoverFocus On ClickDraggable

Fade Color

Depth Fade0.55

Inner Shade0.6

Corner Radius12px

Captions

Custom items

Pass your own items, listen to change and item-click, and turn captions on. The container sets the height.

Valley, 1 of 5

Front card 1

API Reference

CircularCarousel

Prop	Type	Default	Description
`items`	`CircularCarouselItem[]`	`10 sample photos`	Images placed around the ring. The alt text is announced to screen readers, the title and optional subtitle are shown by captions.
`preset`	`"cylinder" \| "orbit" \| "wheel" \| "panorama"`	`"cylinder"`	Shape of the ring. Cylinder faces the cards outward, orbit keeps every card turned toward you, wheel spins top to bottom, and panorama puts the camera inside the ring.
`intro`	`"assemble" \| "rise" \| "spin" \| "none"`	`"rise"`	Entrance once the images load. Assemble glides the cards in from a wider ring, rise slides them in one by one from the edge of the frame, and spin lands a fast turn.
`cardWidth`	`number`	`220`	Card width in px. The whole ring scales down to fit its container when it needs to.
`aspectRatio`	`number`	`1`	Card width divided by its height. Images are cropped to fill the card.
`gap`	`number`	`25`	Space between neighbouring cards, in px.
`curve`	`number`	`from preset`	How far the cards bend to follow the ring, from flat at 0 to fully wrapped at 1. Ignored by orbit.
`tilt`	`number`	`from preset`	Camera angle in degrees. Negative values look down onto the ring.
`perspective`	`number`	`from preset`	Camera distance in px. Lower values exaggerate depth. Panorama sets its own, since the camera sits at the centre.
`autoplay`	`"drift" \| "step" \| "off"`	`"drift"`	Drift turns the ring continuously, step moves one card at a time and settles on it, off only moves when you do.
`speed`	`number`	`14`	Drift speed in degrees per second.
`interval`	`number`	`3`	Seconds between moves in step mode.
`direction`	`"left" \| "right"`	`"left"`	Which way the front cards travel. A flick changes it to the way you threw the ring. On the wheel, left means up.
`draggable`	`boolean`	`true`	Lets you grab and throw the ring with a mouse, finger or horizontal trackpad scroll.
`momentum`	`number`	`0.6`	How long a throw keeps gliding before it blends back into the autoplay speed, from 0 to 1.
`snap`	`boolean`	`true`	Settles on a card whenever the ring comes to rest.
`pauseOnHover`	`boolean`	`true`	Eases the ring to a stop while the pointer is over it.
`focusOnClick`	`boolean`	`true`	Clicking a card turns it to the front.
`parallax`	`number`	`0.3`	How much the camera leans toward the pointer, from 0 to 1.
`stretch`	`number`	`0.5`	How much the ring swells outward when it spins fast, from 0 to 1.
`depthFade`	`number`	`0.55`	How strongly cards fade into fadeColor as they turn away, from 0 to 1.
`fadeColor`	`string`	`"#000000"`	Color distant cards fade toward. Match it to the background behind the carousel.
`innerShade`	`number`	`0.6`	Brightness of the inside faces seen through the back of the ring, from 0 to 1.
`cornerRadius`	`number`	`12`	Corner radius of the cards, in px.
`captions`	`boolean`	`false`	Shows the front card title, subtitle and position under the ring.

Event	Description
`change`	Fires when a different card reaches the front. Receives (index).
`item-click`	Fires when a card is clicked, or when Enter is pressed on the carousel. Receives (item, index).

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`→`	Turn to the next card (↓ on the wheel).
`←`	Turn to the previous card (↑ on the wheel).
`Home`	Go to the first card.
`End`	Go to the last card.
`Enter`	Fire item-click for the front card.

The container is a focusable carousel region and announces the front card through a polite live region.
Autoplay and parallax switch off under prefers-reduced-motion.

Chroma Grid Circular Gallery