Strip Gallery

A horizontally expanding image-strip slider where one strip is active at a time. Supports optional titles, descriptions, and CTA links. Control sizing and behavior with props like expandedPx, collapsedPx, gapPx, heightPx, expandOnHover, and autoExpand.

An interactive accordion-style image gallery where strips expand and reveal overlay content. Activation can be manual (hover/click) or automatic (carousel).

Behavior

Accordion layout — only one strip expands at a time, others collapse.
Hover/click expand — hovering or clicking can activate a strip.
Auto advance — if enabled, active strip cycles every few seconds.
Overlay — titles, descriptions, and CTA buttons show on the active strip.
Smooth easing — widths and overlay fade/slide animate with configurable curves.

Props

items — array of strips ({ imageSrc, title?, description?, ctaHref?, ctaLabel? }).
className?: string — extra classes for the wrapper.
collapsedPx?: number — width of non-active strips (default: 72).
expandedPx?: number — width of the active strip (default: 560).
gapPx?: number — gap between strips (default: 5).
heightPx?: number — total gallery height (default: 260).
ease?: [number,number,number,number] — easing curve for animations.
expandOnHover?: boolean — whether hovering activates strips (default: true).
autoExpand?: boolean — whether the active strip cycles automatically (default: true).