A scroll-reactive Framer component that reveals text character-by-character with smooth gradient color transitions — perfect for hero sections, product storytelling, and editorial layouts.
🔗 Live preview: https://gradienttextreveal.framer.website
As users scroll, each character transitions through three colors: an initial muted tone, a custom gradient mid-color, and a bold reveal color. The animation is per-character with natural staggered timing, creating a fluid wave-like reveal that feels organic, not mechanical.
Built with Framer Motion. Renders real DOM text — fully accessible, SEO-friendly, and lightweight.
Character-level reveal synced to scroll position
Three-color gradient transitions (initial → mid → reveal)
Customizable spring physics — stiffness, damping, offsets
Adjustable reveal window size for tighter or wider waves
Works with any font, weight, size, or alignment
Looks great on both light and dark backgrounds
No images or SVG outlines — renders as real text
Hero sections and landing page intros
Portfolio and agency websites
Product launches and feature storytelling
Editorial and long-form scroll experiences
Typography-focused brand identities
Gradient Text Reveal component
Full property panel with all customization options
Drop-in setup — no code editing required
Need help? Email support@luminacle.com — we'll get back to you within 24 hours.
As this is a digital product, all sales are final. Once purchased, the component cannot be returned. If you experience a technical issue, contact support and we'll work to resolve it.
Made by Luminacle — interactive components for Framer.
Hanmiru Lee
