Animated TextGenerate

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

Installation

npx shadcn@latest add https://scrollx-ui.vercel.app/registry/animated-textgenerate.json

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`.