Launched best Saas Marketing template at cheap — Check out
logoMvpblocks
HomeAboutShowcase

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'

Last updated on

Scroll Velocity

Scroll velocity animations create a dynamic and engaging effect as elements move on the screen. This technique can be used to draw attention to specific content or enhance the overall user experience.

Typewriter

Typewriter animations simulate the effect of text being typed out in real-time. This technique can be used to create a sense of anticipation and engagement as users watch the text appear on the screen.