Scroll Reveal Text

Pro

A paragraph whose words light up one by one as the reader scrolls through it.

Scroll inside this box

Good interfaces feel like good games. Every tap answers back, every screen rewards curiosity, and every detail is there because someone tuned it until it felt right.

Customize

Text

Dim opacity0.15

Installation

Scroll Reveal Text is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy scroll-reveal-text.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

import { ScrollRevealText } from "@/components/ui/scroll-reveal-text";

<ScrollRevealText
  text="Good interfaces feel like good games. Every tap answers back."
  dimOpacity={0.15}
  className="text-4xl font-bold"
/>

Props

4 properties

Property	Type	Default	Description
text	string	—	The paragraph, split into words.
dimOpacity	number	0.15	Opacity of words that have not been reached yet.
scrollContainerRef	RefObject<HTMLElement \| null>	—	The element that scrolls, when it is not the window. Give it position: relative.
className	string	—	Extra classes for the paragraph.

Dependencies: motion