Rectangular Text Reveal
Scroll through the page to compare each reveal direction in context. Every example below is tuned to feel slightly different, so the component reads like a flexible motion primitive instead of a one-note effect.
Bottom Reveal
Variation 1 demonstrates how the same reveal mechanic can shift tone depending on the travel direction, pacing, and color pairing.
Use the bottom direction when you want the color block to push up through the line, giving larger statements a heavier and more cinematic entrance.
Right Reveal
Variation 2 demonstrates how the same reveal mechanic can shift tone depending on the travel direction, pacing, and color pairing.
This variation works well for supporting paragraphs, callouts, and smaller moments where the reveal should feel precise without overpowering the content around it.
Top Reveal
Variation 3 demonstrates how the same reveal mechanic can shift tone depending on the travel direction, pacing, and color pairing.
Top-to-bottom reveals are helpful when the composition already has strong vertical alignment and you want the animation to reinforce that visual system.
Left Reveal
Variation 4 demonstrates how the same reveal mechanic can shift tone depending on the travel direction, pacing, and color pairing.
It reads quickly, feels familiar, and gives product storytelling sections an energetic but controlled sense of progression as the user scrolls.