Desktop optimized

Please maximize your browser window or use a larger screen to explore the component library.

Go to home

Manifesto Text Reveal

A premium scrollytelling text reveal component. Fades text in word-by-word or character-by-character, utilizing scroll momentum and optional DOM pinning to create a cinematic reading experience.

Last Modified:Aug 17, 2026

Install

CLI

manifesto-text-reveal
$pnpm dlx shadcn@latest add https://ui.satisium.com/r/manifesto-text-reveal.json

Or install a specific demo variant:

manifesto-text-reveal-demo
$pnpm dlx shadcn@latest add https://ui.satisium.com/r/manifesto-text-reveal-demo.json

Manual

1. Install Dependencies

Dependencies
$pnpm add gsap @gsap/react clsx tailwind-merge

2. Add Source Code

Props

PropTypeDefaultDescription
textstringRequiredThe full string of text to reveal.
asReact.ElementType"p"The HTML tag to render as.
scrubboolean | number1If false, plays once. If a number, ties to scroll with inertia.
splitLevel"word" | "character""word"Whether to split and animate by word or individual character.
inactiveOpacitynumber0.2The opacity of the text before it fills in.
pinbooleanfalseIf true, pins the text in place while revealing (Apple-style scrollytelling).
triggerStartstring"top 80%"GSAP ScrollTrigger start point.
triggerEndstring"bottom 50%"GSAP ScrollTrigger end point.