Animated TextGenerate

Generates animated text word-by-word with blur, highlights, links, and smooth effects.

Installation

npx shadcn@latest add @scrollxui/animated-textgenerate

Usage

import { AnimatedTextGenerate } from '@/components/ui/animated-textgenerate';

<AnimatedTextGenerate
  text='Pressure changes everything. Some people focus, others fold.'
  className='text-center my-10'
  textClassName='text-3xl text-gray-800 dark:text-white'
  blurEffect={true}
  speed={0.5}
  highlightWords={['Pressure', 'focus']}
  highlightClassName='text-blue-500'
  linkWords={['everything']}
  linkHrefs={['/about']}
  linkClassNames={['underline text-red-500']}
/>

API Reference

Animated TextGenerate

Creates a flowing reading effect with staggered words, styling emphasis, and interactions.

Props

Property	Type	Default	Description
`text`	string	`required`	The full string of text to animate word-by-word.
`className`	string	`optional`	Additional classNames for styling the outer container.
`textClassName`	string	`optional`	Additional classNames for styling the text container.
`blurEffect`	boolean	`true`	Applies a blur-in animation when words appear.
`speed`	number	`0.5`	Controls the speed of the animation. Lower is faster.
`highlightWords`	string[]	`[]`	Array of words to highlight visually when they appear.
`highlightClassName`	string	`optional`	Class applied to highlighted words for styling (e.g., color).
`linkWords`	string[]	`[]`	Words to turn into links during animation.
`linkHrefs`	string[]	`[]`	Corresponding href values for linkWords. Must match linkWords length.
`linkClassNames`	string[]	`[]`	ClassNames applied individually to each link in linkWords.