Text Generate Effect
Text that generates word-by-word with a blur-to-clear animation.
Preview
Text Generate Effect
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Opening statements and hero taglines.
Why this component matters
The generation effect creates a reading rhythm that ensures users process every word.
Usage guidance
Use for a single headline or tagline. Max 15-20 words. The animation should complete in 2-3 seconds. Trigger on viewport entry, not page load.
Installation
bash
npx shadcn@latest add @aceternity/text-generate-effectUsage
example.tsxtsx
import { TextGenerateEffect } from "@/components/ui/text-generate-effect";
export default function Example() {
return (
<TextGenerateEffect>
{/* Your content here */}
</TextGenerateEffect>
);
}Source
text-generate-effect.tsx
components/ui/text-generate-effect.tsx