feat(icons): refactor IconSearch with smoother animation

web/src/app/icons/components/icon-search.tsx

@@ -11,6 +11,7 @@ import Link from "next/link"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { useTheme } from "next-themes"
+import { useInView } from "framer-motion"
 
 export function IconSearch({ icons }: IconSearchProps) {
 	const searchParams = useSearchParams()
@@ -133,15 +134,50 @@ export function IconSearch({ icons }: IconSearchProps) {
 			) : (
 				<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4 mt-8">
 					{filteredIcons.map(({ name, data }, index) => (
+						<IconCard key={name} name={name} data={data} getIconVariant={getIconVariant} />
+					))}
+				</div>
+			)}
+		</>
+	)
+}
+
+function IconCard({ name, data, getIconVariant }: {
+	name: string;
+	data: any;
+	getIconVariant: (name: string, data: any) => string;
+}) {
+	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
-							key={name}
+			ref={ref}
-							initial={{ opacity: 0, y: 15 }}
+			initial="hidden"
-							animate={{ opacity: 1, y: 0 }}
+			animate={isInView ? "visible" : "hidden"}
-							transition={{
+			exit="exit"
-								duration: 0.5,
+			variants={variants}
-								delay: index * 0.03,
+			className="will-change-transform"
-								ease: "easeOut",
-							}}
 		>
 			<Link
 				prefetch={false}
@@ -163,9 +199,5 @@ export function IconSearch({ icons }: IconSearchProps) {
 				</span>
 			</Link>
 		</motion.div>
-					))}
+	);
-				</div>
-			)}
-		</>
-	)
 }