Text Effect
Reveal text by staggering words or characters (fade / blur / slide).
Import
tsx
import { TextEffect } from "@cooud-ui/ui";
bash
npx cooud-ui add text-effect
Examples
API Reference
Generated from the component's exported types.
TextEffectProps
Extends Omit<React.HTMLAttributes<HTMLElement>, "children">
| Prop | Type | Default | Description |
|---|---|---|---|
children* | string | — | The text to reveal. Must be a plain string so it can be split into words or characters — pass interpolated values as a single template string, not as child nodes. |
per | TextEffectPer | "word" | Split granularity. `"word"` (default) staggers words; `"char"` staggers letters. |
preset | TextEffectPreset | "blur" | Which enter animation each unit plays. Defaults to `"blur"`. |
as | React.ElementType | — | The rendered wrapper element/tag (e.g. `"h1"`, `"span"`). Defaults to `"p"`. The wrapper itself is not animated — it carries the accessible label while inner `motion.span`s do the animating. |
delay | number | 0 | Delay (seconds) before the first unit animates. Defaults to `0`. |
stagger | number | — | Time (seconds) between consecutive units. Defaults to `0.04` for words and `0.02` for characters. |
duration | number | 0.4 | Per-unit animation duration (seconds). Defaults to `0.4`. |
trigger | TextEffectTrigger | "inView" | `"inView"` (default) animates once when the element scrolls into view; `"mount"` animates immediately on mount. |
reducedMotion | "user" | "always" | "never" | "user" | How `prefers-reduced-motion` is honoured. Defaults to `"user"` (render the text statically for users who opt out). Pass `"never"` to always play the stagger — e.g. a showcase that must demonstrate it — or `"always"` to force the static render. |