Elastic Reel

A dock of photo slices that swell open into full images

elastic-reel-tw

Customize

Background

Bar Width

44px

Bar Height

0.50

Gap

10px

Radius

12px

Magnify

2.40

Lift

1.15

Influence

200px

Open Size

0.72

Open Aspect

1.00

Elasticity

0.35

Blur

0.50

Dim

0.45

Shadow

0.35

Rim

0.12

Speed

1.40

Interval

4.0s

Pause On HoverDraggableWheelCaptionsLabelsPaused

Props

Name	Type	Default	Description
`items`	{ src: string; alt: string; title?: string; subtitle?: string; focus?: number }[]	`built-in scene collection`	Photos in the reel, in order. Images must allow cross-origin loading. Title labels a bar and captions the open photo; focus (0 to 1) picks which vertical slice a narrow bar shows.
`defaultOpen`	number	`-1`	Index of a photo to open once the reel has loaded. -1 starts closed.
`barWidth`	number	`44`	Width of a bar at rest in pixels. Bars narrow automatically to fit the container.
`barHeight`	number	`0.5`	Height of a bar at rest, as a fraction of the component height.
`gap`	number	`10`	Space between bars in pixels.
`radius`	number	`12`	Corner radius in pixels. Narrow bars cap it at half their width.
`magnify`	number	`2.4`	How much wider the bar under the pointer grows. 1 turns magnification off.
`lift`	number	`1.15`	How much taller the bar under the pointer grows.
`influence`	number	`200`	Distance in pixels over which bars around the pointer magnify.
`align`	"center" \| "bottom"	`"center"`	Grow bars around their middle, or upward from a shared baseline like a dock.
`openSize`	number	`0.72`	Height of an open photo, as a fraction of the space above its caption.
`openAspect`	number	`1`	Width divided by height of an open photo. 0 opens each photo at its own proportions.
`elasticity`	number	`0.35`	How springy the motion is, from 0 (smooth and exact) to 1 (bouncy, with a slight wobble as bars settle).
`blur`	number	`0.5`	How much the other bars blur while a photo is open. Hovering one sharpens it again.
`dim`	number	`0.45`	How much the other bars fade into the background while a photo is open.
`shadow`	number	`0.35`	Strength of the soft shadow under each bar.
`rim`	number	`0.12`	Strength of the hairline edge highlight around each bar.
`autoplay`	"sweep" \| "cycle" \| "off"	`"sweep"`	Sweep glides a magnifying focus back and forth across the reel while it is idle; cycle opens each photo in turn every interval.
`speed`	number	`1.4`	Sweep speed in bars per second.
`interval`	number	`4`	Seconds between photos when autoplay is cycle.
`pauseOnHover`	boolean	`true`	Pause autoplay while the pointer is over the reel.
`draggable`	boolean	`true`	Drag along the reel to move the magnification (the touch equivalent of hovering). With a photo open, swipe it sideways to move to the next one.
`wheel`	boolean	`true`	Scroll to move the magnification one bar per notch, or between open photos. Set false to leave page scrolling untouched.
`captions`	boolean	`true`	Show the title and subtitle under an open photo.
`labels`	boolean	`true`	Show the title of the bar under the pointer, below the reel.
`backgroundColor`	string	`"transparent"`	Background of the component. Text, shadows and dimmed bars adapt to it.
`paused`	boolean	`false`	Stops autoplay. Reduced-motion users get instant transitions and no autoplay.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`ariaLabel`	string	`"Elastic reel…"`	Accessible description of the reel and how to use it.
`onOpen`	(item, index) => void	`—`	Called when a photo opens, by click, tap, keyboard, wheel, swipe or autoplay.
`onClose`	() => void	`—`	Called when the open photo closes.
`ref`	{ open, close, next, previous }	`—`	open(index) opens a photo, close() closes it, next() and previous() step through the reel.
`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; focus?: number }[]

Photos in the reel, in order. Images must allow cross-origin loading. Title labels a bar and captions the open photo; focus (0 to 1) picks which vertical slice a narrow bar shows.

Defaultbuilt-in scene collection

defaultOpennumber

Index of a photo to open once the reel has loaded. -1 starts closed.

Default-1

barWidthnumber

Width of a bar at rest in pixels. Bars narrow automatically to fit the container.

Default44

barHeightnumber

Height of a bar at rest, as a fraction of the component height.

Default0.5

gapnumber

Space between bars in pixels.

Default10

radiusnumber

Corner radius in pixels. Narrow bars cap it at half their width.

Default12

magnifynumber

How much wider the bar under the pointer grows. 1 turns magnification off.

Default2.4

liftnumber

How much taller the bar under the pointer grows.

Default1.15

influencenumber

Distance in pixels over which bars around the pointer magnify.

Default200

align"center" | "bottom"

Grow bars around their middle, or upward from a shared baseline like a dock.

Default"center"

openSizenumber

Height of an open photo, as a fraction of the space above its caption.

Default0.72

openAspectnumber

Width divided by height of an open photo. 0 opens each photo at its own proportions.

Default1

elasticitynumber

How springy the motion is, from 0 (smooth and exact) to 1 (bouncy, with a slight wobble as bars settle).

Default0.35

blurnumber

How much the other bars blur while a photo is open. Hovering one sharpens it again.

Default0.5

dimnumber

How much the other bars fade into the background while a photo is open.

Default0.45

shadownumber

Strength of the soft shadow under each bar.

Default0.35

rimnumber

Strength of the hairline edge highlight around each bar.

Default0.12

autoplay"sweep" | "cycle" | "off"

Sweep glides a magnifying focus back and forth across the reel while it is idle; cycle opens each photo in turn every interval.

Default"sweep"

speednumber

Sweep speed in bars per second.

Default1.4

intervalnumber

Seconds between photos when autoplay is cycle.

Default4

pauseOnHoverboolean

Pause autoplay while the pointer is over the reel.

Defaulttrue

draggableboolean

Drag along the reel to move the magnification (the touch equivalent of hovering). With a photo open, swipe it sideways to move to the next one.

Defaulttrue

wheelboolean

Scroll to move the magnification one bar per notch, or between open photos. Set false to leave page scrolling untouched.

Defaulttrue

captionsboolean

Show the title and subtitle under an open photo.

Defaulttrue

labelsboolean

Show the title of the bar under the pointer, below the reel.

Defaulttrue

backgroundColorstring

Background of the component. Text, shadows and dimmed bars adapt to it.

Default"transparent"

pausedboolean

Stops autoplay. Reduced-motion users get instant transitions and no autoplay.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

ariaLabelstring

Accessible description of the reel and how to use it.

Default"Elastic reel…"

onOpen(item, index) => void

Called when a photo opens, by click, tap, keyboard, wheel, swipe or autoplay.

Default—

onClose() => void

Called when the open photo closes.

Default—

ref{ open, close, next, previous }

open(index) opens a photo, close() closes it, next() and previous() step through the reel.

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; focus?: number }[]

built-in scene collection

Photos in the reel, in order. Images must allow cross-origin loading. Title labels a bar and captions the open photo; focus (0 to 1) picks which vertical slice a narrow bar shows.

defaultOpen

number

-1

Index of a photo to open once the reel has loaded. -1 starts closed.

barWidth

number

44

Width of a bar at rest in pixels. Bars narrow automatically to fit the container.

barHeight

number

0.5

Height of a bar at rest, as a fraction of the component height.

gap

number

10

Space between bars in pixels.

radius

number

12

Corner radius in pixels. Narrow bars cap it at half their width.

magnify

number

2.4

How much wider the bar under the pointer grows. 1 turns magnification off.

lift

number

1.15

How much taller the bar under the pointer grows.

influence

number

200

Distance in pixels over which bars around the pointer magnify.

align

"center" | "bottom"

"center"

Grow bars around their middle, or upward from a shared baseline like a dock.

openSize

number

0.72

Height of an open photo, as a fraction of the space above its caption.

openAspect

number

1

Width divided by height of an open photo. 0 opens each photo at its own proportions.

elasticity

number

0.35

How springy the motion is, from 0 (smooth and exact) to 1 (bouncy, with a slight wobble as bars settle).

blur

number

0.5

How much the other bars blur while a photo is open. Hovering one sharpens it again.

dim

number

0.45

How much the other bars fade into the background while a photo is open.

shadow

number

0.35

Strength of the soft shadow under each bar.

rim

number

0.12

Strength of the hairline edge highlight around each bar.

autoplay

"sweep" | "cycle" | "off"

"sweep"

Sweep glides a magnifying focus back and forth across the reel while it is idle; cycle opens each photo in turn every interval.

speed

number

1.4

Sweep speed in bars per second.

interval

number

4

Seconds between photos when autoplay is cycle.

pauseOnHover

boolean

true

Pause autoplay while the pointer is over the reel.

draggable

boolean

true

Drag along the reel to move the magnification (the touch equivalent of hovering). With a photo open, swipe it sideways to move to the next one.

wheel

boolean

true

Scroll to move the magnification one bar per notch, or between open photos. Set false to leave page scrolling untouched.

captions

boolean

true

Show the title and subtitle under an open photo.

labels

boolean

true

Show the title of the bar under the pointer, below the reel.

backgroundColor

string

"transparent"

Background of the component. Text, shadows and dimmed bars adapt to it.

paused

boolean

false

Stops autoplay. Reduced-motion users get instant transitions and no autoplay.

dpr

number

2

Maximum device pixel ratio for the canvas.

ariaLabel

string

"Elastic reel…"

Accessible description of the reel and how to use it.

onOpen

(item, index) => void

—

Called when a photo opens, by click, tap, keyboard, wheel, swipe or autoplay.

onClose

() => void

—

Called when the open photo closes.

ref

{ open, close, next, previous }

—

open(index) opens a photo, close() closes it, next() and previous() step through the reel.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.