Scroll reveal
Text that fills in word by word as you scroll it into view.
Behaviour
- Every word starts faint and turns solid in reading order.
- Finishes when the text is centred on screen.
- Reduced motion: the whole text is solid.
Props
| Prop | Type | Description |
|---|---|---|
| text | string | The text to reveal. |
| className | stringdefault text-4xl … lg:text-7xl | Size and weight of the text. |
| offset | [string, string]default ["start 0.8", "start 0.15"] | When the fill starts and ends, as scroll offsets. |
| container | RefObject<HTMLElement> | Follow a scrolling box instead of the page. |
Installation
npx shadcn@latest add https://purrfectui.com/r/scroll-reveal.jsonHow to use
import { ScrollReveal } from "@/components/ui/scroll-reveal";
<ScrollReveal text="Scroll and the words fill in, one after another." />Source code
Loading…
Credits
Ported from armour.vaibhavtomar.com.
License
MIT. Copy it into your project and change it as you like.