Installation
Usage
import { ScrollTextRise } from "@/components/ruixen/scroll-text-rise";
export default function App() {
return (
<ScrollTextRise
className="h-[500px]"
text="Built for core web animation, yet open to any prop or pattern your setup requires."
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | - | The text content to reveal word by word (required) |
className | string | "h-[500px]" | Additional CSS classes for the scroll container |
textClassName | string | - | Additional CSS classes for the text paragraph |
Features
- Self-Contained Scroll: The component creates its own scrollable container — page scroll has zero effect, works in previews and iframes
- Staggered Word Animation: Each word has its own scroll range, creating a sequential wave effect
- Dual Transform: Words animate both opacity (0→1) and y-translate (20px→0) for a natural rising feel
- Ghost Text Underlay: Faint 30% opacity text stays visible beneath, providing a preview of what's to come
- Hidden Scrollbar: Scrollbar is hidden for a clean visual — scroll affordance comes from the dimmed text
- Responsive Typography: Text scales across breakpoints from
text-xltotext-[3.1rem]