Gradient Text Reveal
A scroll-based text animation that reveals each word with smooth color transitions, delivering a clean gradient-style effect for visually engaging text highlights.
Made with Workshop
Build your own component with AI
About this Component
Gradient Text Reveal is a smooth, scroll-reactive, character-level text animation component for Framer. Each character transitions from an initial gray tone, through a custom gradient color, to a bold reveal color—perfectly synced with scroll. The result is a fluid, premium typography effect ideal for hero sections, product storytelling, and modern editorial layouts.
Built with Framer Motion, the animation uses per-character windows for a natural staggered flow without delays. Everything stays lightweight, SEO-friendly, and accessible, because the component renders real text rather than outlines or images.
Key Features
Character-level gradient text reveal animation
Smooth scroll-synced motion using Framer Motion
Fully customizable colors (initial → transition → reveal)
Adjustable stiffness, damping, offsets, and window size
Supports any font, weight, size, or alignment
Works perfectly on both light and dark backgrounds
Lightweight, accessible, and SEO-friendly DOM text
Plug-and-play setup — drop it into your canvas and go
Ideal For
Hero sections and landing page intros
Portfolio and agency websites
Product launches and feature storytelling
Editorial scrolling experiences
Typography-focused designs
High-end, motion-driven UI/UX
