feat: Maraquee animation

Author: Kars1996

.vscode/cspell.json

@@ -3,7 +3,7 @@
     "ignorePaths": [],
     "dictionaryDefinitions": [],
     "dictionaries": [],
-    "words": ["kars"],
+    "words": ["kars", "maraquee"],
     "ignoreWords": [],
     "import": []
 }

src/components/ui/maraquee.tsx

@@ -0,0 +1,62 @@
+import { cn } from "@/utils/cn";
+
+/*
+Copyright © 2024 Kars (github.com/kars1996)
+
+Not to be shared, replicated or used without prior consent.
+Contact Kars for any enquiries
+*/
+
+interface MarqueeProps {
+    className?: string;
+    reverse?: boolean;
+    pauseOnHover?: boolean;
+    children?: React.ReactNode;
+    vertical?: boolean;
+    repeat?: number;
+    [key: string]: any;
+}
+
+export default function Marquee({
+    className,
+    reverse,
+    pauseOnHover = true,
+    children,
+    vertical = false,
+    repeat = 4,
+    ...props
+}: MarqueeProps) {
+    return (
+        <div
+            {...props}
+            className={cn(
+                "group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
+                {
+                    "flex-row": !vertical,
+                    "flex-col": vertical,
+                },
+                className,
+            )}
+        >
+            {Array(repeat)
+                .fill(0)
+                .map((_, i) => (
+                    <div
+                        key={i}
+                        className={cn(
+                            "flex shrink-0 justify-around [gap:var(--gap)]",
+                            {
+                                "animate-marquee flex-row": !vertical,
+                                "animate-marquee-vertical flex-col": vertical,
+                                "group-hover:[animation-play-state:paused]":
+                                    pauseOnHover,
+                                "[animation-direction:reverse]": reverse,
+                            },
+                        )}
+                    >
+                        {children}
+                    </div>
+                ))}
+        </div>
+    );
+}

tailwind.config.ts

@@ -30,17 +30,18 @@ const config: Config = {
                 },
             },
             animation: {
-                marquee: "marquee 25s linear infinite",
-                marquee2: "marquee2 25s linear infinite",
+                marquee: "marquee var(--duration) linear infinite",
+                "marquee-vertical":
+                    "marquee-vertical var(--duration) linear infinite",
             },
             keyframes: {
                 marquee: {
-                    "0%": { transform: "translateX(0%)" },
-                    "100%": { transform: "translateX(-100%)" },
+                    from: { transform: "translateX(0)" },
+                    to: { transform: "translateX(calc(-100% - var(--gap)))" },
                 },
-                marquee2: {
-                    "0%": { transform: "translateX(100%)" },
-                    "100%": { transform: "translateX(0%)" },
+                "marquee-vertical": {
+                    from: { transform: "translateY(0)" },
+                    to: { transform: "translateY(calc(-100% - var(--gap)))" },
                 },
             },
         },