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

Examples

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 2/2Pixel diff 0 pxLogic 1/1Parity scoreboard

characters.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component SlideUpTextCharacters layout:inline style:slide-up-text {
  split:"characters"
  from:"center"
  stagger:0.05
  label "Hello world"
}

page "/audit/slide-up-text/characters" type:custom {
  use SlideUpTextCharacters
}

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component SlideUpTextDefault layout:inline style:slide-up-text {
  label "Ship faster with Cronus"
}

page "/audit/slide-up-text/default" type:custom {
  use SlideUpTextDefault
}

API Reference

Generated from the component's exported types.

SlideUpTextProps

Prop	Type	Default	Description
`ref`	`Ref<HTMLSpanElement>`	—	Ref forwarded to the underlying DOM node.
`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.
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.