pleate.uiEffects
Interactive

Flex Carousel

An endless row of images that bends through liquid glass at its edges: swollen and rippled at the sides, clear in the middle.
import { FlexCarousel } from "pleate/effects/flex-carousel";

Highlights

  • River winding through a green valley
  • Red rock canyon
  • Mountains under a blue sky
  • Waterfall in a forest
  • Castle on a hill
  • Barista pouring coffee
  • Jellyfish in dark water
  • Lioness resting

Props

images

Pictures; alt is required.

{ src, alt }[]

itemWidth / itemHeight

Tile size in px.

numberdefault 220 / 280

duration

Seconds for one loop.

numberdefault 30

edge

Glass width as a share of the row.

numberdefault 0.22

distortion

Warp strength in px.

numberdefault 40

label

Accessible name.

stringdefault "Gallery"

Accessibility

  • Only one copy of the images is read.
  • Pauses on hover; reduced motion keeps it still.