Loading…

Text Effect

beta

Text that animates in by character, word or line — blur, rise, mask, spring, centre-out, phrase builds and a wave, as 19 presets.

Effects & motion
2 files
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add text-effect

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Split Units
In View
Exit
Right To Left

API

Generated from the component's own types, so a prop cannot appear here without existing.

<TextEffect>

Prop	Type	Default
`children` (required) The text. A string, because it is split; use `\n` to separate lines.	`string`	—
`amplitude` wave-text only: peak height of the wave, in pixels.	`number`	`8`
`as` The element to render. Headings keep their role and read as one string.	`TextEffectElement`	`"span"`
`by` Split unit. Defaults to the source's. The phrase builders (kinetic-center-build, short-slide-down, short-slide-right) are always per word: their layout is the effect. Prefer `word` or `line` for joined scripts (Arabic, Devanagari): separate letters cannot join.	`TextEffectUnit`	—
`delay` Milliseconds before the first piece moves.	`number`	`0`
`direction` reveal-text only: the way the text travels as it appears.	`TextEffectDirection`	`"up"`
`duration` Milliseconds each piece takes to enter (or one wave cycle). Defaults to the preset's.	`number`	—
`mode` `enter` brings the text in. `exit` takes it out — with the source's own exit where it had one (the phrase builders), otherwise the entrance played backwards. An exit ends hidden; the sr-only copy remains. Has no effect on wave-text, which is a loop rather than an entrance.	`"enter" \| "exit"`	`"enter"`
`onComplete` Called once the last piece settles. Never called for wave-text.	`() => void`	—
`preset` Which SmoothUI animation to play.	`TextEffectPreset`	`"soft-blur-in"`
`ref`	`Ref<HTMLElement>`	—
`replayKey` Change it to replay. Changing `children`, `preset` or `mode` also replays.	`Key`	—
`stagger` Milliseconds between pieces. Defaults to the preset's.	`number`	—
`trigger` `mount` plays immediately; `in-view` waits until the text first scrolls into view, once. Without IntersectionObserver (or on the server) the text renders at rest.	`"mount" \| "in-view"`	`"mount"`

Plus every attribute of <span> except children, ref, preset, by.

Accessibility

The split pieces are aria-hidden and an sr-only copy carries the whole string, so screen readers read the sentence once, not letter by letter; `as` keeps heading semantics. Nothing is announced on its own: pass aria-live to announce the settled text when `children` changes, never per piece. The motion is decoration — under reduced motion every entrance lands at rest in one frame and the wave stops after one pass, back at rest.

Quality

Measured from the source and its tests at build time.

All scores

7/7

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Prop

Type

Default

children

The text. A string, because it is split; use \n to separate lines.

string

—

amplitude

wave-text only: peak height of the wave, in pixels.

number

8

as

The element to render. Headings keep their role and read as one string.

TextEffectElement

"span"

by

Split unit. Defaults to the source's. The phrase builders (kinetic-center-build, short-slide-down, short-slide-right) are always per word: their layout is the effect. Prefer word or line for joined scripts (Arabic, Devanagari): separate letters cannot join.

TextEffectUnit

—

delay

Milliseconds before the first piece moves.

number

0

direction

reveal-text only: the way the text travels as it appears.

TextEffectDirection

"up"

duration

Milliseconds each piece takes to enter (or one wave cycle). Defaults to the preset's.

number

—

mode

enter brings the text in. exit takes it out — with the source's own exit where it had one (the phrase builders), otherwise the entrance played backwards. An exit ends hidden; the sr-only copy remains. Has no effect on wave-text, which is a loop rather than an entrance.

"enter" | "exit"

"enter"

onComplete

Called once the last piece settles. Never called for wave-text.

() => void

—

preset

Which SmoothUI animation to play.

TextEffectPreset

"soft-blur-in"

ref

Ref<HTMLElement>

—

replayKey

Change it to replay. Changing children, preset or mode also replays.

Key

—

stagger

Milliseconds between pieces. Defaults to the preset's.

number

—

trigger

mount plays immediately; in-view waits until the text first scrolls into view, once. Without IntersectionObserver (or on the server) the text renders at rest.

"mount" | "in-view"

"mount"

Text Effect

Installation

Usage

Examples

API

<TextEffect>

Accessibility

Quality

Used in

Text Effect

Think different.

Installation

Usage

Examples

API

<TextEffect>

Accessibility

Quality

Used in

Think different.

Installation

Usage

Examples

API

<TextEffect>

Accessibility

Quality

Used in

Think different.Think different.

Installation

Usage

Examples

API

<TextEffect>

Accessibility

Quality

Used in

Think different.Think different.

Think different.

Think different.