marquee

1"use client"
2 
3import type React from "react"
4import { useRef, type RefObject } from "react"
5import {
6  motion,
7  useAnimationFrame,
8  useMotionValue,
9  useScroll,
10  useSpring,
11  useTransform,
12  useVelocity,
13  type SpringOptions,
14} from "motion/react"
15 
16import { cn } from "@/lib/utils"
17 
18// Custom wrap function for seamless looping
19const wrap = (min: number, max: number, value: number): number => {
20  const range = max - min
21  return ((((value - min) % range) + range) % range) + min
22}
23 
24export interface MarqueeProps {
25  children: React.ReactNode
26  className?: string
27  /**
28   * Direction of the marquee animation
29   * @default "right"
30   */
31  direction?: "left" | "right" | "up" | "down"
32  /**
33   * Speed preset for the marquee animation
34   * @default "default"
35   */
36  speedPreset?: "slow" | "default" | "fast"
37  /**
38   * Speed of the marquee animation (lower is slower, higher is faster)
39   * @default 10
40   */
41  speed?: number
42  /**
43   * Whether to pause animation on hover
44   * @default false
45   */
46  pauseOnHover?: boolean
47  /**
48   * Whether to slow down the animation on hover
49   * @default false
50   */
51  slowdownOnHover?: boolean
52  /**
53   * The factor to slow down the animation on hover
54   * @default 0.3
55   */
56  slowDownFactor?: number
57  /**
58   * The spring config for the slow down animation
59   */
60  slowDownSpringConfig?: SpringOptions
61  /**
62   * Whether to show fade effect on edges
63   * @default false
64   */
65  showFade?: boolean
66  /**
67   * Fade intensity (0-100)
68   * @default 12.5
69   */
70  fadeIntensity?: number
71  /**
72   * Number of times to repeat the children
73   * @default 3
74   */
75  repeat?: number
76  /**
77   * Whether to use the scroll velocity to control the marquee speed
78   * @default false
79   */
80  useScrollVelocity?: boolean
81  /**
82   * Whether to adjust the direction based on the scroll direction
83   * @default false
84   */
85  scrollAwareDirection?: boolean
86  /**
87   * The spring config for the scroll velocity-based direction adjustment
88   */
89  scrollSpringConfig?: SpringOptions
90  /**
91   * The container to use for the scroll velocity
92   */
93  scrollContainer?: RefObject<HTMLElement | null> | HTMLElement | null
94  /**
95   * Whether to allow dragging of the marquee
96   * @default false
97   */
98  draggable?: boolean
99  /**
100   * The sensitivity of the drag movement
101   * @default 0.2
102   */
103  dragSensitivity?: number
104  /**
105   * The decay of the drag velocity
106   * @default 0.96
107   */
108  dragVelocityDecay?: number
109  /**
110// … truncated