Gradient Scroll Text: Premium Interactions Component by Sanna Granqvist

Marketplace Components Categories Interactions

Gradient Reveal Text is a Framer component that reveals text as it enters the viewport, while a vivid gradient streak moves through each line. Built for hero headlines and strong typographic moments where you want visible impact, not subtle decoration.

About this Component

Gradient Text Reveal is a scroll-driven text animation component for Framer.

It reveals text progressively as the component moves through the viewport.
Each word or character transitions through multiple colors (initial -> transition1 -> transition2 -> transition3 -> final).
Reveal can run left-to-right or right-to-left.
Motion can use spring smoothing and replay in both scroll directions (or only progress forward).
It has presets (fast, balanced, cinematic) plus custom tuning for stiffness, damping, and windowSize.
It supports performance fallback by switching to word-based animation for large text or when performance mode is enabled.
It respects prefers-reduced-motion and renders a non-animated final state.
Layout is responsive-friendly (width: 100%, wrapping enabled, newline preservation via whiteSpace: "pre-wrap").

In short: it’s a customizable “gradient sweep text reveal on scroll” component designed for strong visual impact with controllable motion and safe fallbacks.