React Blur Text Animation

Powered by

Motion

Most text animations are abrupt and mechanical—instant visibility changes that don't feel natural or engaging. This component creates smooth blur-to-focus transitions that animate text elements progressively, using CSS filter blur and intersection observer to trigger animations when content enters the viewport.

Progressive blur-to-focus text animation

Text that smoothly transitions from blurred to focused with staggered timing:

import BlurText from '@/components/ui/shadcn-io/blur-text';const BlurTextDemo = () => {  return (    <div >      <BlurText        text="Beautiful components that make React development a joy!"        delay={150}        animateBy="words"        direction="top"        className="text-4xl font-bold text-center max-w-4xl"      />    </div>  );};export default BlurTextDemo;

'use client';import { motion, Transition, Easing } from 'motion/react';import { useEffect, useRef, useState, useMemo } from 'react';type BlurTextProps = {  text?: string;  delay?: number;  className?: string;  animateBy?: 'words' | 'letters';  direction?: 'top' | 'bottom';  threshold?: number;  rootMargin?: string;  animationFrom?: Record<string, string | number>;  animationTo?: Array<Record<string, string | number>>;  easing?: Easing | Easing[];  onAnimationComplete?: () => void;  stepDuration?: number;};const buildKeyframes = (  from: Record<string, string | number>,  steps: Array<Record<string, string | number>>): Record<string, Array<string | number>> => {  const keys = new Set<string>([...Object.keys(from), ...steps.flatMap(s => Object.keys(s))]);  const keyframes: Record<string, Array<string | number>> = {};  keys.forEach(k => {    keyframes[k] = [from[k], ...steps.map(s => s[k])];  });  return keyframes;};const BlurText: React.FC<BlurTextProps> = ({  text = '',  delay = 200,  className = '',  animateBy = 'words',  direction = 'top',  threshold = 0.1,  rootMargin = '0px',  animationFrom,  animationTo,  easing = (t: number) => t,  onAnimationComplete,  stepDuration = 0.35}) => {  const elements = animateBy === 'words' ? text.split(' ') : text.split('');  const [inView, setInView] = useState(false);  const ref = useRef<HTMLParagraphElement>(null);  useEffect(() => {    if (!ref.current) return;    const observer = new IntersectionObserver(      ([entry]) => {        if (entry.isIntersecting) {          setInView(true);          observer.unobserve(ref.current as Element);        }      },      { threshold, rootMargin }    );    observer.observe(ref.current);    return () => observer.disconnect();  }, [threshold, rootMargin]);  const defaultFrom = useMemo(    () =>      direction === 'top' ? { filter: 'blur(10px)', opacity: 0, y: -50 } : { filter: 'blur(10px)', opacity: 0, y: 50 },    [direction]  );  const defaultTo = useMemo(    () => [      {        filter: 'blur(5px)',        opacity: 0.5,        y: direction === 'top' ? 5 : -5      },      { filter: 'blur(0px)', opacity: 1, y: 0 }    ],    [direction]  );  const fromSnapshot = animationFrom ?? defaultFrom;  const toSnapshots = animationTo ?? defaultTo;  const stepCount = toSnapshots.length + 1;  const totalDuration = stepDuration * (stepCount - 1);  const times = Array.from({ length: stepCount }, (_, i) => (stepCount === 1 ? 0 : i / (stepCount - 1)));  return (    <p ref={ref} className={`blur-text ${className} flex flex-wrap`}>      {elements.map((segment, index) => {        const animateKeyframes = buildKeyframes(fromSnapshot, toSnapshots);        const spanTransition: Transition = {          duration: totalDuration,          times,          delay: (index * delay) / 1000,          ease: easing        };        return (          <motion.span            key={index}            initial={fromSnapshot}            animate={inView ? animateKeyframes : fromSnapshot}            transition={spanTransition}            onAnimationComplete={index === elements.length - 1 ? onAnimationComplete : undefined}            style={{              display: 'inline-block',              willChange: 'transform, filter, opacity'            }}          >            {segment === ' ' ? '\u00A0' : segment}            {animateBy === 'words' && index < elements.length - 1 && '\u00A0'}          </motion.span>        );      })}    </p>  );};export default BlurText;

Built with TypeScript and Motion for React applications, using intersection observer for scroll-triggered animations. The component supports both word-by-word and letter-by-letter animation modes with customizable blur transitions and directional movement.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/blur-text.json

npx shadcn@latest add https://www.shadcn.io/registry/blur-text.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/blur-text.json

bunx shadcn@latest add https://www.shadcn.io/registry/blur-text.json

Usage

import BlurText from "@/components/text/blur-text";

const handleAnimationComplete = () => {
  console.log('Animation completed!');
};

<BlurText
  text="Beautiful components that make React development a joy!"
  delay={150}
  animateBy="words"
  direction="top"
  onAnimationComplete={handleAnimationComplete}
  className="text-4xl font-bold"
/>

Why most text animations feel artificial

Most developers use simple opacity or transform changes—binary visibility states that don't capture the natural way focus works in real vision. When humans focus on text, there's a gradual clearing process that involves both sharpness and positional settling.

This React component uses CSS filter blur combined with opacity and transform animations to simulate natural focusing. The staggered timing creates a wave effect as text segments progressively come into focus, while the intersection observer ensures animations trigger at the optimal scroll position.

The key insight: natural focus is gradual and layered. When blur clears progressively while elements settle into position, it mirrors how human vision processes information, creating more intuitive and engaging text reveals.

Features

• Intersection observer-triggered animations with configurable threshold and root margin settings
• Word-by-word or letter-by-letter animation modes with independent timing controls
• Multi-stage blur transitions with customizable keyframes for complex animation sequences
• Directional movement support with top/bottom slide animations during blur clearing
• Custom animation curves with Motion's easing system for precise timing control
• Performance optimized with will-change properties and hardware acceleration
• Free open source component compatible with Next.js and shadcn/ui design systems

API Reference

BlurText

Blur-to-focus text animation component with intersection observer.

Animation Timing Configuration

Control the animation flow with timing parameters:

Intersection Observer Settings

Fine-tune when animations trigger:

Common gotchas

Animation doesn't trigger: Check that the component is properly mounted and the intersection observer threshold is appropriate for your layout. Elements that are initially visible might not trigger if threshold is too high.

Performance issues with long text: The component creates individual motion spans for each word/letter. For very long text, consider breaking content into multiple BlurText components or using animateBy="words" instead of "letters".

Custom animations not working: When providing custom animationFrom and animationTo props, ensure all keyframe objects have consistent property keys. Missing properties in intermediate keyframes can cause animation glitches.

Text spacing issues: The component preserves spacing using non-breaking spaces (\u00A0). If you encounter spacing issues, check your CSS word-spacing and letter-spacing properties that might interfere.

Blur not visible on some devices: CSS filter blur requires hardware acceleration. On older devices or certain browsers, the blur effect might be subtle or disabled for performance reasons.

Integration with other components

Perfect for hero sections in Card layouts or scroll-triggered reveals in Dialog modals. Works excellently with Badge components for feature announcements or Button components with complementary entrance animations.

For landing pages, combine with Progress indicators that animate alongside text reveals or Separator components for sectioned content reveals. The component integrates seamlessly with Tabs for content that appears as users navigate between sections.

Questions developers actually ask