| items | Array<LogoCloudItem> | [] | Logo cards to render. Each item may include id, name, href (defaults to #), external, ariaLabel, logo ({ src, alt, width, height, unoptimized }), logoNode (ReactNode), image ({ src, alt, position, unoptimized, blurDataURL }), label, arrow, borderColor, hoverBorderColor, borderWidth, background, and color. |
| speed | number | 40 | Auto-scroll speed in pixels per second. Set to 0 to disable auto-scrolling and leave the row swipeable. |
| direction | "left" | "right" | "left" | Direction in which the logo track scrolls. |
| pauseOnHover | boolean | false | Pause the marquee while a pointer is over the section. Keyboard focus also pauses the marquee. |
| respectReducedMotion | boolean | true | Disable auto-scrolling when the user requests reduced motion. |
| reveal | { duration?: number; closeDuration?: number; ease?: Easing } | { duration: 0.65, closeDuration: 0.45, ease: [0.22, 1, 0.36, 1] } | Timing and easing for the cursor-centered image reveal and collapse. |
| imageZoom | number | 1.08 | Starting scale of a revealed image. It animates to 1; set to 1 to disable the zoom. |
| arrowShift | number | 3 | Horizontal arrow nudge in pixels on card hover. Set to 0 to disable it. |
| cardWidth | number | string | 360 | Width of each logo card. A number is treated as pixels; a CSS width string is also accepted. |
| cardMaxWidth | number | string | "85vw" | Maximum width of each card, useful for keeping cards within narrow viewports. |
| cardHeight | number | string | 460 | Height of each logo card. A number is treated as pixels; a CSS height string is also accepted. |
| gap | number | string | 12 | Horizontal space between cards. A number is treated as pixels; a CSS margin string is also accepted. |
| radius | number | string | 24 | Card corner radius. A number is treated as pixels; a CSS radius string is also accepted. |
| borderColor | string | "#3a3a3a" | Default card border color. An item can override this value. |
| hoverBorderColor | string | false | "#6b6b6b" | Card border color while hovered or focused. Set to false or the default border color to disable the color change. |
| borderWidth | number | string | 1 | Card border width. An item can override this value. |
| background | string | "#000" | Default card background color or CSS background value. An item can override this value. |
| color | string | "#fff" | Default card foreground color. An item can override this value. |
| overlay | string | false | Default dark gradient | CSS background value layered over revealed images. Set to false to remove the overlay. |
| fade | boolean | true | Fade the marquee track at its left and right edges. |
| fadeSize | number | 8 | Width of each edge fade as a percentage of the marquee. |
| label | ReactNode | false | "Read story" | Default label shown near the bottom of each card. An item can override it; set to false to hide labels. |
| arrow | ReactNode | false | Default right-arrow SVG | Default arrow rendered beside each label. An item can override it; set to false to hide arrows. |
| imageSizes | string | Derived from cardWidth (360px fallback) | Sizes hint passed to next/image for revealed card images. |
| imageQuality | number | 75 | Quality passed to next/image for revealed card images. |
| unoptimized | boolean | false | Skip Next.js image optimization for all card logos and reveal images. Per-image options can override this value. |
| ariaLabel | string | "Customer stories" | Accessible label for the logo cloud section. |
| className | string | undefined | Additional class name applied to the root section. |
| style | React.CSSProperties | undefined | Inline styles applied to the root section. |
| classNames | Partial<Record<"root" | "track" | "item" | "card" | "reveal" | "image" | "overlay" | "logo" | "label", string>> | {} | Optional class names for the root, track, item, card, reveal, image, overlay, logo, and label elements. |
