Text Effect

Reveals text word by word, letter by letter or line by line, with blur, slide, scale or fade presets.

Motion

Playground

Tweak the props, the preview and the code follow.

Props

text

per

preset

stagger0.08

delay0

import { TextEffect } from "@/components/ui/text-effect"

<TextEffect>
  Interfaces that feel alive
</TextEffect>

npx @plumsydev/plum-ui add text-effect

import { TextEffect } from "@/components/ui/text-effect"

<TextEffect per="word" preset="blur">
  Ship interfaces people remember.
</TextEffect>

Switch preset and granularity — the effect replays on every change.

Pair it with TextShimmer for an AI response that thinks, then flows in.

When should I use a spring instead of an easing curve?

Press send to get an answer.

per="line" with trigger="inView" for quotes and long-form copy.

Prop	Type	Default
`children*` The text to animate.	`string`	`—`
`per` Granularity of each animated segment.	`"word" \| "char" \| "line"`	`"word"`
`preset` Entrance style of each segment.	`"fade" \| "blur" \| "slide" \| "scale"`	`"blur"`
`as` Element to render.	`"p" \| "span" \| "div" \| "h1" \| "h2" \| "h3"`	`"p"`
`delay` Seconds before the first segment.	`number`	`0`
`stagger` Seconds between segments (0.03 char, 0.08 word, 0.16 line).	`number`	`per-dependent`
`trigger` Play immediately or when scrolled into view.	`"mount" \| "inView"`	`"mount"`
`once` With `inView`, only play the first time.	`boolean`	`true`
`segmentClassName` Classes applied to each segment.	`string`	`—`
`onComplete` Called when the last segment has landed.	`() => void`	`—`

Screen readers get the full sentence through aria-label; the animated segments are hidden from assistive tech.
Change the key to replay the animation.
With reduced motion, segments simply fade in together.