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
Text-The text you want to animate. Each word will fade in individually as you scroll.
Font- Choose any font, size, and weight from your Framer font settings to match your project’s style.
Text Color-Sets the default color for words that don’t have gradient effects applied.
Line Height-Adjusts the vertical spacing between lines of text. Helps fine-tune text layout and readability.
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.
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.
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.
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.
Kunal Bats
