Gradient Scroll Text

Gradient Scroll Text
Gradient Scroll Text

About Gradient Scroll Text

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.

From Sanna Granqvist

Highlight Cycling
Melty Gooey Text
Loop Shiny Text
Word Shifter

Related Components

WebGL Text Tunnel
Reveal Text
AutoCover
Diagonal Text Reveal