Component / Text

Text Reveal

Reveal text by line, word, or character while preserving one coherent accessible name and restoring the original markup on cleanup.

Reduce motion

Preview / words

Motion should explain what changed.

Delivery contract

pnpm add easecraft@0.1.0

The component imports stable APIs from easecraft.

Package usage

import { TextReveal } from "easecraft";

<TextReveal as="h2" split="words" preset="fade-rise">
  Motion should explain what changed.
</TextReveal>

Typed contract

Prop	Type	Default	Purpose
children	string	required	Readable source text
as	HTML tag	"span"	Semantic host element
split	"lines" \| "words" \| "characters"	"words"	Animated unit
preset	"fade" \| "rise" \| "fade-rise"	"fade-rise"	Reveal behavior
duration	duration token \| number	"normal"	Per-unit duration in ms
distance	distance token \| number	"medium"	Spatial travel in px
stagger	stagger token \| number	"normal"	Delay between units
easing	easing token \| string	"enter"	Anime.js easing
delay	number	0	Initial delay in ms
onComplete	() => void	none	Completion notification

Release requirement

Screen readers: Receive one hidden semantic clone; animated visual units are aria-hidden.
Reduced motion: Skips text splitting and uses a short opacity-only transition.
Server rendering: Outputs the original readable text before client-side enhancement.
Cleanup: Restores the original HTML and removes scoped animation styles.