Scroll Reveal Paragraph
Reveal paragraphs as they enter the viewport with subtle motion and fade.
Installation
npx smoothui-cli add scroll-reveal-paragraphFeatures
- Reveal on scroll with smooth fade and translate
- Per-paragraph stagger for long-form content
- Configurable thresholds and offsets
- Built with Framer Motion + Intersection Observer
- Accessible and performant
Accessibility
Screen Reader
- The component renders as a semantic
pelement, preserving paragraph structure for assistive technologies. - Each word is wrapped in a
spanfor animation purposes, but the text content remains fully readable.
Reduced Motion
This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, all words are displayed at full opacity immediately without the scroll-driven reveal effect. The ghost text overlay used for the reveal effect is also hidden.
Props
Scramble Hover
Animated text scramble effect on hover for React. Creates playful, Matrix-style character animations with customizable speed and duration. Built with Motion.
Typewriter Text
Animated typewriter text effect for React with character-by-character reveal and looping support. Ideal for hero sections, landing pages, and AI chat interfaces.