Marquee

"use client";

// An endless row (or column) of anything: logos, quotes, tags. The content is
// repeated just enough times to cover the frame, then the whole track slides
// one copy's length and wraps, so the loop never shows a seam. Hovering can
// ease it slower or to a stop (never a dead halt), it can be dragged and
// flicked, and it rests while off screen or while focus is inside it.

import {
  motion,
  useAnimationFrame,
  useMotionValue,
  useReducedMotion,
  useTransform,
} from "motion/react";
import { useEffect, useRef, type PointerEvent, type ReactNode } from "react";
import useMeasure from "react-use-measure";
import { cn } from "@/lib/utils";

export type MarqueeProps = {
  children: ReactNode;
  /** Which way the content travels. Up and down need a frame with a height. */
  direction?: "left" | "right" | "up" | "down";
  /** Pixels per second. */