Beta

Text Stagger Inview

Splitted text animation with staggered reveal animation triggered by view, You can easily customize by controlling the animation property (transform, opacity, blur) and the stagger value, and the transition.

Open in 21st dev
Stagger Text Inview Demo

Installation

Usage

<TextStaggerInview
  animation={'blur'}
  className="overflow-hidden text-4xl tracking-tight font-bold"
  stagger={0.03}
>
  Stagger Text Inview Demo
</TextStaggerInview>

Waves Example

Open in 21st dev
Let's create a wave with lettersLet's create a wave with letters

Props

PropTypeDefault
as?
ReactNode
span
animation?
left | right | top | bottom | z | blur | default;
default
staggerStart?
first | center | last | number
first
staggerValue?
number
0.02

Text Stagger Hover

Splitted text animation with staggered reveal triggered by hover gesture, You can easily customize by controlling the animation property (transform, opacity, blur) and the stagger value, and the transition.

Text Vertical

Text with vertical display, Can be used as a title or a subtitle.