Carousel Glass Edge Flow

ProNew

An endless row of cards whose left and right edges are frosted glass, so cards blur and fade as they enter and leave.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/carousel-glass-edge-flow

Prop	Type	Default	Description
`items`	`{ title: string; caption?: string; art?: string }[]`	`-`	Cards in the row. `art` is any CSS background.
`label`	`string`	`"Highlights"`	Accessible name of the region.
`duration`	`number`	`36`	Seconds for one full loop.
`pauseOnHover`	`boolean`	`true`	Pause while the pointer is over the row.

One transform animation moves the whole lane; the glass edges are static layers with a backdrop blur and a gradient mask.
With prefers-reduced-motion: reduce the animation is removed and the row scrolls horizontally.
The region is labelled; the second copy of the row is hidden and inert, so each card is read once.
Under reduced motion the row stops and can be scrolled by hand.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/carousel-glass-edge-flow

Prop	Type	Default	Description
`items`	`{ title: string; caption?: string; art?: string }[]`	`-`	Cards in the row. `art` is any CSS background.
`label`	`string`	`"Highlights"`	Accessible name of the region.
`duration`	`number`	`36`	Seconds for one full loop.
`pauseOnHover`	`boolean`	`true`	Pause while the pointer is over the row.

One transform animation moves the whole lane; the glass edges are static layers with a backdrop blur and a gradient mask.
With prefers-reduced-motion: reduce the animation is removed and the row scrolls horizontally.
The region is labelled; the second copy of the row is hidden and inert, so each card is read once.
Under reduced motion the row stops and can be scrolled by hand.