Flex Carousel

An infinite image row that flows through invisible liquid glass at its edges, with four bend presets, five entrances, a speed squeeze and click to focus.

Default

Drag, scroll or use the arrow keys to move the row. Click a card to center and open it. Every prop is wired to the controls underneath.

Iridescence, 1 of 12

Customize

Preset

Intro

Fit

Card Height0.5

Gap12px

Radius0px

Lens Width0.74

Lens Height1.18

Tilt62°

Roundness1

Bend0.34

Reach0.38

Curl

Dispersion0.45

Liquid0

Follow Cursor

Squeeze0.2

Focus On ClickAutoplay

Interval4s

CaptionsCapture Wheel

API Reference

FlexCarousel

Prop	Type	Default	Description
`items`	`Array<{ src: string; alt?: string; title?: string; subtitle?: string }>`	`12 sample photos`	Images shown in the row. Each keeps its natural aspect ratio unless fit is set. The alt text is announced to screen readers, the title and optional subtitle are shown above the row.
`preset`	`'liquid' \| 'ribbon' \| 'vortex' \| 'arch'`	`'liquid'`	A starting shape for the invisible glass. Every lens prop below overrides the preset value when you pass it.
`intro`	`'rise' \| 'bloom' \| 'spin' \| 'deal' \| 'none'`	`'rise'`	Entrance once the images load. Rise lifts the cards in from below, bloom fades them in while the bend forms, spin lands a fast flick, deal spreads the cards from the middle. Any input skips it.
`fit`	`'natural' \| 'portrait' \| 'square' \| 'landscape'`	`'natural'`	Card shape. Natural keeps each image uncropped, the others crop every card to the same shape.
`cardHeight`	`number`	`0.5`	Card height as a fraction of the container height.
`gap`	`number`	`12`	Space between cards, in px.
`radius`	`number`	`0`	Corner radius of the cards, in px.
`lensWidth`	`number`	`from preset`	Width of the invisible glass as a fraction of the container width.
`lensHeight`	`number`	`from preset`	Height of the invisible glass as a fraction of the container width, so the bend keeps its shape at any size.
`tilt`	`number`	`from preset`	Rotation of the glass in degrees. It decides where its edge crosses the row.
`roundness`	`number`	`from preset`	Shape of the glass, from a rounded rectangle at 0 to a perfect ellipse at 1.
`bend`	`number`	`from preset`	How far the row flexes where it passes the edge of the glass. The glass itself is never drawn and the images always stay connected.
`reach`	`number`	`from preset`	Width of the curved edge of the glass. Small values give a tight kink, large values a long smooth bend.
`curl`	`'twist' \| 'rise' \| 'fall'`	`from preset`	Which way the ends of the row flex. Twist sends the left end down and the right end up, rise lifts both, fall drops both.
`dispersion`	`number`	`from preset`	Rainbow splitting of light, only where the edge of the glass bends the images.
`liquid`	`number`	`from preset`	How much the glass stretches and wobbles like a liquid when the row moves. Off in every preset.
`followCursor`	`boolean`	`from preset`	Let the lens drift after the cursor like a loupe, and return to the center when it leaves.
`squeeze`	`number`	`0.2`	How much the cards shrink while the row moves fast. 0 keeps them at full size.
`focusOnClick`	`boolean`	`true`	Clicking a card centers it and opens it: the others part, the bend melts away and the card grows. Click, drag, scroll or Escape closes it.
`autoplay`	`boolean`	`false`	Advance one card at a time. Pauses on hover, focus and interaction, and when reduced motion is on.
`interval`	`number`	`4`	Seconds between autoplay steps.
`captions`	`boolean`	`true`	Show the title of the centered card above the row and a counter below it.
`captureWheel`	`boolean`	`true`	Let a vertical mouse wheel scroll the carousel while hovering. Horizontal wheels and trackpads always scroll it.

Event	Description
`change`	Emitted with (index, item) whenever a different card reaches the center.
`select`	Emitted with (index, item) when the centered card is clicked or Enter is pressed. Clicking a side card centers it first.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`ArrowRight` + `ArrowDown`	Moves to the next card.
`ArrowLeft` + `ArrowUp`	Moves to the previous card.
`Home` + `End`	Jumps to the first or last card.
`Enter` + `Space`	Opens the centered card.
`Escape`	Closes an opened card.

The root is a focusable carousel region and announces the centered card through a polite live region.
Respects prefers-reduced-motion: the entrance becomes a fade and the liquid wobble, parallax and autoplay stop.

Flag Flowing Menu