GitHub
Open Github

Slide Up Text

Text animation that slides up from bottom with stagger effect.

Installation

pnpm dlx shadcn@latest add @spell/slide-up-text

Examples

Split By

From

Usage

import { SlideUpText } from "@/components/slide-up-text";
<SlideUpText>Your text here</SlideUpText>

Props

PropTypeDefault
children
React.ReactNode
-
split
'words' | 'characters' | 'lines'
words
delay
number
0
stagger
number
0.1
from
'first' | 'last' | 'center'
first
transition
AnimationOptions
{ type: 'tween', ease: [0.625, 0.05, 0, 1], duration: 0.5 }
autoStart
boolean
true
className
string
-
wordClass
string
-
charClass
string
-
onStart
() => void
-
onComplete
() => void
-
inView
boolean
false