Premium & Brand

Slide Up Text

Text that slides up from below, staggered by word, character, or line.

Import

tsx

import { SlideUpText } from "@cronus-ui/ui";

bash

npx cronus-ui add slide-up-text

Each word clips up from below on a 0.5s tween, staggered from the first. The full string stays in the a11y tree via an sr-only copy.

tsx

<SlideUpText className="font-display text-3xl text-fg">
  You can just ship things.
</SlideUpText>

Same clip, staggered per grapheme so emoji and flags stay whole.

tsx

<SlideUpText split="characters" className="font-display text-3xl text-fg">
  You just can ship things.
</SlideUpText>

Split on newlines and stack each line as its own clip.

tsx

<SlideUpText split="lines" className="font-display text-3xl text-fg">
  First line
  Second line
  Third line
</SlideUpText>

Stagger runs from the last word back to the first.

tsx

<SlideUpText from="last" className="font-display text-3xl text-fg">
  Animation from last word
</SlideUpText>

Generated from the component's exported types.

Prop	Type	Default	Description
`ref`	`Ref<HTMLSpanElement>`	—	—
`animationRef`	`Ref<SlideUpTextRef>`	—	Imperative start / reset handle (Spell's `ref`).
`children`*	`string`	—	The phrase to reveal. Must be a plain string so it can be split.
`split`	`SlideUpTextSplit`	`"words"`	How the string is broken before staggering.
`delay`	`number`	`0`	Delay (seconds) before the first unit animates.
`stagger`	`number`	`0.1`	Gap (seconds) between consecutive units.
`from`	`SlideUpTextFrom`	`"first"`	Which end of the string the stagger starts from.
`transition`	`AnimationOptions`	`DEFAULT_TRANSITION`	Motion transition for each unit. Defaults to Spell's 0.5s tween.
`wordClass`	`string`	—	Extra classes on each word (or line) clip.
`charClass`	`string`	—	Extra classes on each character clip.
`autoStart`	`boolean`	`true`	Play on mount when `inView` is false.
`onStart`	`() => void`	—	Called when the reveal starts.
`onComplete`	`() => void`	—	Called when the last unit finishes.
`inView`	`boolean`	`false`	Start when the node enters the viewport instead of on mount.
`once`	`boolean`	`true`	When `inView` is true, play only the first time it enters.