Logo cloud (motion)

"use client"

/**
 * The `logo-cloud` demo, with the motion variant swapped in.
 *
 * Identical props: the motion variant only changes which slot components
 * the static section renders through.
 *
 * `"use client"` is required here, not incidental: the motion variant is a
 * client component, and icon components cannot cross a server-to-client
 * boundary as props. See the note on `IconComponent`.
 */

import { LogoCloudMotion } from "@registry/sections/logo-cloud-motion"

import { LOGOS } from "./content"

export function Demo() {
  return (
    <LogoCloudMotion
      title="Trusted by teams shipping every day"
      items={LOGOS}
      showNames
    />
  )
}

"use client"

/**
 * LogoCloudMotion — the logo wall with a staggered entrance.
 *
 * A genuine wrapper: it renders the static `LogoCloud` and only swaps the list
 * slots for `Stagger` and `StaggerItem`. No markup, no styling and no
 * accessibility behaviour is duplicated, so the two variants cannot drift.
 *
 * a11y: the slots keep rendering `ul`/`li`, so list semantics survive the
 * wrapper, and the whole thing is inert under `prefers-reduced-motion`.
 *
 * Dependencies: react, @/components/motion/slots, @/components/sections/logo-cloud.
 */

import { StaggerList, StaggerListItem } from "@/components/motion/slots"
import { LogoCloud, type LogoCloudProps } from "@/components/sections/logo-cloud"

export type LogoCloudMotionProps = Omit<LogoCloudProps, "listAs" | "itemAs">

export function LogoCloudMotion(props: LogoCloudMotionProps) {
  return <LogoCloud {...props} listAs={StaggerList} itemAs={StaggerListItem} />
}