Marquee

1"use client";
2import { cn } from "@/lib/utils";
3import { useMotionValue, animate, motion } from "motion/react";
4import { useState, useEffect, useRef } from "react";
5 
6export type MarqueeProps = {
7  children: React.ReactNode;
8  gap?: number;
9  speed?: number;
10  speedOnHover?: number;
11  direction?: "horizontal" | "vertical";
12  reverse?: boolean;
13  className?: string;
14  fadeEdges?: boolean;
15  fadeWidth?: number;
16  pauseOnTap?: boolean;
17  draggable?: boolean;
18};
19 
20export function Marquee({
21  children,
22  gap = 16,
23  speed = 100,
24  speedOnHover,
25  direction = "horizontal",
26  reverse = false,
27  className,
28  fadeEdges = false,
29  fadeWidth = 64,
30  pauseOnTap = true,
31  draggable = true,
32}: MarqueeProps) {
33  const [currentSpeed, setCurrentSpeed] = useState(speed);
34  const [isPaused, setIsPaused] = useState(false);
35  const [isDragging, setIsDragging] = useState(false);
36  const containerRef = useRef<HTMLDivElement>(null);
37  const translation = useMotionValue(0);
38  const [isTransitioning, setIsTransitioning] = useState(false);
39  const [key, setKey] = useState(0);
40  const dragStartPosition = useRef(0);
41  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
42 
43  useEffect(() => {
44    if (!containerRef.current) return;
45 
46    const currentRef = containerRef.current;
47 
48    const updateDimensions = () => {
49      if (currentRef) {
50        const rect = currentRef.getBoundingClientRect();
51        setDimensions({
52          width: rect.width,
53          height: rect.height,
54        });
55      }
56    };
57 
58    updateDimensions();
59 
60    const resizeObserver = new ResizeObserver(updateDimensions);
61    resizeObserver.observe(currentRef);
62 
63    return () => {
64      resizeObserver.unobserve(currentRef);
65      resizeObserver.disconnect();
66    };
67  }, []);
68 
69  const { width, height } = dimensions;
70 
71  useEffect(() => {
72    let controls;
73 
74    if (isPaused || isDragging || (!width && !height)) {
75      return () => {};
76    }
77 
78    const size = direction === "horizontal" ? width : height;
79    const contentSize = size + gap;
80 
81    if (!size) return () => {};
82 
83    const from = reverse ? -contentSize / 2 : 0;
84    const to = reverse ? 0 : -contentSize / 2;
85    const distanceToTravel = Math.abs(to - from);
86    const duration = distanceToTravel / currentSpeed;
87 
88    if (isTransitioning) {
89      const remainingDistance = Math.abs(translation.get() - to);
90      const transitionDuration = remainingDistance / currentSpeed;
91 
92      controls = animate(translation, [translation.get(), to], {
93// … truncated