TextReveal

Reveals text a character at a time as it scrolls into view. Arabic reveals a word at a time, so its letters stay joined.

Installation

bash

npx @smicolon/cli add text-reveal

Run init once per project before adding components. See Installation.

Preview

Word by word

WordReveal reveals a word at a time, with a soft blur. It suits longer lines, in any language.

Joined scripts

Arabic letters join to their neighbours, and a separate element for each letter would break those joins. So when the text contains Arabic, the effect reveals it a word at a time. Latin text keeps the character reveal.

Accessibility

Assistive tech reads the whole text once; the animated pieces are hidden from it.
With prefers-reduced-motion set, the text appears at once.
With triggerOnView, the effect waits until half the text is on screen, then plays once.

Props

Prop	Type	Default	Description
`text`	`string`	—	The text to reveal.
`delay`	`number`	`0.03`	Seconds between one piece and the next.
`duration`	`number`	`0.3`	Seconds each piece takes to appear.
`triggerOnView`	`boolean`	`true`	Waits until the text is on screen.
`WordReveal`	`{ text, delay, duration, triggerOnView }`	—	The same, a word at a time; `delay` defaults to 0.1 and `duration` to 0.4.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

import { TextReveal, WordReveal } from "@/components/ui/text-reveal"

<TextReveal text="Welcome to My store" className="text-4xl font-bold" />

<WordReveal text="Free delivery on every order in Riyadh this week." delay={0.1} />