← All components
Text / effect
Scroll Reveal
Blurred words settle into place as you move down the page.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Scroll inside the included Demo to see the complete treatment. The main export observes the window unless scrollContainerRef is supplied.
- Uses real GSAP ScrollTrigger, the original positions and0.05s word stagger. Pause disables only this component’s triggers; Replay refreshes at the current scroll position.
- Reduced motion shows settled words. Rich React children remain readable without word splitting.
- The included Demo.tsx and styles recreate the full preview.
React 19gsap@3.15.0
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children (required) | ReactNode | required | Text |
enableBlur | boolean | true | Blur words |
baseOpacity | number | 0.1 | Initial opacity |
baseRotation | number | 3 | Initial rotation |
blurStrength | number | 4 | Blur strength |
scrollContainerRef | RefObject<HTMLElement | null> | undefined | Optional scrollable ancestor. Defaults to the window. |
containerClassName | string | '' | Heading classes. |
textClassName | string | '' | Inner text classes. |
rotationEnd | string | bottom bottom | GSAP ScrollTrigger end expression for the heading rotation. |
wordAnimationEnd | string | bottom bottom | GSAP ScrollTrigger end expression for the word reveal. |
paused | boolean | false | Freeze the current presentation. |
replayToken | number | 0 | Change to replay/reset the component. |