BlurText

1import { motion } from 'motion/react';
2import { useEffect, useRef, useState, useMemo } from 'react';
3 
4const buildKeyframes = (from, steps) => {
5  const keys = new Set([...Object.keys(from), ...steps.flatMap(s => Object.keys(s))]);
6 
7  const keyframes = {};
8  keys.forEach(k => {
9    keyframes[k] = [from[k], ...steps.map(s => s[k])];
10  });
11  return keyframes;
12};
13 
14const BlurText = ({
15  text = '',
16  delay = 200,
17  className = '',
18  animateBy = 'words',
19  direction = 'top',
20  threshold = 0.1,
21  rootMargin = '0px',
22  animationFrom,
23  animationTo,
24  easing = t => t,
25  onAnimationComplete,
26  stepDuration = 0.35
27}) => {
28  const elements = animateBy === 'words' ? text.split(' ') : text.split('');
29  const [inView, setInView] = useState(false);
30  const ref = useRef(null);
31 
32  useEffect(() => {
33    if (!ref.current) return;
34    const observer = new IntersectionObserver(
35      ([entry]) => {
36        if (entry.isIntersecting) {
37          setInView(true);
38          observer.unobserve(ref.current);
39        }
40      },
41      { threshold, rootMargin }
42    );
43    observer.observe(ref.current);
44    return () => observer.disconnect();
45  }, [threshold, rootMargin]);
46 
47  const defaultFrom = useMemo(
48    () =>
49      direction === 'top' ? { filter: 'blur(10px)', opacity: 0, y: -50 } : { filter: 'blur(10px)', opacity: 0, y: 50 },
50    [direction]
51  );
52 
53  const defaultTo = useMemo(
54    () => [
55      {
56        filter: 'blur(5px)',
57        opacity: 0.5,
58        y: direction === 'top' ? 5 : -5
59      },
60      { filter: 'blur(0px)', opacity: 1, y: 0 }
61    ],
62    [direction]
63  );
64 
65  const fromSnapshot = animationFrom ?? defaultFrom;
66  const toSnapshots = animationTo ?? defaultTo;
67 
68  const stepCount = toSnapshots.length + 1;
69  const totalDuration = stepDuration * (stepCount - 1);
70  const times = Array.from({ length: stepCount }, (_, i) => (stepCount === 1 ? 0 : i / (stepCount - 1)));
71 
72  return (
73    <p ref={ref} className={`blur-text ${className} flex flex-wrap`}>
74      {elements.map((segment, index) => {
75        const animateKeyframes = buildKeyframes(fromSnapshot, toSnapshots);
76 
77        const spanTransition = {
78          duration: totalDuration,
79          times,
80          delay: (index * delay) / 1000
81        };
82        spanTransition.ease = easing;
83 
84        return (
85          <motion.span
86            className="inline-block will-change-[transform,filter,opacity]"
87            key={index}
88            initial={fromSnapshot}
89            animate={inView ? animateKeyframes : fromSnapshot}
90// … truncated