Scroll Reveal Paragraph
Animated React scroll-reveal paragraph component with viewport-triggered fade and translate animations using Intersection Observer.
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 for React with character-by-character reveal and looping. Ideal for hero sections and AI chat UIs.