Blur Fade

1"use client"
2 
3import { useRef } from "react"
4import {
5  AnimatePresence,
6  motion,
7  useInView,
8  type MotionProps,
9  type UseInViewOptions,
10  type Variants,
11} from "motion/react"
12 
13type MarginType = UseInViewOptions["margin"]
14 
15interface BlurFadeProps extends MotionProps {
16  children: React.ReactNode
17  className?: string
18  variant?: {
19    hidden: { y: number }
20    visible: { y: number }
21  }
22  duration?: number
23  delay?: number
24  offset?: number
25  direction?: "up" | "down" | "left" | "right"
26  inView?: boolean
27  inViewMargin?: MarginType
28  blur?: string
29}
30 
31const getFilter = (v: Variants[string]) =>
32  typeof v === "function" ? undefined : v.filter
33 
34export function BlurFade({
35  children,
36  className,
37  variant,
38  duration = 0.4,
39  delay = 0,
40  offset = 6,
41  direction = "down",
42  inView = false,
43  inViewMargin = "-50px",
44  blur = "6px",
45  ...props
46}: BlurFadeProps) {
47  const ref = useRef(null)
48  const inViewResult = useInView(ref, { once: true, margin: inViewMargin })
49  const isInView = !inView || inViewResult
50  const defaultVariants: Variants = {
51    hidden: {
52      [direction === "left" || direction === "right" ? "x" : "y"]:
53        direction === "right" || direction === "down" ? -offset : offset,
54      opacity: 0,
55      filter: `blur(${blur})`,
56    },
57    visible: {
58      [direction === "left" || direction === "right" ? "x" : "y"]: 0,
59      opacity: 1,
60      filter: `blur(0px)`,
61    },
62  }
63  const combinedVariants = variant ?? defaultVariants
64 
65  const hiddenFilter = getFilter(combinedVariants.hidden)
66  const visibleFilter = getFilter(combinedVariants.visible)
67 
68  const shouldTransitionFilter =
69    hiddenFilter != null &&
70    visibleFilter != null &&
71    hiddenFilter !== visibleFilter
72 
73  return (
74    <AnimatePresence>
75      <motion.div
76        ref={ref}
77        initial="hidden"
78        animate={isInView ? "visible" : "hidden"}
79        exit="hidden"
80        variants={combinedVariants}
81        transition={{
82          delay: 0.04 + delay,
83          duration,
84          ease: "easeOut",
85          ...(shouldTransitionFilter ? { filter: { duration } } : {}),
86        }}
87        className={className}
88        {...props}
89      >
90        {children}
91      </motion.div>
92    </AnimatePresence>
93  )
94}