Momentum Ring

A ring of photos that blurs as it spins and clicks into place

vertical-reel-tw

Customize

Background

Aspect

1.60

Size

0.42

Curvature

0.60

Distance

3.0

Tilt

6°

Gap

22px

Radius

14px

Dim

0.45

Edge Fade

0.50

Motion Blur

0.60

Friction

0.50

Speed

0.25

Interval

3.5s

SnapPause On HoverDraggableWheelCaptionsPaused

Props

Name	Type	Default	Description
`items`	{ src: string; alt: string; title?: string; subtitle?: string; href?: string }[]	`built-in scene collection`	Images around the ring, in order (up to 32). Images must allow cross-origin loading. Title and subtitle caption the front image; href is followed when the front image is clicked or Enter is pressed.
`startIndex`	number	`0`	Index of the image that faces the viewer once the ring has loaded.
`direction`	"horizontal" \| "vertical"	`"horizontal"`	Spin the ring sideways, or up and down like a slot reel with the caption beside it.
`aspect`	number	`1.6`	Width divided by height of every card. Images are cropped to fill it.
`size`	number	`0.42`	Card height as a fraction of the component height. Cards narrow automatically to fit the width.
`curvature`	number	`0.6`	How tightly the ring bends, from 0 (a flat strip) to 1 (a tight drum showing three cards).
`distance`	number	`3`	Camera distance in card widths. Closer exaggerates the perspective.
`tilt`	number	`6`	Camera tilt in degrees, so the ring is seen slightly from above. Negative values look from below.
`gap`	number	`22`	Space between cards in pixels.
`radius`	number	`14`	Card corner radius in pixels.
`dim`	number	`0.45`	How much cards fade into the background as they turn away from the viewer.
`edgeFade`	number	`0.5`	Width of the fade at the ends of the ring, where cards leave the component.
`motionBlur`	number	`0.6`	Shutter length for the motion blur. The ring blurs in proportion to its speed and is sharp at rest. 0 turns it off.
`friction`	number	`0.5`	How quickly a flicked ring slows down. Low values coast for several turns, high values stop within a few cards.
`snap`	boolean	`true`	Click into place on the nearest card when the ring slows down, like a detent.
`autoplay`	"step" \| "spin" \| "drift" \| "off"	`"step"`	Step advances one card every interval; spin turns three to six cards at a time; drift rotates continuously at speed.
`speed`	number	`0.25`	Drift speed in cards per second. A negative value reverses the direction of every autoplay mode.
`interval`	number	`3.5`	Seconds between steps or spins.
`pauseOnHover`	boolean	`true`	Pause autoplay while the pointer is over the ring.
`draggable`	boolean	`true`	Drag or flick the ring to spin it. It coasts with momentum; pressing while it spins fast catches it on the next card.
`wheel`	boolean	`true`	Scroll to turn the ring, one card per notch. Set false to leave page scrolling untouched.
`captions`	boolean	`true`	Show the title and subtitle of the front image while the ring is at rest.
`backgroundColor`	string	`"transparent"`	Background of the component. Caption text and image placeholders adapt to it.
`paused`	boolean	`false`	Stops autoplay. Space toggles the same pause from the keyboard. Reduced-motion users get no autoplay and no blur.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`ariaLabel`	string	`"Image reel…"`	Accessible description of the ring and how to use it.
`onIndexChange`	(index: number) => void	`—`	Called whenever a different image comes to the front.
`onSelect`	(item, index) => void	`—`	Called when the front image is clicked or Enter is pressed.
`ref`	{ next, previous, goTo, spin }	`—`	next() and previous() step one card, goTo(index) takes the shortest way round, spin(cards) turns by a number of cards.
`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 around the ring, in order (up to 32). Images must allow cross-origin loading. Title and subtitle caption the front image; href is followed when the front image is clicked or Enter is pressed.

Defaultbuilt-in scene collection

startIndexnumber

Index of the image that faces the viewer once the ring has loaded.

Default0

direction"horizontal" | "vertical"

Spin the ring sideways, or up and down like a slot reel with the caption beside it.

Default"horizontal"

aspectnumber

Width divided by height of every card. Images are cropped to fill it.

Default1.6

sizenumber

Card height as a fraction of the component height. Cards narrow automatically to fit the width.

Default0.42

curvaturenumber

How tightly the ring bends, from 0 (a flat strip) to 1 (a tight drum showing three cards).

Default0.6

distancenumber

Camera distance in card widths. Closer exaggerates the perspective.

Default3

tiltnumber

Camera tilt in degrees, so the ring is seen slightly from above. Negative values look from below.

Default6

gapnumber

Space between cards in pixels.

Default22

radiusnumber

Card corner radius in pixels.

Default14

dimnumber

How much cards fade into the background as they turn away from the viewer.

Default0.45

edgeFadenumber

Width of the fade at the ends of the ring, where cards leave the component.

Default0.5

motionBlurnumber

Shutter length for the motion blur. The ring blurs in proportion to its speed and is sharp at rest. 0 turns it off.

Default0.6

frictionnumber

How quickly a flicked ring slows down. Low values coast for several turns, high values stop within a few cards.

Default0.5

snapboolean

Click into place on the nearest card when the ring slows down, like a detent.

Defaulttrue

autoplay"step" | "spin" | "drift" | "off"

Step advances one card every interval; spin turns three to six cards at a time; drift rotates continuously at speed.

Default"step"

speednumber

Drift speed in cards per second. A negative value reverses the direction of every autoplay mode.

Default0.25

intervalnumber

Seconds between steps or spins.

Default3.5

pauseOnHoverboolean

Pause autoplay while the pointer is over the ring.

Defaulttrue

draggableboolean

Drag or flick the ring to spin it. It coasts with momentum; pressing while it spins fast catches it on the next card.

Defaulttrue

wheelboolean

Scroll to turn the ring, one card per notch. Set false to leave page scrolling untouched.

Defaulttrue

captionsboolean

Show the title and subtitle of the front image while the ring is at rest.

Defaulttrue

backgroundColorstring

Background of the component. Caption text and image placeholders adapt to it.

Default"transparent"

pausedboolean

Stops autoplay. Space toggles the same pause from the keyboard. Reduced-motion users get no autoplay and no blur.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

ariaLabelstring

Accessible description of the ring and how to use it.

Default"Image reel…"

onIndexChange(index: number) => void

Called whenever a different image comes to the front.

Default—

onSelect(item, index) => void

Called when the front image is clicked or Enter is pressed.

Default—

ref{ next, previous, goTo, spin }

next() and previous() step one card, goTo(index) takes the shortest way round, spin(cards) turns by a number of cards.

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—

Name

Type

Default

Description

items

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

built-in scene collection

Images around the ring, in order (up to 32). Images must allow cross-origin loading. Title and subtitle caption the front image; href is followed when the front image is clicked or Enter is pressed.

startIndex

number

0

Index of the image that faces the viewer once the ring has loaded.

direction

"horizontal" | "vertical"

"horizontal"

Spin the ring sideways, or up and down like a slot reel with the caption beside it.

aspect

number

1.6

Width divided by height of every card. Images are cropped to fill it.

size

number

0.42

Card height as a fraction of the component height. Cards narrow automatically to fit the width.

curvature

number

0.6

How tightly the ring bends, from 0 (a flat strip) to 1 (a tight drum showing three cards).

distance

number

3

Camera distance in card widths. Closer exaggerates the perspective.

tilt

number

6

Camera tilt in degrees, so the ring is seen slightly from above. Negative values look from below.

gap

number

22

Space between cards in pixels.

radius

number

14

Card corner radius in pixels.

dim

number

0.45

How much cards fade into the background as they turn away from the viewer.

edgeFade

number

0.5

Width of the fade at the ends of the ring, where cards leave the component.

motionBlur

number

0.6

Shutter length for the motion blur. The ring blurs in proportion to its speed and is sharp at rest. 0 turns it off.

friction

number

0.5

How quickly a flicked ring slows down. Low values coast for several turns, high values stop within a few cards.

snap

boolean

true

Click into place on the nearest card when the ring slows down, like a detent.

autoplay

"step" | "spin" | "drift" | "off"

"step"

Step advances one card every interval; spin turns three to six cards at a time; drift rotates continuously at speed.

speed

number

0.25

Drift speed in cards per second. A negative value reverses the direction of every autoplay mode.

interval

number

3.5

Seconds between steps or spins.

pauseOnHover

boolean

true

Pause autoplay while the pointer is over the ring.

draggable

boolean

true

Drag or flick the ring to spin it. It coasts with momentum; pressing while it spins fast catches it on the next card.

wheel

boolean

true

Scroll to turn the ring, one card per notch. Set false to leave page scrolling untouched.

captions

boolean

true

Show the title and subtitle of the front image while the ring is at rest.

backgroundColor

string

"transparent"

Background of the component. Caption text and image placeholders adapt to it.

paused

boolean

false

Stops autoplay. Space toggles the same pause from the keyboard. Reduced-motion users get no autoplay and no blur.

dpr

number

2

Maximum device pixel ratio for the canvas.

ariaLabel

string

"Image reel…"

Accessible description of the ring and how to use it.

onIndexChange

(index: number) => void

—

Called whenever a different image comes to the front.

onSelect

(item, index) => void

—

Called when the front image is clicked or Enter is pressed.

ref

{ next, previous, goTo, spin }

—

next() and previous() step one card, goTo(index) takes the shortest way round, spin(cards) turns by a number of cards.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.