Docs

Blur Reveal

A text component that reveals its content with a smooth blur-to-focus animation, activated by default when the text enters the viewport.

This is a Title And this is the amazing text that just can’t wait
to reveal itself! Watch it come to life with a blur.

Installation

Install dependencies

npm install

npm install clsx tailwind-merge framer-motion

Add utils file

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Copy the source code

blur-reveal.tsx

"use client"
 
import { motion, useInView } from "framer-motion";
import * as React from "react";
import { cn } from "@/lib/utils";
 
interface BlurRevealProps {
  className?: string;
  children: React.ReactNode;
  delay?: number;
  duration?: number;
}
 
export default function BlurReveal({ className, children, delay = 0, duration = 1 }: BlurRevealProps): JSX.Element {
  const spanRef = React.useRef<HTMLSpanElement | null>(null);
  const isInView: boolean = useInView(spanRef, { once: true });
 
  return (
    <motion.span
      ref={spanRef}
      initial={{ opacity: 0, filter: "blur(10px)", y: "20%" }}
      animate={isInView ? { opacity: 1, filter: "blur(0px)", y: "0%" } : {}}
      transition={{ duration: duration, delay: delay }}
      className={cn("inline-block", className)}
    >
      {children}
    </motion.span>
  );
}

Props

Prop	Type	Description	Default
className	String	The class name for the component, allowing for custom styling.	-
delay	Number	The delay before the animation starts, in seconds.	0
duration	Number	The duration of the reveal animation in seconds.	1
children	React.ReactNode	The content inside the component, typically text, which will reveal with a blur effect.	undefined