Docs·Kinetic Text Reveal

Kinetic Text Reveal

A polished text reveal that splits copy by words, characters, or lines, then brings each segment in with readable directional motion, soft blur, and configurable stagger timing.

Installation

pnpm dlx shadcn@latest add @componentry/kinetic-text-reveal

Usage

API Reference

PropertyTypeDefault
text

The text content to reveal.

string—
splitBy

How the text is segmented before animation.

"words" | "characters" | "lines""words"
direction

Direction each segment travels from.

"up" | "down" | "left" | "right""up"
distance

Travel distance in pixels for hidden segments.

number20
stagger

Delay in seconds between animated segments.

number0.075
staggerFrom

Origin point for the stagger wave.

"start" | "end" | "center" | "edges" | "random" | number"start"
transition

Framer Motion transition for each animated segment.

Transition—
blur

Whether hidden segments start blurred.

booleantrue
autoPlay

Starts the reveal automatically after mount.

booleantrue
delay

Automatic reveal delay in seconds.

number0
className

Additional CSS classes for the outer element.

string—
segmentClassName

CSS classes applied to each animated text segment.

string—
maskClassName

CSS classes applied to each clipping wrapper.

string—
onRevealStart

Callback fired when the reveal begins.

() => void—
onRevealComplete

Callback fired after the last segment completes.

() => void—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
Interfaces that move with intentInterfaces that move with intent
import { KineticTextReveal } from "@/components/ui/kinetic-text-reveal"
<KineticTextReveal
  text="Interfaces that move with intent"
  className="text-4xl font-bold tracking-tight"
/>