Mediastable

Reel

A roulette-style carousel you can drag, flick, scroll sideways or step.

New

Aurora Lamp

$189

Popular

Halo Speaker

$249

Limited

Nimbus Chair

$540

Studio

Vertex Desk

$820

New

Pulse Watch

$310

Pro

Drift Cam

$470

Studio

Echo Mic

$155

Customize

Sizeitem box and spacing

Item width300 pxitemWidth

Item height400 pxitemHeight

Corner radius20 pxradius

Spacing340 pxspacing

Neighbours each side3visible

Items (demo only)7items

Neighbourshow side items recede

Scale0.800scale

Opacity0.350opacity

Y rotation0 °rotate

Push back0 pxdepth

Perspective1400 pxperspective

Motion and inputspring, drag, wheel, controls

Spring stiffness9.00stiffness

Looploop

Drag to spindrag

Horizontal wheelwheel

Arrow buttonsarrows

Dotsdots

Click a neighbour to centre itclickToSelect

Usage

TSX

import { Reel } from "zerogravity"

<Reel>
    <article>Slide one</article>
</Reel>

Generated from the controls above. Only props that differ from their defaults are shown.

Props

21 documented props on Reel
Property	Type	Default	Description
`itemWidth`	`number`	`300`	Item width. Range 120 to 640 px.
`itemHeight`	`number`	`400`	Item height. Range 160 to 720 px.
`radius`	`number`	`20`	Corner radius. Range 0 to 48 px.
`spacing`	`number`	`340`	Spacing. Range 60 to 700 px.
`visible`	`number`	`3`	Neighbours each side. Range 1 to 8.
`scale`	`number`	`0.8`	Scale. Range 0.3 to 1.
`opacity`	`number`	`0.35`	Opacity. Range 0 to 1.
`rotate`	`number`	`0`	Y rotation. Range 0 to 70 °.
`depth`	`number`	`0`	Push back. Range 0 to 500 px.
`perspective`	`number`	`1400`	Perspective. Range 400 to 3000 px.
`stiffness`	`number`	`9`	Spring stiffness. Range 2 to 24.
`loop`	`boolean`	`false`	Loop.
`drag`	`boolean`	`true`	Drag to spin.
`wheel`	`boolean`	`true`	Horizontal wheel.
`arrows`	`boolean`	`true`	Arrow buttons.
`dots`	`boolean`	`true`	Dots.
`clickToSelect`	`boolean`	`true`	Click a neighbour to centre it.
`children`	`ReactNode`	`—`	One element per slide.
`index`	`number`	`—`	Controlled index of the centred slide.
`onIndexChange`	`(index: number) => void`	`—`	Fires when a different slide reaches the centre.
`label`	`string`	`"Carousel"`	Accessible name for the carousel region.

Dependencies

0 external runtime dependencies

Ships with nothing but React.