Blur Out Up

1"use client";
2 
3import { motion, useInView, useReducedMotion } from "motion/react";
4import { useRef } from "react";
5 
6/**
7 * BlurOutUp — words arrive clean from a gentle blur and upward drift,
8 * Apple-style airy entrance. From the animate-text catalog (`blur-out-up`).
9 */
10export interface BlurOutUpProps {
11  children: string;
12  className?: string;
13  /** Delay before the animation starts, in milliseconds. */
14  delay?: number;
15  /** Per-word stagger, in milliseconds. */
16  stagger?: number;
17  /** Animate only once the text scrolls into view. */
18  triggerOnView?: boolean;
19}
20 
21const DURATION_S = 0.56;
22const MS = 1000;
23const EASE = [0.22, 1, 0.36, 1] as const;
24 
25export default function BlurOutUp({
26  children,
27  className = "",
28  delay = 0,
29  stagger = 28,
30  triggerOnView = false,
31}: BlurOutUpProps) {
32  const ref = useRef<HTMLSpanElement>(null);
33  const inView = useInView(ref, { once: true });
34  const shouldReduceMotion = useReducedMotion();
35  const play = (!triggerOnView || inView) && !shouldReduceMotion;
36  const words = children.split(" ");
37 
38  return (
39    <span aria-label={children} className={className} ref={ref}>
40      {words.map((word, index) => (
41        // biome-ignore lint/suspicious/noArrayIndexKey: words have no stable id
42        <span key={index}>
43          <motion.span
44            animate={
45              play ? { filter: "blur(0px)", opacity: 1, y: 0 } : undefined
46            }
47            aria-hidden="true"
48            initial={
49              shouldReduceMotion
50                ? { opacity: 1 }
51                : { filter: "blur(6px)", opacity: 0, y: 10 }
52            }
53            style={{ display: "inline-block", whiteSpace: "pre" }}
54            transition={
55              shouldReduceMotion
56                ? { duration: 0 }
57                : {
58                    delay: delay / MS + (index * stagger) / MS,
59                    duration: DURATION_S,
60                    ease: EASE,
61                  }
62            }
63          >
64            {word}
65          </motion.span>
66          {index < words.length - 1 && (
67            <span
68              aria-hidden="true"
69              style={{ display: "inline-block", whiteSpace: "pre" }}
70            >
71              {" "}
72            </span>
73          )}
74        </span>
75      ))}
76    </span>
77  );
78}