Text Scroll Reveal
A component that reveals text word by word as you scroll, with customizable text and styling.
API
| Prop Name | Type | Default | Description |
|---|---|---|---|
text | string | N/A | The text content to display and reveal word by word during scroll. |
class | string | "" | Additional CSS classes to apply to the component for customization. |
Component Code
You can copy and paste the following code to create this component:
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
textprop 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
classprop 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
- Ported from Magic UI Text Reveal.