Word Cascade Text Animation
A text component that gracefully unveils each word in sequence, creating a flowing, cascading reading experience.
Pumki UIPumki UI With Cascade Effect
Installation
Usage
1import { WordCascadeText } from '@/components/pumki-ui/text/word-cascade';1<WordCascadeText text="Ansh Singh Sonkhia" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
transition? | Transition | { type: 'spring', bounce: 0, duration: 2, delay: 0.5 } | Framer Motion transition config |
text | string | - | Text to animate |
spacing? | number | string | 5 | Space between words |
inViewOnce? | boolean | true | Animate only once when in view |
inViewMargin? | string | 0px | Margin for in-view detection |
inView? | boolean | false | Force animation in view |
delay? | number | 0.5 | Delay before animation (seconds) |
duration? | number | 2 | Animation duration (seconds) |
className? | string | - | Custom class name |
Last updated on