Text Char Slide

A per-character slide-left cascade with a cleanly staggered entrance timing.

textslidecharacterheadlineanimationtypographystagger

Overview

Text Char Slide is a React and Tailwind CSS split text animation that slides each character into place in a staggered cascade, in Next.js or any React app, built on Framer Motion. Stagger is duration divided by character count, so short and long headlines finish in the same time. It can wait until the text scrolls into view and play once, the as prop renders a real heading, and screen readers hear the whole string. Split by character, word, or line, and swap in presets like blur or scale. Reduced motion shows the finished text with no cascade.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add text-char-slide

Usage

Import TextCharSlide from @/components/wensity/text-char-slide and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import { TextCharSlide } from "@/components/wensity/text-char-slide";
 2
 3export default function Example() {
 4  return (
 5    <TextCharSlide
 6      as="h1"
 7      text="Slide left by character"
 8      className="font-display text-4xl font-semibold"
 9    />
10  );
11}

Props

Prop	Type	Default	Description
`text`	string	-	The string to animate per character.
`as`	"p" \| "span" \| "div" \| "h1"–"h6"	"p"	Tag rendered as the outer element.
`duration`	number	0.3	Segment duration. Stagger = duration / character count.
`delay`	number	0	Delay before the cascade starts, in seconds.
`startOnView`	boolean	false	When true, wait for viewport entry. When false, play on mount.
`once`	boolean	true	Play only once when using viewport trigger.

Featured in React hero section components.