feat: added framer-motion and defined BlurFade effect

Author: steadyfall

package-lock.json

@@ -10,8 +10,10 @@
     "buildgh": "next build && next export"
   },
   "dependencies": {
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "devicons-react": "^1.3.0",
+    "framer-motion": "^11.11.8",
     "lucide-react": "^0.445.0",
     "next": "^14.2.15",
     "next-themes": "^0.3.0",

package.json

@@ -0,0 +1,65 @@
+"use client";
+
+import { AnimatePresence, motion, useInView, Variants } from "framer-motion";
+import { useRef } from "react";
+
+type MarginValue = `${number}${'px' | '%'}`;
+type MarginType = MarginValue | `${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}`;
+
+interface BlurFadeProps {
+  children: React.ReactNode;
+  className?: string;
+  variant?: {
+    hidden: { y: number };
+    visible: { y: number };
+  };
+  duration?: number;
+  delay?: number;
+  yOffset?: number;
+  inView?: boolean;
+  inViewMargin?: MarginType;
+  blur?: string;
+}
+const BlurFade = ({
+  children,
+  className,
+  variant,
+  duration = 0.4,
+  delay = 0,
+  yOffset = 6,
+  inView = false,
+  inViewMargin = "-50px",
+  blur = "6px",
+}: BlurFadeProps) => {
+  const ref = useRef(null);
+  const inViewResult = useInView(ref, { once: true, margin: inViewMargin });
+  const isInView = !inView || inViewResult;
+  const defaultVariants: Variants = {
+    hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },
+    visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },
+  };
+  const combinedVariants = variant || defaultVariants;
+  return (
+    <AnimatePresence>
+      <motion.div
+        ref={ref}
+        initial="hidden"
+        animate={isInView ? "visible" : "hidden"}
+        exit="hidden"
+        variants={combinedVariants}
+        transition={{
+          delay: 0.04 + delay,
+          duration,
+          ease: "easeOut",
+        }}
+        className={className}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export const BLUR_FADE_DELAY = 0.04;
+
+export default BlurFade;