Scroll Text Rise

The Scroll Text Rise component animates text upward as the user scrolls, creating a reveal effect where words or lines rise into view from below. It's self-contained with its own scroll handling, making it drop-in ready without external scroll libraries.

Created by

Installation

npx shadcn@latest add https://21st.dev/r/ruixen.ui/scroll-text-rise

import { ScrollTextRise } from "@/components/ui/scroll-text-rise";

export default function DemoOne() {
  return (
    <ScrollTextRise
      className="h-[500px] rounded-xl"
      text="Built for core web animation, yet open to any prop or pattern your setup requires."
    />
  );
}

Dependencies