Interactions

Image Flow Carousel

Hover-weighted gallery that stretches the active frame into focus.

All components

Installation

Coming soon. Components will be available via the registry once checkout goes live.

Usage

<ImageFlowCarousel
  images={[
    { src: "/covers/1.webp", title: "Aurora", subtitle: "Mountains" },
    { src: "/covers/2.webp", title: "Tidal" },
    { src: "/covers/3.webp", title: "Volt" },
  ]}
  autoPlay
  interval={3000}
  height={520}
/>

Props

Prop	Type	Default	Description
images*	ImageItem[]	—	Array of `{ src, title?, subtitle? }`. Title/subtitle render over the active frame.
autoPlay	boolean	false	Auto-advance to the next frame on an interval.
interval	number	3000	Auto-play interval in ms.
height	number	560	Desktop track height in px.
mobileHeight	number	360	Track height in px on viewports below the `sm` breakpoint.
imageFit	CSSProperties["objectFit"]	"cover"	How each image fills its frame.
activeRatio	number	4	Width multiplier of the active frame relative to inactive frames.
className	string	—	Classes merged onto the carousel root.

Use cases

Product gallery
Showcase shots of a hardware product where the focused frame deserves real estate.
Editorial / lookbook
Magazine-style story where hover or autoplay leads the eye through a sequence.
Case study covers
Agency or studio site listing recent projects with a single hero per card.
Travel destinations
Itinerary pages where each stop gets a generous photo without losing the rest of the trip.