From 94d585abb7c82ed75db356e81b0d53054c6d02db Mon Sep 17 00:00:00 2001 From: Fefedu973 <80718477+Fefedu973@users.noreply.github.com> Date: Sun, 1 Mar 2026 11:16:11 +0100 Subject: [PATCH 1/3] fix: add conditional filter transition to BlurFade (#790 fix) --- apps/www/public/llms-full.txt | 24 ++++++++++++++++++++++++ apps/www/public/r/blur-fade.json | 2 +- apps/www/registry/magicui/blur-fade.tsx | 24 ++++++++++++++++++++++++ 3 files changed, 49 insertions(+), 1 deletion(-) diff --git a/apps/www/public/llms-full.txt b/apps/www/public/llms-full.txt index 6e2d9975a..c625c3271 100644 --- a/apps/www/public/llms-full.txt +++ b/apps/www/public/llms-full.txt @@ -3448,6 +3448,29 @@ export function BlurFade({ }, } const combinedVariants = variant || defaultVariants + + const hiddenVariant = combinedVariants.hidden + const visibleVariant = combinedVariants.visible + + const hiddenFilter = + typeof hiddenVariant === "object" && + hiddenVariant !== null && + "filter" in hiddenVariant + ? hiddenVariant.filter + : undefined + + const visibleFilter = + typeof visibleVariant === "object" && + visibleVariant !== null && + "filter" in visibleVariant + ? visibleVariant.filter + : undefined + + const shouldTransitionFilter = + hiddenFilter !== undefined && + visibleFilter !== undefined && + hiddenFilter !== visibleFilter + return ( \n \n {children}\n \n \n )\n}\n", + "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\n const hiddenVariant = combinedVariants.hidden\n const visibleVariant = combinedVariants.visible\n\n const hiddenFilter =\n typeof hiddenVariant === \"object\" &&\n hiddenVariant !== null &&\n \"filter\" in hiddenVariant\n ? hiddenVariant.filter\n : undefined\n\n const visibleFilter =\n typeof visibleVariant === \"object\" &&\n visibleVariant !== null &&\n \"filter\" in visibleVariant\n ? visibleVariant.filter\n : undefined\n\n const shouldTransitionFilter =\n hiddenFilter !== undefined &&\n visibleFilter !== undefined &&\n hiddenFilter !== visibleFilter\n\n return (\n \n \n {children}\n \n \n )\n}\n", "type": "registry:ui" } ] diff --git a/apps/www/registry/magicui/blur-fade.tsx b/apps/www/registry/magicui/blur-fade.tsx index 6609f5af9..bbe6f39b2 100644 --- a/apps/www/registry/magicui/blur-fade.tsx +++ b/apps/www/registry/magicui/blur-fade.tsx @@ -58,6 +58,29 @@ export function BlurFade({ }, } const combinedVariants = variant || defaultVariants + + const hiddenVariant = combinedVariants.hidden + const visibleVariant = combinedVariants.visible + + const hiddenFilter = + typeof hiddenVariant === "object" && + hiddenVariant !== null && + "filter" in hiddenVariant + ? hiddenVariant.filter + : undefined + + const visibleFilter = + typeof visibleVariant === "object" && + visibleVariant !== null && + "filter" in visibleVariant + ? visibleVariant.filter + : undefined + + const shouldTransitionFilter = + hiddenFilter !== undefined && + visibleFilter !== undefined && + hiddenFilter !== visibleFilter + return ( Date: Mon, 2 Mar 2026 16:47:07 +0900 Subject: [PATCH 2/3] refactor(blur-fade): extract getFilter helper for variant filter extraction --- apps/www/public/llms-full.txt | 31 ++++++++----------------- apps/www/public/r/blur-fade.json | 2 +- apps/www/registry/magicui/blur-fade.tsx | 25 ++++++-------------- 3 files changed, 18 insertions(+), 40 deletions(-) diff --git a/apps/www/public/llms-full.txt b/apps/www/public/llms-full.txt index c625c3271..79d0d2a27 100644 --- a/apps/www/public/llms-full.txt +++ b/apps/www/public/llms-full.txt @@ -3394,10 +3394,10 @@ import { useRef } from "react" import { AnimatePresence, motion, - MotionProps, useInView, - UseInViewOptions, - Variants, +MotionProps, +UseInViewOptions, +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, @@ -3449,26 +3452,12 @@ export function BlurFade({ } const combinedVariants = variant || defaultVariants - const hiddenVariant = combinedVariants.hidden - const visibleVariant = combinedVariants.visible - - const hiddenFilter = - typeof hiddenVariant === "object" && - hiddenVariant !== null && - "filter" in hiddenVariant - ? hiddenVariant.filter - : undefined - - const visibleFilter = - typeof visibleVariant === "object" && - visibleVariant !== null && - "filter" in visibleVariant - ? visibleVariant.filter - : undefined + const hiddenFilter = getFilter(combinedVariants.hidden) + const visibleFilter = getFilter(combinedVariants.visible) const shouldTransitionFilter = - hiddenFilter !== undefined && - visibleFilter !== undefined && + hiddenFilter != null && + visibleFilter != null && hiddenFilter !== visibleFilter return ( diff --git a/apps/www/public/r/blur-fade.json b/apps/www/public/r/blur-fade.json index e01004cfe..660fa8cce 100644 --- a/apps/www/public/r/blur-fade.json +++ b/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\n const hiddenVariant = combinedVariants.hidden\n const visibleVariant = combinedVariants.visible\n\n const hiddenFilter =\n typeof hiddenVariant === \"object\" &&\n hiddenVariant !== null &&\n \"filter\" in hiddenVariant\n ? hiddenVariant.filter\n : undefined\n\n const visibleFilter =\n typeof visibleVariant === \"object\" &&\n visibleVariant !== null &&\n \"filter\" in visibleVariant\n ? visibleVariant.filter\n : undefined\n\n const shouldTransitionFilter =\n hiddenFilter !== undefined &&\n visibleFilter !== undefined &&\n hiddenFilter !== visibleFilter\n\n return (\n \n \n {children}\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { useRef } from \"react\"\nimport {\n AnimatePresence,\n motion,\n useInView,\nMotionProps,\nUseInViewOptions,\nVariants,\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 \n \n {children}\n \n \n )\n}\n", "type": "registry:ui" } ] diff --git a/apps/www/registry/magicui/blur-fade.tsx b/apps/www/registry/magicui/blur-fade.tsx index bbe6f39b2..6eafa2e63 100644 --- a/apps/www/registry/magicui/blur-fade.tsx +++ b/apps/www/registry/magicui/blur-fade.tsx @@ -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, @@ -59,26 +62,12 @@ export function BlurFade({ } const combinedVariants = variant || defaultVariants - const hiddenVariant = combinedVariants.hidden - const visibleVariant = combinedVariants.visible - - const hiddenFilter = - typeof hiddenVariant === "object" && - hiddenVariant !== null && - "filter" in hiddenVariant - ? hiddenVariant.filter - : undefined - - const visibleFilter = - typeof visibleVariant === "object" && - visibleVariant !== null && - "filter" in visibleVariant - ? visibleVariant.filter - : undefined + const hiddenFilter = getFilter(combinedVariants.hidden) + const visibleFilter = getFilter(combinedVariants.visible) const shouldTransitionFilter = - hiddenFilter !== undefined && - visibleFilter !== undefined && + hiddenFilter != null && + visibleFilter != null && hiddenFilter !== visibleFilter return ( From 24d0f174b4b30fd4bf8b7cfe09e214dffb3b4f7b Mon Sep 17 00:00:00 2001 From: Yeom-JinHo Date: Mon, 2 Mar 2026 16:48:25 +0900 Subject: [PATCH 3/3] refactor(blur-fade): use type-only imports from motion/react --- apps/www/public/llms-full.txt | 6 +++--- apps/www/public/r/blur-fade.json | 2 +- apps/www/registry/magicui/blur-fade.tsx | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/www/public/llms-full.txt b/apps/www/public/llms-full.txt index 79d0d2a27..595ccc1ca 100644 --- a/apps/www/public/llms-full.txt +++ b/apps/www/public/llms-full.txt @@ -3394,10 +3394,10 @@ import { useRef } from "react" import { AnimatePresence, motion, + type MotionProps, useInView, -MotionProps, -UseInViewOptions, -Variants, + type UseInViewOptions, + type Variants, } from "motion/react" type MarginType = UseInViewOptions["margin"] diff --git a/apps/www/public/r/blur-fade.json b/apps/www/public/r/blur-fade.json index 660fa8cce..6080a8518 100644 --- a/apps/www/public/r/blur-fade.json +++ b/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 useInView,\nMotionProps,\nUseInViewOptions,\nVariants,\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 \n \n {children}\n \n \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 \n \n {children}\n \n \n )\n}\n", "type": "registry:ui" } ] diff --git a/apps/www/registry/magicui/blur-fade.tsx b/apps/www/registry/magicui/blur-fade.tsx index 6eafa2e63..1a546c4b1 100644 --- a/apps/www/registry/magicui/blur-fade.tsx +++ b/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"]