Add marquee component for RecentlyAddedIcons

web/src/app/globals.css

@@ -1,7 +1,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-
 @plugin "tailwindcss-motion";
+
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
@@ -62,7 +62,20 @@
 			height: 0;
 		}
 	}
-}
+
+	--animate-marquee: marquee var(--duration) infinite linear;
+	--animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
+
+  @keyframes marquee {
+  from {
+    transform: translateX(0);}
+  to {
+    transform: translateX(calc(-100% - var(--gap)));}}
+  @keyframes marquee-vertical {
+  from {
+    transform: translateY(0);}
+  to {
+    transform: translateY(calc(-100% - var(--gap)));}}}
 
 :root {
 	--radius: 0.75rem;
@@ -158,4 +171,4 @@
 	.glass-effect {
 		@apply backdrop-blur-sm;
 	}
-}
+}

web/src/components/magicui/marquee.tsx

@@ -0,0 +1,73 @@
+import { cn } from "@/lib/utils";
+import { ComponentPropsWithoutRef } from "react";
+
+interface MarqueeProps extends ComponentPropsWithoutRef<"div"> {
+  /**
+   * Optional CSS class name to apply custom styles
+   */
+  className?: string;
+  /**
+   * Whether to reverse the animation direction
+   * @default false
+   */
+  reverse?: boolean;
+  /**
+   * Whether to pause the animation on hover
+   * @default false
+   */
+  pauseOnHover?: boolean;
+  /**
+   * Content to be displayed in the marquee
+   */
+  children: React.ReactNode;
+  /**
+   * Whether to animate vertically instead of horizontally
+   * @default false
+   */
+  vertical?: boolean;
+  /**
+   * Number of times to repeat the content
+   * @default 4
+   */
+  repeat?: number;
+}
+
+export function Marquee({
+  className,
+  reverse = false,
+  pauseOnHover = false,
+  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>
+  );
+}

web/src/components/recently-added-icons.tsx

@@ -1,13 +1,14 @@
 "use client";
 
+import { Marquee } from "@/components/magicui/marquee";
 import { BASE_URL } from "@/constants";
+import { cn } from "@/lib/utils";
 import type { Icon, IconWithName } from "@/types/icons";
 import { format, isToday, isYesterday } from "date-fns";
-import { motion, useInView } from "framer-motion";
+import { motion } from "framer-motion";
 import { ArrowRight, Clock, ExternalLink } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
-import { useRef } from "react";
 
 function formatIconDate(timestamp: string): string {
 	const date = new Date(timestamp);
@@ -21,21 +22,17 @@ function formatIconDate(timestamp: string): string {
 }
 
 export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
+	// Split icons into two rows for the marquee
+	const firstRow = icons.slice(0, Math.ceil(icons.length / 2));
+	const secondRow = icons.slice(Math.ceil(icons.length / 2));
+
 	return (
 		<div className="relative isolate overflow-hidden py-16 md:py-24">
 			{/* Background glow */}
 			<div
 				className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
 				aria-hidden="true"
-			>
+			></div>
-				<div
-					className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-rose-400/40 to-red-300/40 dark:from-red-600/50 dark:to-red-900/50 opacity-60 dark:opacity-50 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
-					style={{
-						clipPath:
-							"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
-					}}
-				/>
-			</div>
 
 			<div className="mx-auto max-w-7xl px-6 lg:px-8">
 				<motion.div
@@ -53,10 +50,23 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
 					</p>
 				</motion.div>
 
-				<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-8 gap-4 md:gap-5">
+				<div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
-					{icons.map(({ name, data }) => (
+					<Marquee pauseOnHover className="[--duration:30s] [--gap:2rem]">
-						<RecentIconCard key={name} name={name} data={data} />
+						{firstRow.map(({ name, data }) => (
-					))}
+							<RecentIconCard key={name} name={name} data={data} />
+						))}
+					</Marquee>
+					<Marquee
+						reverse
+						pauseOnHover
+						className="[--duration:30s] [--gap:2rem] mt-6"
+					>
+						{secondRow.map(({ name, data }) => (
+							<RecentIconCard key={name} name={name} data={data} />
+						))}
+					</Marquee>
+					<div className="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-background" />
+					<div className="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l from-background" />
 				</div>
 
 				<motion.div
@@ -79,7 +89,7 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
 	);
 }
 
-// Extracted component for better animation handling
+// Marquee-compatible icon card
 function RecentIconCard({
 	name,
 	data,
@@ -87,67 +97,40 @@ function RecentIconCard({
 	name: string;
 	data: Icon;
 }) {
-	const ref = useRef(null);
-	const isInView = useInView(ref, {
-		once: false,
-		amount: 0.2,
-		margin: "100px 0px",
-	});
-
-	const variants = {
-		hidden: { opacity: 0, y: 20, scale: 0.95 },
-		visible: {
-			opacity: 1,
-			y: 0,
-			scale: 1,
-			transition: { duration: 0.4, ease: [0.25, 0.1, 0.25, 1.0] },
-		},
-		exit: {
-			opacity: 0,
-			y: -10,
-			scale: 0.98,
-			transition: { duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0] },
-		},
-	};
-
 	return (
-		<motion.div
+		<Link
-			ref={ref}
+			prefetch={false}
-			initial="hidden"
+			href={`/icons/${name}`}
-			animate={isInView ? "visible" : "hidden"}
+			className={cn(
-			exit="exit"
+				"group flex flex-col items-center p-3 sm:p-4 rounded-xl border border-border bg-background/95 dark:bg-background/80",
-			variants={variants}
+				"hover:border-rose-500 hover:bg-rose-500/10 dark:hover:bg-rose-900/30 dark:hover:border-rose-500",
-			className="will-change-transform"
+				"transition-all duration-300 hover:shadow-lg hover:shadow-rose-500/5 relative overflow-hidden hover-lift",
+				"w-36 mx-2",
+			)}
 		>
-			<Link
+			<div className="absolute inset-0 bg-gradient-to-br from-rose-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-				prefetch={false}
-				href={`/icons/${name}`}
-				className="group flex flex-col items-center p-3 sm:p-4 rounded-xl border border-border bg-background/95 dark:bg-background/80 hover:border-rose-500 hover:bg-rose-500/10 dark:hover:bg-rose-900/30 dark:hover:border-rose-500 transition-all duration-300 hover:shadow-lg hover:shadow-rose-500/5 relative overflow-hidden hover-lift"
-			>
-				<div className="absolute inset-0 bg-gradient-to-br from-rose-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
 
-				<div className="relative h-12 w-12 sm:h-16 sm:w-16 mb-2">
+			<div className="relative h-12 w-12 sm:h-16 sm:w-16 mb-2">
-					<Image
+				<Image
-						src={`${BASE_URL}/${data.base}/${name}.${data.base}`}
+					src={`${BASE_URL}/${data.base}/${name}.${data.base}`}
-						alt={`${name} icon`}
+					alt={`${name} icon`}
-						fill
+					fill
-						className="object-contain p-1 group-hover:scale-110 transition-transform duration-300"
+					className="object-contain p-1 group-hover:scale-110 transition-transform duration-300"
-					/>
+				/>
-				</div>
+			</div>
-				<span className="text-xs sm:text-sm text-center truncate w-full capitalize group-hover:text-rose-600 dark:group-hover:text-rose-400 transition-colors duration-200 font-medium">
+			<span className="text-xs sm:text-sm text-center truncate w-full capitalize group-hover:text-rose-600 dark:group-hover:text-rose-400 transition-colors duration-200 font-medium">
-					{name.replace(/-/g, " ")}
+				{name.replace(/-/g, " ")}
+			</span>
+			<div className="flex items-center justify-center mt-2 w-full">
+				<span className="text-[10px] sm:text-xs text-muted-foreground flex items-center whitespace-nowrap group-hover:text-rose-500/70 transition-colors duration-200">
+					<Clock className="w-3 h-3 mr-1.5 shrink-0" />
+					{formatIconDate(data.update.timestamp)}
 				</span>
-				<div className="flex items-center justify-center mt-2 w-full">
+			</div>
-					<span className="text-[10px] sm:text-xs text-muted-foreground flex items-center whitespace-nowrap group-hover:text-rose-500/70 transition-colors duration-200">
-						<Clock className="w-3 h-3 mr-1.5 shrink-0" />
-						{formatIconDate(data.update.timestamp)}
-					</span>
-				</div>
 
-				<div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+			<div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-					<ExternalLink className="w-3 h-3 text-rose-500" />
+				<ExternalLink className="w-3 h-3 text-rose-500" />
-				</div>
+			</div>
-			</Link>
+		</Link>
-		</motion.div>
 	);
 }