Text Scroll Reveal

A component that reveals text word by word as you scroll, with customizable text and styling.

API

Prop NameTypeDefaultDescription
textstringN/AThe text content to display and reveal word by word during scroll.
classstring""Additional CSS classes to apply to the component for customization.

Component Code

You can copy and paste the following code to create this component:

TextScrollReveal.vue
ScrollWord.vue
Features
  • Scroll-Activated Text Reveal: The component reveals the provided text word by word as the user scrolls, creating an engaging visual effect.
  • Customizable Text Content: Set the text prop to display any text content you wish to reveal during scroll.
  • Smooth Animations: Each word's opacity transitions smoothly based on scroll position, providing a visually appealing experience.
  • Styling Flexibility: Use the class prop to pass additional CSS classes for custom styling.
  • Reactive Design: The component uses Vue's reactivity system to update the scroll progress and word visibility in real-time.
Credits
Text Reveal Card
Mousemove effect to reveal text content at the bottom of the card.
Tracing Beam
A component that renders a tracing beam effect with dynamic scrolling animations and gradient strokes.