infinite-slider

1"use client";
2import { cn } from "@/lib/utils";
3import { animate, motion, useMotionValue } from "motion/react";
4import { useEffect, useState } from "react";
5import useMeasure from "react-use-measure";
6 
7export type InfiniteSliderProps = {
8	children: React.ReactNode;
9	gap?: number;
10	speed?: number;
11	speedOnHover?: number;
12	direction?: "horizontal" | "vertical";
13	reverse?: boolean;
14	className?: string;
15};
16 
17export function InfiniteSlider({
18	children,
19	gap = 16,
20	speed = 100,
21	speedOnHover,
22	direction = "horizontal",
23	reverse = false,
24	className,
25}: InfiniteSliderProps) {
26	const [currentSpeed, setCurrentSpeed] = useState(speed);
27	const [ref, { width, height }] = useMeasure();
28	const translation = useMotionValue(0);
29	const [isTransitioning, setIsTransitioning] = useState(false);
30 
31	useEffect(() => {
32		let controls: ReturnType<typeof animate> | undefined;
33		const size = direction === "horizontal" ? width : height;
34		const contentSize = size + gap;
35		const from = reverse ? -contentSize / 2 : 0;
36		const to = reverse ? 0 : -contentSize / 2;
37 
38		const distanceToTravel = Math.abs(to - from);
39		const duration = distanceToTravel / currentSpeed;
40 
41		if (isTransitioning) {
42			const remainingDistance = Math.abs(translation.get() - to);
43			const transitionDuration = remainingDistance / currentSpeed;
44 
45			controls = animate(translation, [translation.get(), to], {
46				ease: "linear",
47				duration: transitionDuration,
48				onComplete: () => {
49					setIsTransitioning(false);
50				},
51			});
52		} else {
53			controls = animate(translation, [from, to], {
54				ease: "linear",
55				duration,
56				repeat: Number.POSITIVE_INFINITY,
57				repeatType: "loop",
58				repeatDelay: 0,
59				onRepeat: () => {
60					translation.set(from);
61				},
62			});
63		}
64 
65		return controls?.stop;
66	}, [
67		translation,
68		currentSpeed,
69		width,
70		height,
71		gap,
72		isTransitioning,
73		direction,
74		reverse,
75	]);
76 
77	const hoverProps = speedOnHover
78		? {
79				onHoverStart: () => {
80					setIsTransitioning(true);
81					setCurrentSpeed(speedOnHover);
82				},
83				onHoverEnd: () => {
84					setIsTransitioning(true);
85					setCurrentSpeed(speed);
86				},
87			}
88		: {};
89 
90	return (
91		<div className={cn("overflow-hidden", className)}>
92			<motion.div
93				className="flex w-max"
94				ref={ref}
95				style={{
96					...(direction === "horizontal"
97						? { x: translation }
98						: { y: translation }),
99					gap: `${gap}px`,
100					flexDirection: direction === "horizontal" ? "row" : "column",
101				}}
102				{...hoverProps}
103			>
104				{children}
105				{children}
106// … truncated