fix: add conditional filter transition to BlurFade (#790 fix)

apps/www/public/llms-full.txt

@@ -3394,10 +3394,10 @@ import { useRef } from "react"
 import {
   AnimatePresence,
   motion,
-  MotionProps,
+  type MotionProps,
   useInView,
-  UseInViewOptions,
-  Variants,
+  type UseInViewOptions,
+  type Variants,
 } from "motion/react"
 
 type MarginType = UseInViewOptions["margin"]
@@ -3418,6 +3418,9 @@ interface BlurFadeProps extends MotionProps {
   blur?: string
 }
 
+const getFilter = (v: Variants[string]) =>
+  typeof v === "function" ? undefined : v.filter
+
 export function BlurFade({
   children,
   className,
@@ -3448,6 +3451,15 @@ export function BlurFade({
     },
   }
   const combinedVariants = variant || defaultVariants
+
+  const hiddenFilter = getFilter(combinedVariants.hidden)
+  const visibleFilter = getFilter(combinedVariants.visible)
+
+  const shouldTransitionFilter =
+    hiddenFilter != null &&
+    visibleFilter != null &&
+    hiddenFilter !== visibleFilter
+
   return (
     <AnimatePresence>
       <motion.div
@@ -3460,6 +3472,7 @@ export function BlurFade({
           delay: 0.04 + delay,
           duration,
           ease: "easeOut",
+          ...(shouldTransitionFilter ? { filter: { duration } } : {}),
         }}
         className={className}
         {...props}

apps/www/public/r/blur-fade.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/magicui/blur-fade.tsx",
-      "content": "\"use client\"\n\nimport { useRef } from \"react\"\nimport {\n  AnimatePresence,\n  motion,\n  MotionProps,\n  useInView,\n  UseInViewOptions,\n  Variants,\n} from \"motion/react\"\n\ntype MarginType = UseInViewOptions[\"margin\"]\n\ninterface BlurFadeProps extends MotionProps {\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 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  ...props\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        {...props}\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  type MotionProps,\n  useInView,\n  type UseInViewOptions,\n  type Variants,\n} from \"motion/react\"\n\ntype MarginType = UseInViewOptions[\"margin\"]\n\ninterface BlurFadeProps extends MotionProps {\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\nconst getFilter = (v: Variants[string]) =>\n  typeof v === \"function\" ? undefined : v.filter\n\nexport 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  ...props\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\n  const hiddenFilter = getFilter(combinedVariants.hidden)\n  const visibleFilter = getFilter(combinedVariants.visible)\n\n  const shouldTransitionFilter =\n    hiddenFilter != null &&\n    visibleFilter != null &&\n    hiddenFilter !== visibleFilter\n\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          ...(shouldTransitionFilter ? { filter: { duration } } : {}),\n        }}\n        className={className}\n        {...props}\n      >\n        {children}\n      </motion.div>\n    </AnimatePresence>\n  )\n}\n",
       "type": "registry:ui"
     }
   ]

apps/www/registry/magicui/blur-fade.tsx

@@ -4,10 +4,10 @@ import { useRef } from "react"
 import {
   AnimatePresence,
   motion,
-  MotionProps,
   useInView,
-  UseInViewOptions,
-  Variants,
+  type MotionProps,
+  type UseInViewOptions,
+  type Variants,
 } from "motion/react"
 
 type MarginType = UseInViewOptions["margin"]
@@ -28,6 +28,9 @@ interface BlurFadeProps extends MotionProps {
   blur?: string
 }
 
+const getFilter = (v: Variants[string]) =>
+  typeof v === "function" ? undefined : v.filter
+
 export function BlurFade({
   children,
   className,
@@ -58,6 +61,15 @@ export function BlurFade({
     },
   }
   const combinedVariants = variant || defaultVariants
+
+  const hiddenFilter = getFilter(combinedVariants.hidden)
+  const visibleFilter = getFilter(combinedVariants.visible)
+
+  const shouldTransitionFilter =
+    hiddenFilter != null &&
+    visibleFilter != null &&
+    hiddenFilter !== visibleFilter
+
   return (
     <AnimatePresence>
       <motion.div
@@ -70,6 +82,7 @@ export function BlurFade({
           delay: 0.04 + delay,
           duration,
           ease: "easeOut",
+          ...(shouldTransitionFilter ? { filter: { duration } } : {}),
         }}
         className={className}
         {...props}