marquee

1---
2import { cva } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5 
6type Props = {
7  direction?: "left" | "right" | "top" | "bottom"
8  duration?: number | string
9  gap?: string
10  infinite?: boolean
11  pauseOnHover?: boolean
12  time?: number | string
13  variant?: "gradient" | "solid"
14  class?: string
15  style?: string
16}
17 
18const {
19  class: className = "",
20  direction = "left",
21  duration,
22  gap = "1rem",
23  infinite = true,
24  pauseOnHover = false,
25  style,
26  time = 30,
27  variant = "gradient",
28  ...props
29} = Astro.props
30 
31const resolvedDuration = duration ?? time
32const styleValue = `--duration:${
33  typeof resolvedDuration === "number"
34    ? `${resolvedDuration}s`
35    : resolvedDuration
36}; --gap:${gap}; ${style ?? ""}`
37const contentClass = cn(
38  "marquee-content flex min-w-full shrink-0 justify-around gap-[var(--gap)] will-change-transform group-data-[direction=bottom]:[animation-direction:reverse] group-data-[direction=right]:[animation-direction:reverse] data-[direction=bottom]:min-h-full data-[direction=bottom]:flex-col data-[direction=top]:min-h-full data-[direction=top]:flex-col motion-reduce:[animation-play-state:paused]",
39  infinite &&
40    "animate-[marquee-x_var(--duration,20s)_linear_infinite] group-data-[direction=bottom]:animate-[marquee-y_var(--duration,20s)_linear_infinite] group-data-[direction=top]:animate-[marquee-y_var(--duration,20s)_linear_infinite]",
41  direction === "top" && "flex-col",
42  direction === "bottom" && "flex-col"
43)
44 
45const marqueeVariants = cva("relative w-full", {
46  variants: {
47    variant: {
48      gradient:
49        "[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [-webkit-mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [&[data-direction=bottom]]:[mask-image:linear-gradient(to_top,transparent,black_10%,black_90%,transparent)] [&[data-direction=bottom]]:[-webkit-mask-image:linear-gradient(to_top,transparent,black_10%,black_90%,transparent)] [&[data-direction=top]]:[mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)] [&[data-direction=top]]:[-webkit-mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)]",
50      solid: "",
51    },
52  },
53  defaultVariants: {
54    variant: "gradient",
55  },
56})
57---
58 
59<div
60  data-marquee
61  data-direction={direction}
62  data-pause-on-hover={pauseOnHover ? "true" : undefined}
63  class={cn(
64    "",
65    // container utilities
66// … truncated