Blur Text

1"use client";
2 
3import * as React from "react";
4import { motion, useReducedMotion, type Transition } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7 
8type AnimateBy = "words" | "chars";
9type Direction = "top" | "bottom";
10 
11export interface BlurTextProps {
12  /** The text to reveal. */
13  text: string;
14  className?: string;
15  /** Milliseconds of stagger between each segment. */
16  delay?: number;
17  /** Reveal word-by-word or character-by-character. */
18  animateBy?: AnimateBy;
19  /** Which side each segment drifts in from. */
20  direction?: Direction;
21  /** Animate only the first time it enters the viewport. */
22  once?: boolean;
23  /** Element tag to render (e.g. "h1", "p"). */
24  as?: React.ElementType;
25}
26 
27const EASE: Transition["ease"] = [0.2, 0, 0, 1];
28 
29/**
30 * BlurText — reveals text segment-by-segment with a de-blur + drift.
31 *
32 * Accessibility: the full string is exposed once via `aria-label`; the animated
33 * segments are `aria-hidden`. Under `prefers-reduced-motion` the text renders in
34 * its final state with no animation. Clean-room original.
35 */
36export function BlurText({
37  text,
38  className,
39  delay = 60,
40  animateBy = "words",
41  direction = "top",
42  once = true,
43  as: Tag = "span",
44}: BlurTextProps) {
45  const reduce = useReducedMotion();
46  const segments = React.useMemo(
47    () => (animateBy === "words" ? text.split(" ") : Array.from(text)),
48    [text, animateBy],
49  );
50  const y = direction === "top" ? -14 : 14;
51 
52  return (
53    <Tag className={cn("inline-flex flex-wrap", className)} aria-label={text}>
54      {segments.map((seg, i) => (
55        <motion.span
56          key={`${seg}-${i}`}
57          aria-hidden="true"
58          className="inline-block whitespace-pre [will-change:transform,filter]"
59          initial={reduce ? false : { opacity: 0, y, filter: "blur(8px)" }}
60          whileInView={reduce ? undefined : { opacity: 1, y: 0, filter: "blur(0px)" }}
61          viewport={{ once, margin: "-10% 0px" }}
62          transition={{ duration: 0.5, ease: EASE, delay: (i * delay) / 1000 }}
63        >
64          {seg}
65          {animateBy === "words" && i < segments.length - 1 ? " " : null}
66        </motion.span>
67      ))}
68    </Tag>
69  );
70}
71 
72export default BlurText;