Launched best Saas Marketing template at cheap — Check out

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

With custom props

npm install motion/react react
pnpm install motion/react react
yarn add motion/react react
bun add motion/react react

Gradient Bars

'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

PropTypeDefault
children?
string
undefined
className?
string
undefined
blur?
number
10
delay?
number
0.1
duration?
number
1
from?
'top' | 'bottom'
'bottom'
split?
'word' | 'letter'
'word'