Text Generate Effect

Animated text reveal that fades words, characters, or lines into view with optional blur and upward motion.

Motion Effectsspringlayouttypographyherostaggerrevealmotion

Build elegant interfaces that feel alive, readable, and deeply polished from the very first impression.

Playground

Adjust the important props for this component and grab JSX that matches your choices.

text

Text content to animate.

mode

Animation segmentation mode.

delay

Initial delay before first segment appears.

duration

Per-segment animation duration in seconds.

stagger

Delay between segment animations in seconds.

blur

Applies blur-to-clear transition.

once

With viewport trigger, animate only once.

Semantic element used as root.

Generated JSX

Copy this into your page.

<TextGenerateEffect
  text=""
  mode="word"
  delay={0}
  duration={0.48}
  stagger={0.06}
  blur={true}
  once={true}
  as="p"
/>

springlayout

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.