Motion UIComponentsComponent

Coverflow

A 3D coverflow carousel where items rotate, scale and fade as they leave centre.

API reference

Components

`<CoverflowItem />`

One projected slide. Drop one per card into Coverflow's items.

`children?`

ReactNode

Card markup the projection is applied to.

`label?`

string

Accessible slide label.

`className?`

string

Merged onto the projected wrapper.

`<CoverflowControls />`

Navigation strip for a Coverflow. Render as a child of Coverflow.

`announce?`

(index: number, total: number) => string

Builds the aria-live announcement for the current slide.

`prevLabel?`

string = "Previous slide"

Accessible label for the previous arrow.

`nextLabel?`

string = "Next slide"

Accessible label for the next arrow.

`dotsLabel?`

string = "Choose a slide"

aria-label for the dots tablist.

`className?`

string

Merged onto the control-strip root.

`<Coverflow />`

Coverflow stage with mask band, geometry context and keyboard paging.

`items`

ReactNode[]

One CoverflowItem per slide.

`cardWidth?`

number = 340

Centred card width in px. Default 340.

`rotation?`

number = 22

Peak neighbour rotateY in degrees. Default 22.

`neighbourScale?`

number = 0.82

Scale at full recede. Default 0.82.

`neighbourOpacity?`

number = 0.45

Opacity at full recede. Default 0.45.

`perspective?`

number = 1200

Card transformPerspective in px. Default 1200.

`startIndex?`

number = 0

Initial slide index. Default 0.

`"aria-label"?`

string

aria-label for the carousel region.

`children?`

ReactNode

Controls, typically CoverflowControls.

`className?`

string

Merged onto the mask band root.

Hooks

`useCoverflowItem`

Derives the coverflow projection for the current ticker item.

useCoverflowItem(): CoverflowItemValues

Returns

`offset`

MotionValue<number>

Raw per-item ticker offset.

`x`

MotionValue<string>

Horizontal travel as a percentage string.

`rotateY`

MotionValue<number>

3D swing in degrees.

`scale`

MotionValue<number>

Recede scale.

`opacity`

MotionValue<number>

Recede opacity.

`zIndex`

MotionValue<number>

Stacking order, highest at centre.

`geometry`

CoverflowGeometry

Resolved geometry from the parent Coverflow.

`props`

ReturnType<typeof useTickerItem>["props"]

motion-plus ticker item props to spread onto the list element.