feat: adding 4 direction in blur fade (#455)

content/docs/components/blur-fade.mdx

@@ -46,14 +46,15 @@ npx shadcn@latest add "https://magicui.design/r/blur-fade"
 
 ## Props
 
-| Prop         | Type            | Description                                            | Default |
-| ------------ | --------------- | ------------------------------------------------------ | ------- |
-| children     | React.ReactNode | The content to be animated                             |         |
-| className    | string          | The class name to be applied to the component          |         |
-| variant      | object          | Custom animation variants for motion component         |         |
-| duration     | number          | Duration (seconds) for the animation                   | 0.4     |
-| delay        | number          | Delay (seconds) before the animation starts            | 0       |
-| yOffset      | number          | Vertical offset for the animation                      | 6       |
-| inView       | boolean         | Whether to trigger animation when component is in view | false   |
-| inViewMargin | MarginType      | Margin for triggering the in-view animation            | "-50px" |
-| blur         | string          | Amount of blur to apply during the animation           | "6px"   |
+| Prop         | Type            | Description                                                 | Default |
+| ------------ | --------------- | ----------------------------------------------------------- | ------- |
+| children     | React.ReactNode | The content to be animated                                  |         |
+| className    | string          | The class name to be applied to the component               |         |
+| variant      | object          | Custom animation variants for motion component              |         |
+| duration     | number          | Duration (seconds) for the animation                        | 0.4     |
+| delay        | number          | Delay (seconds) before the animation starts                 | 0       |
+| offset       | number          | Offset for the animation                                    | 6       |
+| direction    | string          | Direction for the animation (`up`, `down`, `left`, `right`) | "down"  |
+| inView       | boolean         | Whether to trigger animation when component is in view      | false   |
+| inViewMargin | MarginType      | Margin for triggering the in-view animation                 | "-50px" |
+| blur         | string          | Amount of blur to apply during the animation                | "6px"   |

public/r/styles/default/blur-fade.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "magicui/blur-fade.tsx",
-      "content": "\"use client\";\n\nimport { useRef } from \"react\";\nimport {\n  AnimatePresence,\n  motion,\n  useInView,\n  UseInViewOptions,\n  Variants,\n} from \"framer-motion\";\n\ntype MarginType = UseInViewOptions[\"margin\"];\n\ninterface BlurFadeProps {\n  children: React.ReactNode;\n  className?: string;\n  variant?: {\n    hidden: { y: number };\n    visible: { y: number };\n  };\n  duration?: number;\n  delay?: number;\n  yOffset?: number;\n  inView?: boolean;\n  inViewMargin?: MarginType;\n  blur?: string;\n}\n\nexport default function BlurFade({\n  children,\n  className,\n  variant,\n  duration = 0.4,\n  delay = 0,\n  yOffset = 6,\n  inView = false,\n  inViewMargin = \"-50px\",\n  blur = \"6px\",\n}: BlurFadeProps) {\n  const ref = useRef(null);\n  const inViewResult = useInView(ref, { once: true, margin: inViewMargin });\n  const isInView = !inView || inViewResult;\n  const defaultVariants: Variants = {\n    hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },\n    visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },\n  };\n  const combinedVariants = variant || defaultVariants;\n  return (\n    <AnimatePresence>\n      <motion.div\n        ref={ref}\n        initial=\"hidden\"\n        animate={isInView ? \"visible\" : \"hidden\"}\n        exit=\"hidden\"\n        variants={combinedVariants}\n        transition={{\n          delay: 0.04 + delay,\n          duration,\n          ease: \"easeOut\",\n        }}\n        className={className}\n      >\n        {children}\n      </motion.div>\n    </AnimatePresence>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { useRef } from \"react\";\nimport {\n  AnimatePresence,\n  motion,\n  useInView,\n  UseInViewOptions,\n  Variants,\n} from \"framer-motion\";\n\ntype MarginType = UseInViewOptions[\"margin\"];\n\ninterface BlurFadeProps {\n  children: React.ReactNode;\n  className?: string;\n  variant?: {\n    hidden: { y: number };\n    visible: { y: number };\n  };\n  duration?: number;\n  delay?: number;\n  offset?: number;\n  direction?: \"up\" | \"down\" | \"left\" | \"right\";\n  inView?: boolean;\n  inViewMargin?: MarginType;\n  blur?: string;\n}\n\nexport default function BlurFade({\n  children,\n  className,\n  variant,\n  duration = 0.4,\n  delay = 0,\n  offset = 6,\n  direction = \"down\",\n  inView = false,\n  inViewMargin = \"-50px\",\n  blur = \"6px\",\n}: BlurFadeProps) {\n  const ref = useRef(null);\n  const inViewResult = useInView(ref, { once: true, margin: inViewMargin });\n  const isInView = !inView || inViewResult;\n  const defaultVariants: Variants = {\n    hidden: {\n      [direction === \"left\" || direction === \"right\" ? \"x\" : \"y\"]:\n        direction === \"right\" || direction === \"down\" ? -offset : offset,\n      opacity: 0,\n      filter: `blur(${blur})`,\n    },\n    visible: {\n      [direction === \"left\" || direction === \"right\" ? \"x\" : \"y\"]: 0,\n      opacity: 1,\n      filter: `blur(0px)`,\n    },\n  };\n  const combinedVariants = variant || defaultVariants;\n  return (\n    <AnimatePresence>\n      <motion.div\n        ref={ref}\n        initial=\"hidden\"\n        animate={isInView ? \"visible\" : \"hidden\"}\n        exit=\"hidden\"\n        variants={combinedVariants}\n        transition={{\n          delay: 0.04 + delay,\n          duration,\n          ease: \"easeOut\",\n        }}\n        className={className}\n      >\n        {children}\n      </motion.div>\n    </AnimatePresence>\n  );\n}\n",
       "type": "registry:ui",
       "target": ""
     }

registry/default/example/blur-fade-demo.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import BlurFade from "@/registry/default/magicui/blur-fade";
 
 const images = Array.from({ length: 9 }, (_, i) => {

registry/default/example/blur-fade-text-demo.tsx

@@ -9,7 +9,7 @@ export default function BlurFadeTextDemo() {
         </h2>
       </BlurFade>
       <BlurFade delay={0.25 * 2} inView>
-        <span className="text-xl text-pretty tracking-tighter sm:text-3xl xl:text-4xl/none">
+        <span className="text-pretty text-xl tracking-tighter sm:text-3xl xl:text-4xl/none">
           Nice to meet you
         </span>
       </BlurFade>

registry/default/magicui/blur-fade.tsx

@@ -20,7 +20,8 @@ interface BlurFadeProps {
   };
   duration?: number;
   delay?: number;
-  yOffset?: number;
+  offset?: number;
+  direction?: "up" | "down" | "left" | "right";
   inView?: boolean;
   inViewMargin?: MarginType;
   blur?: string;
@@ -32,7 +33,8 @@ export default function BlurFade({
   variant,
   duration = 0.4,
   delay = 0,
-  yOffset = 6,
+  offset = 6,
+  direction = "down",
   inView = false,
   inViewMargin = "-50px",
   blur = "6px",
@@ -41,8 +43,17 @@ export default function BlurFade({
   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)` },
+    hidden: {
+      [direction === "left" || direction === "right" ? "x" : "y"]:
+        direction === "right" || direction === "down" ? -offset : offset,
+      opacity: 0,
+      filter: `blur(${blur})`,
+    },
+    visible: {
+      [direction === "left" || direction === "right" ? "x" : "y"]: 0,
+      opacity: 1,
+      filter: `blur(0px)`,
+    },
   };
   const combinedVariants = variant || defaultVariants;
   return (