Blur Shimmer Text

1"use client";
2 
3import * as React from "react";
4import type { Transition, Variants } from "motion/react";
5import { AnimatePresence, motion } from "motion/react";
6 
7import { cn } from "@/lib/utils";
8 
9type MotionElement =
10  | typeof motion.p
11  | typeof motion.span
12  | typeof motion.code
13  | typeof motion.h1
14  | typeof motion.h2
15  | typeof motion.h3;
16 
17export type BlurShimmerTextProps = {
18  /** Element to render as.
19   * @defaultValue motion.p */
20  as?: MotionElement;
21  /** Additional class names. */
22  className?: string;
23  /** Seconds each text is visible before switching.
24   * @defaultValue 2 */
25  interval?: number;
26  /** Blur radius in pixels at the peak of the shimmer effect.
27   * @defaultValue 6 */
28  blur?: number;
29  /** Motion transition for the blur sweep. */
30  transition?: Transition;
31  /** Motion variants for each character. Overrides the blur prop. */
32  variants?: Variants;
33  /** List of phrases to loop through. */
34  texts: string[];
35};
36 
37export function BlurShimmerText({
38  as = motion.p,
39  className,
40  interval = 2,
41  blur = 6,
42  transition = { duration: 0.5 },
43  variants,
44  texts,
45}: BlurShimmerTextProps) {
46  const [currentIndex, setCurrentIndex] = React.useState(0);
47  const Component = as as typeof motion.p;
48 
49  const resolvedVariants: Variants = variants ?? {
50    initial: { filter: `blur(${blur}px)`, opacity: 0 },
51    animate: { filter: "blur(0px)", opacity: 1 },
52    exit: { filter: `blur(${blur}px)`, opacity: 0 },
53  };
54 
55  React.useEffect(() => {
56    if (!texts || texts.length === 0) return;
57 
58    const timeout = setInterval(() => {
59      setCurrentIndex((prev) => (prev + 1) % texts.length);
60    }, interval * 1000);
61 
62    return () => clearInterval(timeout);
63  }, [texts, interval]);
64 
65  if (!texts || texts.length === 0) return null;
66 
67  const duration = (transition.duration as number) || 0.6;
68 
69  return (
70    <div className={cn("inline-grid", className)}>
71      {texts.map((text, index) => (
72        <span
73          key={index}
74          className="invisible col-start-1 row-start-1 block whitespace-nowrap"
75          aria-hidden="true"
76        >
77          {text.split("").map((char, i) => (
78            <span key={i} className="inline-block whitespace-pre">
79              {char}
80            </span>
81          ))}
82        </span>
83      ))}
84      <AnimatePresence>
85        <Component
86          key={currentIndex}
87          className="col-start-1 row-start-1 block whitespace-nowrap"
88          initial="initial"
89          animate="animate"
90          exit="exit"
91// … truncated