Text Reveal

Text reveal animations create a dynamic and engaging effect as text appears on the screen. This technique can be used to draw attention to specific content or enhance the overall user experience.

Title Reveal

Open in

With custom props

Open in

npm install motion/react react

pnpm install motion/react react

yarn add motion/react react

bun add motion/react react

Text Reveal Component

'use client';

import { cn } from '@/lib/utils';
import { motion } from 'motion/react';

interface TextRevealProps {
  children: string;
  className?: string;
  blur?: number;
  delay?: number;
  duration?: number;
  from?: 'top' | 'bottom';
  split?: 'word' | 'letter';
}

export const TextReveal = ({
  children,
  className,
  blur = 10,
  delay = 0.1,
  duration = 1,
  from = 'bottom',
  split = 'word',
}: TextRevealProps) => {
  const segments =
    split === 'word' ? children.split(' ') : children.split(/(?=.)/);

  return (
    <div>
      {segments.map((c, index) => (
        <motion.span
          key={`${c}-${index}`}
          initial={{
            opacity: 0,
            y: from === 'bottom' ? '50%' : '-50%',
            filter: `blur(${blur}px)`,
          }}
          animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
          transition={{
            delay: index * delay,
            duration,
            ease: [0.18, 0.89, 0.82, 1.04],
          }}
          className={cn(
            'inline-flex leading-none',
            split === 'word' ? 'mr-[0.2em]' : '',
            className,
          )}
        >
          {c === ' ' ? '\u00A0' : c}
        </motion.span>
      ))}
      <div className="sr-only">{children}</div>
    </div>
  );
};

'use client';import { cn } from '@/lib/utils';import { motion } from 'motion/react';interface TextRevealProps {  children: string;  className?: string;  blur?: number;  delay?: number;  duration?: number;  from?: 'top' | 'bottom';  split?: 'word' | 'letter';}export const TextReveal = ({  children,  className,  blur = 10,  delay = 0.1,  duration = 1,  from = 'bottom',  split = 'word',}: TextRevealProps) => {  const segments =    split === 'word' ? children.split(' ') : children.split(/(?=.)/);  return (    <div>      {segments.map((c, index) => (        <motion.span          key={`${c}-${index}`}          initial={{            opacity: 0,            y: from === 'bottom' ? '50%' : '-50%',            filter: `blur(${blur}px)`,          }}          animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}          transition={{            delay: index * delay,            duration,            ease: [0.18, 0.89, 0.82, 1.04],          }}          className={cn(            'inline-flex leading-none',            split === 'word' ? 'mr-[0.2em]' : '',            className,          )}        >          {c === ' ' ? '\u00A0' : c}        </motion.span>      ))}      <div className="sr-only">{children}</div>    </div>  );};

Props

Prop

Type

Text Reveal

Title Reveal

With custom props

Props

On this page

Contribute