Split Text Animation for React: Letter Reveal (Free)

Per-character or per-word staggered text reveal, with optional blur and viewport triggering.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add split-text.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Texttext

Split byby

Interval between units (s)stagger

0.03

Duration (s)duration

0.6

Initial offset (px)y

Entrance blurblur

Animation modemode

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<SplitText/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/split-text.en.json

Or, once registries are configured in components.json, install it as @webberui/split-text.

Usage

import { SplitText } from "@/components/ui/split-text";

<SplitText text="Animate everything." className="text-4xl font-bold" />

Props

Prop	Type	Default	Description
`text`	`string`	—	The text to animate
`by`	`"char" \| "word"`	`"char"`	Split unit
`delay`	`number`	`0`	Delay before the reveal starts (seconds)
`stagger`	`number`	`0.03` (`0.12` in tracking)	Interval between units (seconds); in tracking mode, between lines
`duration`	`number`	`0.6`	Duration of a single unit's animation (seconds)
`y`	`number`	`16`	Initial vertical offset (px)
`blur`	`boolean`	`true`	Whether the reveal is accompanied by a blur
`once`	`boolean`	`true`	Play only the first time the element enters the viewport
`immediate`	`boolean`	`false`	Above-the-fold mode: text is opaque from the start, the reveal only animates offset (and blur), and it plays via `animate` instead of waiting for the viewport
`mode`	`"reveal" \| "tracking"`	`"reveal"`	Animation mode; `"tracking"` flips lines in while letter-spacing expands
`trackingFrom`	`string`	`"-0.2em"`	Starting letter-spacing for tracking mode, expands to 0

mode="tracking" splits the text on newlines (\n). Each line flips up from behind a mask (y 100% → 0, opacity 0 → 1) while letter-spacing expands from trackingFrom to 0. The interval between lines is still stagger, which defaults to 0.12 seconds when omitted; by, y and blur have no effect in this mode.

<SplitText
  mode="tracking"
  text={"Less noise.\nMore signal."}
  stagger={0.15}
  className="text-4xl font-semibold"
/>

Accessibility

When the user has "reduce motion" enabled at the system level, the text renders statically; tracking mode also shows the text immediately, keeping line breaks
The container carries an aria-label and the split units are hidden from assistive technology (aria-hidden), so screen readers announce the complete sentence

Split Text Reveal