Advanced Text Reveal

✨ Text Reveal with Media & Gradients

Bring your typography to life with animated word-by-word reveals, dynamic gradients, and inline media embeds. Perfect for hero sections, storytelling, or any scroll-based interaction that needs a wow factor.

🔥 Key Features

• Word-by-Word Scroll RevealEach word fades in smoothly as you scroll, creating cinematic storytelling moments.

• Custom Gradients Per WordApply unique multi-color animated gradients to specific words. Control angle, speed, and color stops for maximum flexibility.

• SVG Masking Shapes for MediaInsert images or videos inline with text and mask them into over 15 creative shapes:

  • Circle, Rounded, Square

  • Diamond, Hexagon, Octagon, Pentagon

  • Star, Triangle, Heart

  • Trapezoid, Parallelogram, Cross

  • Cloud, Wave, Infinity, Flower

• Video Upload SupportDrop in an MP4, MOV, or WebM video to seamlessly replace words with live motion content.

• Dynamic Line Height ControlMaintain full typography control with adjustable line-height and font settings.

• Gradient Motion AnimationGradients automatically animate across words with smooth shifting for a modern, energetic feel.

⚙️ Full Customization

• Choose which words are plain, gradient, or media.

• Assign multiple gradient styles to different words.

• Control scroll timing with reveal start & end offsets.

• Fine-tune font, size, color, and spacing directly in Framer.

Understanding the Properties & How They Work

1. Text-The text you want to animate. Each word will fade in individually as you scroll.

2. Font- Choose any font, size, and weight from your Framer font settings to match your project’s style.

3. Text Color-Sets the default color for words that don’t have gradient effects applied.

4. Line Height-Adjusts the vertical spacing between lines of text. Helps fine-tune text layout and readability.

5. Reveal Start-Controls when the word animation begins relative to scroll position.

   • Higher values (e.g. 0.9) mean the reveal starts later — closer to the bottom of the viewport.

   • Lower values (e.g. 0.5) mean it starts earlier — higher up on the screen.

6. Reveal End- Controls when the word animation finishes.

   • Lower values (e.g. 0.1) make the animation complete faster.

   • Higher values (e.g. 0.4) make the reveal slower and longer during scroll.

7. Gradients- Assign animated gradients to specific words.

   • Word Index: Choose which word (starting from 0) gets the gradient.

   • Colors: Add multiple colors for the gradient transition.

   • Angle: Set the gradient direction (0–360°).

   • Speed: Control how fast the gradient shifts across the word.

8. Media- Insert images or videos inline with your text. Perfect for adding logos, icons, or short motion clips.

   • Image / Video: Upload your media (supports MP4, MOV, or WebM).

   • Word Index: Choose after which word the media appears.

   • Shape: Pick from 15+ creative masking shapes like Circle, Star, Heart, Cloud, etc.

   • Rotation: Slightly rotate the media for a more dynamic look.

   • Width & Height: Adjust the media size.

   • Roundness: Control corner roundness when using the “Rounded” shape.