Gradient Text Reveal — Smooth scroll-synced title animations

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