From f69220cc275f6f0fa86b2196edc1918bcd94ea36 Mon Sep 17 00:00:00 2001 From: Arghya Das Date: Thu, 19 Dec 2024 19:14:10 +0530 Subject: [PATCH] feat: adding 4 direction in blur fade (#455) --- content/docs/components/blur-fade.mdx | 23 ++++++++++--------- public/r/styles/default/blur-fade.json | 2 +- registry/default/example/blur-fade-demo.tsx | 1 + .../default/example/blur-fade-text-demo.tsx | 2 +- registry/default/magicui/blur-fade.tsx | 19 +++++++++++---- 5 files changed, 30 insertions(+), 17 deletions(-) diff --git a/content/docs/components/blur-fade.mdx b/content/docs/components/blur-fade.mdx index 6eb471352..1c822fd48 100644 --- a/content/docs/components/blur-fade.mdx +++ b/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" | diff --git a/public/r/styles/default/blur-fade.json b/public/r/styles/default/blur-fade.json index 702d72e68..a6e87dd0f 100644 --- a/public/r/styles/default/blur-fade.json +++ b/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 \n \n {children}\n \n \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 \n \n {children}\n \n \n );\n}\n", "type": "registry:ui", "target": "" } diff --git a/registry/default/example/blur-fade-demo.tsx b/registry/default/example/blur-fade-demo.tsx index 30328c8af..e8fefd0e3 100644 --- a/registry/default/example/blur-fade-demo.tsx +++ b/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) => { diff --git a/registry/default/example/blur-fade-text-demo.tsx b/registry/default/example/blur-fade-text-demo.tsx index 986a3b2a2..8e6e2f067 100644 --- a/registry/default/example/blur-fade-text-demo.tsx +++ b/registry/default/example/blur-fade-text-demo.tsx @@ -9,7 +9,7 @@ export default function BlurFadeTextDemo() { - + Nice to meet you diff --git a/registry/default/magicui/blur-fade.tsx b/registry/default/magicui/blur-fade.tsx index 44e897ee4..e7216e10d 100644 --- a/registry/default/magicui/blur-fade.tsx +++ b/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 (