ScrollRevealText adds a premium scroll-triggered headline reveal effect to your Framer site. Text animates into view word-by-word or letter-by-letter as the element enters the viewport, creating the kind of polished reveal often used on luxury brand sites, portfolios, agencies, editorial pages, and high-end landing pages.
Reveal text by word or by letter. Choose from four animation styles: fade-up, mask, blur, and scale. Fade-up uses opacity and upward movement for a clean classic reveal. Mask clips each token as it slides upward for a premium editorial feel. Blur creates a focus-pull effect from soft to sharp. Scale pops text in with opacity and size for a more energetic look. Uses IntersectionObserver instead of scroll listeners, keeping the effect efficient and browser-friendly. Staggering is handled with CSS transition delays rather than timer chains. Spaces are preserved as static nodes so animation timing stays clean. Letter mode keeps each word wrapped as a non-breaking unit so letters do not split awkwardly across lines. Unicode-safe letter splitting supports emojis and special characters more reliably. Static rendering shows the final state immediately to prevent flicker in Framer previews or exports. Trigger can fire once or replay whenever the text re-enters the viewport.
Add ScrollRevealText to your Framer canvas and enter your headline or paragraph text in the property panel. Use line breaks to create intentional multi-line layouts. Choose whether the animation splits by word or letter, then select the reveal style. Adjust the trigger threshold, stagger delay, animation duration, start delay, font, text color, alignment, line height, and letter spacing. Use word mode for longer headlines and letter mode for short, dramatic phrases.
Hero headlines, agency landing pages, luxury brand websites, portfolio intros, editorial sections, manifesto copy, product launch pages, case study headings, scrolling storytelling pages, SaaS marketing sections, creative studios, and any Framer project that needs refined animated typography.
ScrollRevealText adds a premium scroll-triggered headline reveal effect to your Framer site. Text animates into view word-by-word or letter-by-letter as the element enters the viewport, creating the kind of polished reveal often used on luxury brand sites, portfolios, agencies, editorial pages, and high-end landing pages.
Reveal text by word or by letter. Choose from four animation styles: fade-up, mask, blur, and scale. Fade-up uses opacity and upward movement for a clean classic reveal. Mask clips each token as it slides upward for a premium editorial feel. Blur creates a focus-pull effect from soft to sharp. Scale pops text in with opacity and size for a more energetic look. Uses IntersectionObserver instead of scroll listeners, keeping the effect efficient and browser-friendly. Staggering is handled with CSS transition delays rather than timer chains. Spaces are preserved as static nodes so animation timing stays clean. Letter mode keeps each word wrapped as a non-breaking unit so letters do not split awkwardly across lines. Unicode-safe letter splitting supports emojis and special characters more reliably. Static rendering shows the final state immediately to prevent flicker in Framer previews or exports. Trigger can fire once or replay whenever the text re-enters the viewport.
Add ScrollRevealText to your Framer canvas and enter your headline or paragraph text in the property panel. Use line breaks to create intentional multi-line layouts. Choose whether the animation splits by word or letter, then select the reveal style. Adjust the trigger threshold, stagger delay, animation duration, start delay, font, text color, alignment, line height, and letter spacing. Use word mode for longer headlines and letter mode for short, dramatic phrases.
Hero headlines, agency landing pages, luxury brand websites, portfolio intros, editorial sections, manifesto copy, product launch pages, case study headings, scrolling storytelling pages, SaaS marketing sections, creative studios, and any Framer project that needs refined animated typography.
Spyridon Merkouris
