Logos Carousel

1"use client"
2 
3import { Children, memo, useEffect, useMemo, useRef, useState } from "react"
4import type { ReactNode } from "react"
5import {
6  AnimatePresence,
7  motion,
8  useInView,
9  usePageInView,
10  useReducedMotion,
11} from "motion/react"
12import type { Transition } from "motion/react"
13 
14import { cn } from "@/lib/utils"
15 
16const DEFAULT_COLUMN_COUNT = 4
17 
18/** How long each logo stays visible before cycling to the next one (ms). */
19const CYCLE_INTERVAL = 2400
20 
21/**
22 * Delay between adjacent columns within a single wave (ms). Kept smaller than
23 * the enter/exit duration so neighbouring transitions overlap into a ripple.
24 */
25const STAGGER_DELAY = 125
26 
27/** Duration of a single enter or exit transition (s). */
28const TRANSITION_DURATION = 0.5
29 
30const EASE_OUT_QUAD = [0.25, 0.46, 0.45, 0.94] as const
31 
32/** Direction the wave sweeps across the columns. */
33type WaveDirection = "ltr" | "rtl"
34 
35export type LogosCarouselProps = {
36  /** Logo elements to cycle through. Each child is rendered as a single logo. */
37  children: ReactNode
38  /**
39   * Number of columns to spread the logos across. Capped at the number of logos.
40   * @defaultValue 4
41   */
42  columnCount?: number
43  /**
44   * Direction the ripple travels: left-to-right or right-to-left.
45   * @defaultValue "ltr"
46   */
47  direction?: WaveDirection
48  className?: string
49}
50 
51export function LogosCarousel({
52  children,
53  columnCount = DEFAULT_COLUMN_COUNT,
54  direction = "ltr",
55  className,
56}: LogosCarouselProps) {
57  const columns = useMemo(
58    () => distributeLogos(Children.toArray(children), columnCount),
59    [children, columnCount]
60  )
61 
62  const reduceMotion = useReducedMotion() ?? false
63 
64  const containerRef = useRef<HTMLDivElement>(null)
65  const isPageInView = usePageInView()
66  const isInView = useInView(containerRef, { margin: "100px" })
67 
68  const [step, setStep] = useState(0)
69  const shouldPlay = isPageInView && isInView
70 
71  useEffect(() => {
72    if (!shouldPlay) return
73 
74    const beatId = setInterval(
75      () => setStep((prev) => prev + 1),
76      CYCLE_INTERVAL
77    )
78 
79    return () => clearInterval(beatId)
80  }, [shouldPlay])
81 
82  return (
83    <div
84      ref={containerRef}
85      data-slot="logos-carousel"
86      className={cn("grid", className)}
87      style={{
88        gridTemplateColumns: `repeat(var(--column-count,${columns.length}), minmax(0, 1fr))`,
89      }}
90    >
91      {columns.map((columnLogos, columnIndex) => {
92        const waveIndex =
93          direction === "rtl" ? columns.length - 1 - columnIndex : columnIndex
94 
95// … truncated