Gradient Text Reveal

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

✨ How It Works

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.

🎯 Key Features

• 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

💡 Ideal For

• 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

📦 What You Get

• Gradient Text Reveal component

• Full property panel with all customization options

• Drop-in setup — no code editing required

💬 Support

Need help? Email support@luminacle.com — we'll get back to you within 24 hours.

🔄 Refund Policy

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.