Album Rail

A fan of album sleeves, each with a record tucked inside

album-rail-tw

Props

Name	Type	Default	Description
`items`	{ src: string; alt: string; title?: string; subtitle?: string; href?: string }[]	`built-in cover collection`	Covers to show, in order. Images must allow cross-origin loading. Title and subtitle (the artist) caption the focused cover; href makes selecting it navigate when vinyl is off.
`startIndex`	number	`0`	Index of the cover that starts in focus.
`aspect`	number	`1`	Width divided by height of every cover. 1 is a square album sleeve; images are cropped to fill it.
`size`	number	`0.62`	Height of the focused cover as a fraction of the space above the caption.
`spread`	number	`0.58`	Distance from the focused cover to its first neighbours, as a fraction of the cover width.
`stack`	number	`0.5`	How tightly the covers further out pack together. 0 spaces them evenly; 1 stacks them like a coverflow.
`fan`	number	`6`	Tilt of each neighbour in degrees, fanning the covers like a hand of cards.
`turn`	number	`22`	How far the neighbours turn away from the viewer in degrees.
`depth`	number	`0.5`	How far the neighbours recede and shrink behind the focused cover.
`visible`	number	`3`	Covers shown on each side of the focused one, from 1 to 5.
`radius`	number	`14`	Corner radius of the covers in pixels.
`dim`	number	`0.45`	How much the covers away from the centre fade into the background. Hovering one brings it back.
`shadow`	number	`0.6`	Strength of the soft shadows the covers and the record cast on each other.
`vinyl`	boolean	`true`	Each cover holds a record. Hovering the focused cover lets the record peek out; clicking it, Enter or the play button slides it out and spins it.
`vinylColor`	string	`"#131116"`	Colour of the record. The label in its centre shows the album art.
`accentColor`	string	`"auto"`	Colour of the play button, or of the ruler marker when vinyl is off. "auto" picks the most vivid colour of the focused cover and adjusts it to the background; any CSS colour fixes it.
`rpm`	number	`33`	Turntable speed of a playing record, in revolutions per minute.
`autoplay`	boolean	`true`	Move to the next cover every interval seconds. Pauses while hovered, held or playing.
`interval`	number	`4`	Seconds between autoplay steps.
`pauseOnHover`	boolean	`true`	Pause autoplay while the pointer is over the rail.
`loop`	boolean	`true`	Wrap around at the ends. When false, the rail stops at the first and last cover.
`draggable`	boolean	`true`	Drag or swipe the covers sideways, with momentum and snapping.
`wheel`	boolean	`true`	Scroll to move one cover per notch. Set false to leave page scrolling untouched.
`captions`	boolean	`true`	Show the title and artist of the focused cover. The caption slides with the rail as it moves.
`controls`	boolean	`true`	Show the ruler: one tick per album sliding with the rail, a play button at its centre and arrows at its ends. Drag or click the ruler to scrub.
`backgroundColor`	string	`"transparent"`	Background of the component. Text, controls and the fading covers adapt to it.
`paused`	boolean	`false`	Stops autoplay. Reduced-motion users get instant steps and a still record.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`ariaLabel`	string	`"Album rail…"`	Accessible description of the rail and how to use it.
`onIndexChange`	(index) => void	`—`	Called when a different cover comes into focus.
`onSelect`	(item, index) => void	`—`	Called when the focused cover is clicked or Enter is pressed. Clicking any other cover brings it into focus.
`onPlayChange`	(index, playing) => void	`—`	Called when a record starts or stops playing.
`ref`	{ next, previous, goTo, play, stop }	`—`	Imperative controls for moving through the rail and playing the focused record.
`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 }[]

Covers to show, in order. Images must allow cross-origin loading. Title and subtitle (the artist) caption the focused cover; href makes selecting it navigate when vinyl is off.

Defaultbuilt-in cover collection

startIndexnumber

Index of the cover that starts in focus.

Default0

aspectnumber

Width divided by height of every cover. 1 is a square album sleeve; images are cropped to fill it.

Default1

sizenumber

Height of the focused cover as a fraction of the space above the caption.

Default0.62

spreadnumber

Distance from the focused cover to its first neighbours, as a fraction of the cover width.

Default0.58

stacknumber

How tightly the covers further out pack together. 0 spaces them evenly; 1 stacks them like a coverflow.

Default0.5

fannumber

Tilt of each neighbour in degrees, fanning the covers like a hand of cards.

Default6

turnnumber

How far the neighbours turn away from the viewer in degrees.

Default22

depthnumber

How far the neighbours recede and shrink behind the focused cover.

Default0.5

visiblenumber

Covers shown on each side of the focused one, from 1 to 5.

Default3

radiusnumber

Corner radius of the covers in pixels.

Default14

dimnumber

How much the covers away from the centre fade into the background. Hovering one brings it back.

Default0.45

shadownumber

Strength of the soft shadows the covers and the record cast on each other.

Default0.6

vinylboolean

Each cover holds a record. Hovering the focused cover lets the record peek out; clicking it, Enter or the play button slides it out and spins it.

Defaulttrue

vinylColorstring

Colour of the record. The label in its centre shows the album art.

Default"#131116"

accentColorstring

Colour of the play button, or of the ruler marker when vinyl is off. "auto" picks the most vivid colour of the focused cover and adjusts it to the background; any CSS colour fixes it.

Default"auto"

rpmnumber

Turntable speed of a playing record, in revolutions per minute.

Default33

autoplayboolean

Move to the next cover every interval seconds. Pauses while hovered, held or playing.

Defaulttrue

intervalnumber

Seconds between autoplay steps.

Default4

pauseOnHoverboolean

Pause autoplay while the pointer is over the rail.

Defaulttrue

loopboolean

Wrap around at the ends. When false, the rail stops at the first and last cover.

Defaulttrue

draggableboolean

Drag or swipe the covers sideways, with momentum and snapping.

Defaulttrue

wheelboolean

Scroll to move one cover per notch. Set false to leave page scrolling untouched.

Defaulttrue

captionsboolean

Show the title and artist of the focused cover. The caption slides with the rail as it moves.

Defaulttrue

controlsboolean

Show the ruler: one tick per album sliding with the rail, a play button at its centre and arrows at its ends. Drag or click the ruler to scrub.

Defaulttrue

backgroundColorstring

Background of the component. Text, controls and the fading covers adapt to it.

Default"transparent"

pausedboolean

Stops autoplay. Reduced-motion users get instant steps and a still record.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

ariaLabelstring

Accessible description of the rail and how to use it.

Default"Album rail…"

onIndexChange(index) => void

Called when a different cover comes into focus.

Default—

onSelect(item, index) => void

Called when the focused cover is clicked or Enter is pressed. Clicking any other cover brings it into focus.

Default—

onPlayChange(index, playing) => void

Called when a record starts or stops playing.

Default—

ref{ next, previous, goTo, play, stop }

Imperative controls for moving through the rail and playing the focused record.

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—

Album Rail

Customize

Props

Album Rail

Customize

Props