Orbit Reel

A turning wheel of cards that sweeps into an arc

orbit-reel-tw

Props

Name	Type	Default	Description
`items`	{ src: string; alt: string; title?: string; subtitle?: string; href?: string }[]	`built-in scene collection`	Images for the cards. They repeat when there are more cards than items. Title and subtitle caption the card at the top of the arc; href makes clicking it navigate.
`count`	number	`18`	Number of cards around the wheel, up to 72. It is rounded to a whole number of passes through the items so the sequence never jumps.
`defaultView`	"ring" \| "arc"	`"ring"`	Start on the whole wheel, or zoomed into the arc at its top.
`spin`	number	`8`	Rotation speed of the ring view, in degrees per second. Negative values turn it the other way.
`autoplay`	boolean	`true`	In the arc view, bring the next card to the top every interval seconds.
`interval`	number	`3.5`	Seconds between autoplay steps.
`arc`	number	`1`	Size of the wheel in the arc view relative to the cards. Larger values flatten the arc and add space between cards; smaller values curve it more tightly.
`apex`	number	`0.42`	Vertical position of the top card in the arc view, from 0 (top) to 1 (bottom).
`aspect`	number	`0.8`	Card width divided by height. Below 1 is portrait, above 1 is landscape.
`radius`	number	`0.07`	Corner rounding as a fraction of the card width.
`gap`	number	`0.18`	Space between neighbouring cards as a fraction of their spacing.
`tilt`	boolean	`true`	Lean each card along the wheel. When off, cards stay upright like frames on a Ferris wheel.
`flipWave`	boolean	`true`	Turn the cards over in a wave that runs out from the top when the view changes, and every few seconds in the ring view.
`accentColor`	string	`"#5227FF"`	Colour of the card backs revealed by the flip wave.
`backgroundColor`	string	`"transparent"`	Background of the component. Captions and controls adapt to it.
`captions`	boolean	`true`	Show the title and subtitle of the top card in the arc view.
`controls`	boolean	`true`	Show previous and next buttons with a counter in the arc view.
`draggable`	boolean	`true`	Drag to turn the wheel: around the centre in the ring view, sideways in the arc view, snapping to a card.
`wheel`	boolean	`true`	Scroll to turn the reel: it spins the ring, and in the arc view glides through the cards and settles on the nearest one. Set false to leave page scrolling untouched.
`pauseOnHover`	boolean	`true`	Stop the rotation and autoplay while the pointer is on a card.
`zoomOnClick`	boolean	`true`	Clicking a card in the ring view zooms into the arc with it at the top. Clicking the background or pressing Escape zooms back out.
`paused`	boolean	`false`	Stops rotation, autoplay and the flip wave. Reduced-motion users always get this.
`ariaLabel`	string	`"Orbit reel…"`	Accessible description of the reel and how to use it.
`onViewChange`	(view) => void	`—`	Called when the reel zooms between the ring and the arc.
`onActiveChange`	(item, index) => void	`—`	Called when a different card reaches the top.
`onSelect`	(item, index) => void	`—`	Called when the card at the top of the arc is clicked or Enter is pressed.
`ref`	{ next, previous, goTo, setView }	`—`	Imperative controls for stepping, jumping to a card and changing the view.
`children`	ReactNode	`—`	Content centred inside the ring. It fades out when the reel zooms into the arc.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 420px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

items{ src: string; alt: string; title?: string; subtitle?: string; href?: string }[]

Images for the cards. They repeat when there are more cards than items. Title and subtitle caption the card at the top of the arc; href makes clicking it navigate.

Defaultbuilt-in scene collection

countnumber

Number of cards around the wheel, up to 72. It is rounded to a whole number of passes through the items so the sequence never jumps.

Default18

defaultView"ring" | "arc"

Start on the whole wheel, or zoomed into the arc at its top.

Default"ring"

spinnumber

Rotation speed of the ring view, in degrees per second. Negative values turn it the other way.

Default8

autoplayboolean

In the arc view, bring the next card to the top every interval seconds.

Defaulttrue

intervalnumber

Seconds between autoplay steps.

Default3.5

arcnumber

Size of the wheel in the arc view relative to the cards. Larger values flatten the arc and add space between cards; smaller values curve it more tightly.

Default1

apexnumber

Vertical position of the top card in the arc view, from 0 (top) to 1 (bottom).

Default0.42

aspectnumber

Card width divided by height. Below 1 is portrait, above 1 is landscape.

Default0.8

radiusnumber

Corner rounding as a fraction of the card width.

Default0.07

gapnumber

Space between neighbouring cards as a fraction of their spacing.

Default0.18

tiltboolean

Lean each card along the wheel. When off, cards stay upright like frames on a Ferris wheel.

Defaulttrue

flipWaveboolean

Turn the cards over in a wave that runs out from the top when the view changes, and every few seconds in the ring view.

Defaulttrue

accentColorstring

Colour of the card backs revealed by the flip wave.

Default"#5227FF"

backgroundColorstring

Background of the component. Captions and controls adapt to it.

Default"transparent"

captionsboolean

Show the title and subtitle of the top card in the arc view.

Defaulttrue

controlsboolean

Show previous and next buttons with a counter in the arc view.

Defaulttrue

draggableboolean

Drag to turn the wheel: around the centre in the ring view, sideways in the arc view, snapping to a card.

Defaulttrue

wheelboolean

Scroll to turn the reel: it spins the ring, and in the arc view glides through the cards and settles on the nearest one. Set false to leave page scrolling untouched.

Defaulttrue

pauseOnHoverboolean

Stop the rotation and autoplay while the pointer is on a card.

Defaulttrue

zoomOnClickboolean

Clicking a card in the ring view zooms into the arc with it at the top. Clicking the background or pressing Escape zooms back out.

Defaulttrue

pausedboolean

Stops rotation, autoplay and the flip wave. Reduced-motion users always get this.

Defaultfalse

ariaLabelstring

Accessible description of the reel and how to use it.

Default"Orbit reel…"

onViewChange(view) => void

Called when the reel zooms between the ring and the arc.

Default—

onActiveChange(item, index) => void

Called when a different card reaches the top.

Default—

onSelect(item, index) => void

Called when the card at the top of the arc is clicked or Enter is pressed.

Default—

ref{ next, previous, goTo, setView }

Imperative controls for stepping, jumping to a card and changing the view.

Default—

childrenReactNode

Content centred inside the ring. It fades out when the reel zooms into the arc.

Default—

classNamestring

Classes for the root element. It fills its parent, with a 420px minimum height.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Orbit Reel

Customize

Props

Orbit Reel

Customize

Props