Spell UI

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

Prop	Type	Default
`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`

Spell UI

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

Prop	Type	Default
`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`