Simple Carousel

1import { RefObject, useRef } from "react"
2import {
3  motion,
4  SpringOptions,
5  useAnimationFrame,
6  useMotionValue,
7  useScroll,
8  useSpring,
9  useTransform,
10  useVelocity,
11} from "motion/react"
12 
13import { cn } from "@/lib/utils"
14 
15// Custom wrap function
16const wrap = (min: number, max: number, value: number): number => {
17  const range = max - min
18  return ((((value - min) % range) + range) % range) + min
19}
20 
21interface SimpleMarqueeProps {
22  children: React.ReactNode // The elements to be scrolled
23  className?: string // Additional CSS classes for the container
24  direction?: "left" | "right" | "up" | "down" // The direction of the marquee
25  baseVelocity?: number // The base velocity of the marquee in pixels per second
26  easing?: (value: number) => number // The easing function for the animation
27  slowdownOnHover?: boolean // Whether to slow down the animation on hover
28  slowDownFactor?: number // The factor to slow down the animation on hover
29  slowDownSpringConfig?: SpringOptions // The spring config for the slow down animation
30  useScrollVelocity?: boolean // Whether to use the scroll velocity to control the marquee speed
31  scrollAwareDirection?: boolean // Whether to adjust the direction based on the scroll direction
32  scrollSpringConfig?: SpringOptions // The spring config for the scroll velocity-based direction adjustment
33  scrollContainer?: RefObject<HTMLElement | null> | HTMLElement | null // The container to use for the scroll velocity
34  repeat?: number // The number of times to repeat the children.
35  draggable?: boolean // Whether to allow dragging of the marquee
36  dragSensitivity?: number // The sensitivity of the drag movement
37  dragVelocityDecay?: number // The decay of the drag velocity. This means how fast the velocity will gradually reduce to baseVelocity when we release the drag
38  dragAwareDirection?: boolean // Whether to adjust the direction based on the drag velocity
39  dragAngle?: number // The angle of the drag movement in degrees. This is useful if you eg. rotating your marquee by 45 degrees
40  grabCursor?: boolean // Whether to change the cursor to grabbing when dragging
41}
42 
43const SimpleMarquee = ({
44  children,
45  className,
46  direction = "right",
47  baseVelocity = 5,
48  slowdownOnHover = false,
49  slowDownFactor = 0.3,
50  slowDownSpringConfig = { damping: 50, stiffness: 400 },
51  useScrollVelocity = false,
52  scrollAwareDirection = false,
53  scrollSpringConfig = { damping: 50, stiffness: 400 },
54  scrollContainer,
55  repeat = 3,
56// … truncated