Blur Text Reveal

A smooth and modern text reveal component with a blur animation effect.

Text Reveal

Blur Animation

You wanted to see magic.

Tadaaa

"use client";

import { BlurTextReveal } from "@/components/ui/blur-text-reveal";

export default function Home() {
  return (
    <div className="flex min-h-[200vh] flex-col items-center justify-center">
      <BlurTextReveal>
        <p className="text-6xl">You wanted to see magic.</p>
        <p className="text-6xl text-blue-500">Tadaaa</p>
      </BlurTextReveal>
    </div>
  );
}

Installation

Paste this code in your terminal

npx shadcn@latest add https://rohitnirban.com/r/blur-text-reveal.json

Install dependencies

npm i motion clsx tailwind-merge

Add util file

lib/utils.ts

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Copy the source code

components/ui/blur-text-reveal.tsx

"use client";

import React, { useRef } from "react";
import {
  motion,
  useScroll,
  useTransform,
  type MotionValue,
} from "motion/react";
import { cn } from "@/lib/utils";

interface BlurTextRevealProps {
  children: React.ReactNode;
  className?: string;
}

export function BlurTextReveal({ children, className }: BlurTextRevealProps) {
  const containerRef = useRef<HTMLDivElement>(null);

  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start end", "end start"],
  });

  const childs = React.Children.toArray(children);

  return (
    <div ref={containerRef} className={cn("relative flex flex-col gap-2", className)}>
      {childs.map((child, index) => (
        <BlurChild key={index} progress={scrollYProgress} index={index}>
          {child}
        </BlurChild>
      ))}
    </div>
  );
}

function BlurChild({
  children,
  progress,
  index,
}: {
  children: React.ReactNode;
  progress: MotionValue<number>;
  index: number;
}) {
  const childBlur = useTransform(
    progress,
    [index * 0.1, index * 0.1 + 0.3],
    [20, 0],
  );

  const childY = useTransform(
    progress,
    [index * 0.2, index * 0.2 + 0.2],
    [20, 0],
  );

  const filter = useTransform(childBlur, (v) => `blur(${v}px)`);

  return <motion.div style={{ filter, y: childY }}>{children}</motion.div>;
}

Props

Prop	Type	Default	Required
`children` Each child is revealed in turn, staggered by its index as you scroll.	`React.ReactNode`	—	Yes
`className` Additional CSS classes for the wrapper.	`string`	—	No