Blur Reveal

1"use client"
2import { AnimatePresence, motion } from "motion/react"
3import type React from "react"
4 
5export interface BlurRevealProps {
6  children: string
7  className?: string
8  delay?: number
9  speedReveal?: number
10  speedSegment?: number
11  trigger?: boolean
12  onAnimationComplete?: () => void
13  onAnimationStart?: () => void
14  as?: keyof React.JSX.IntrinsicElements
15  style?: React.CSSProperties
16  inView?: boolean
17  once?: boolean
18  letterSpacing?: string | number
19}
20 
21export function BlurReveal({
22  children,
23  className,
24  delay = 0,
25  speedReveal = 1.5,
26  speedSegment = 0.5,
27  trigger = true,
28  onAnimationComplete,
29  onAnimationStart,
30  as = "p",
31  style,
32  inView = false,
33  once = true,
34  letterSpacing,
35}: BlurRevealProps) {
36  const MotionTag = motion[as as keyof typeof motion] as typeof motion.div
37 
38  const stagger = 0.03 / speedReveal
39  const baseDuration = 0.3 / speedSegment
40 
41  const containerVariants = {
42    hidden: { opacity: 0 },
43    visible: {
44      opacity: 1,
45      transition: {
46        staggerChildren: stagger,
47        delayChildren: delay,
48      },
49    },
50    exit: {
51      transition: {
52        staggerChildren: stagger,
53        staggerDirection: -1,
54      },
55    },
56  }
57 
58  const itemVariants = {
59    hidden: { opacity: 0, filter: "blur(12px)", y: 10 },
60    visible: {
61      opacity: 1,
62      filter: "blur(0px)",
63      y: 0,
64      transition: {
65        duration: baseDuration,
66      },
67    },
68    exit: { opacity: 0, filter: "blur(12px)", y: 10 },
69  }
70 
71  return (
72    <AnimatePresence mode="popLayout">
73      {trigger && (
74        <MotionTag
75          initial="hidden"
76          whileInView={inView ? "visible" : undefined}
77          animate={inView ? undefined : "visible"}
78          exit="exit"
79          variants={containerVariants}
80          viewport={{ once }}
81          className={className}
82          onAnimationComplete={onAnimationComplete}
83          onAnimationStart={onAnimationStart}
84          style={style}
85        >
86          <span className="sr-only">{children}</span>
87          {children &&
88            children.split(" ").map((word, wordIndex, wordsArray) => (
89              <span key={`word-${wordIndex}`} className="inline-block whitespace-nowrap" aria-hidden="true">
90                {word.split("").map((char, charIndex) => (
91                  <motion.span
92                    key={`char-${wordIndex}-${charIndex}`}
93                    variants={itemVariants}
94                    className="inline-block"
95// … truncated