build69
Sign inGet API key
build69  /  Components  /  Motion — Text Animations  /  SlideUpText

SlideUpText

v1.0.1Updated 21 Jul 2026

Reveals a sentence word-by-word, with each word climbing up from below the baseline into place. Wraps the MagicUI TextAnimate primitive with animation="slideUp" and applies a tight leading-[1.1] so large display headings do not clip. Under prefers-reduced-motion it renders the text plainly with no animation.

View source← Back to catalog

Preview

Live · 4 stories
Slide Up OnlyOpen ↗
▸Why this is recommendedanimationtextslidereveal+5

SlideUpText — only.

Recommended for+14
  • ✓Hero headlines where each word should rise into place
  • ✓Cascading a feature bullet list in one row at a time
  • ✓Section titles that should feel like they lift into view
  • ✓Pricing or testimonial cards revealing their heading on entrance
Tags+6
animationtextsliderevealstaggermotionmarketingheroheadline
Features+4
  • Word-by-word slide-up reveal with a per-word stagger
  • `delay` sets the gap between words in ms (default: 100)
  • `initialDelay` lets you cascade several instances into a staggered list
  • Ships tight `leading-[1.1]` so tall display headings stay unclipped
  • Respects prefers-reduced-motion by rendering static text
Not recommended for−2
  • ✕Long-form body copy or article text
  • ✕Text that re-renders frequently from state
  • ✕Tight containers where overflow is clipped mid-animation

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "SlideUpText" })

Usage

import { SlideUpText } from '@/components/motion/animated-text/slide-up-text';

<ul className="flex flex-col gap-2">
  {bullets.map((bullet, i) => (
    <li key={bullet}>
      <SlideUpText text={bullet} delay={70} initialDelay={i * 120} />
    </li>
  ))}
</ul>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
text

The sentence to reveal; split on whitespace into words.

stringyes
delay

Delay between words in ms (default: 100).

number—
initialDelay

Delay in ms before the first word appears (default: 0). Stagger this across siblings to cascade a list.

number—
className

Classes merged onto the rendered inline span.

string—

Related

Platform docsAll componentsSource files