Slide Up Reveal

Text 15

About

Animated text component that reveals content by sliding it up, with configurable word, character, or line splitting and stagger.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Slide Up Reveal to your project and fits it to your theme.

Code

How Slide Up Reveal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import SlideUpReveal from "@/components/ui/slide-up-reveal";

export default function Default() {
  return (
    <div className="flex min-h-[300px] w-full items-center justify-center p-8">
      <SlideUpReveal
        split="characters"
        stagger={0.03}
        className="text-4xl font-semibold tracking-tight sm:text-6xl"
      >
        Howwwwwwww youu doin :)
      </SlideUpReveal>
    </div>
  );
}