5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T904,

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.

5a:[["$","$L5d",null,{"post":{"id":"019b2af1-2afc-738b-ab18-78bf98140cc0","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"89d06d35-6181-4f34-af74-9dc6d33fcdb1","name":"Hanmiru Lee","slug":"hanmiru-lee","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/89d06d35-6181-4f34-af74-9dc6d33fcdb1/wiyozi58","followed":false,"followsYou":false},"media":[],"resources":[{"id":"mWwKnqB473iCuSwa3FaX","resolved":true,"title":"Gradient Text Reveal","body":"$5e","bodyJson":null,"introduction":"Gradient text that reveals as you scroll","slug":"gradient-text-reveal","author":{"framerUserId":"89d06d35-6181-4f34-af74-9dc6d33fcdb1","name":"Hanmiru Lee","slug":"hanmiru-lee","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/89d06d35-6181-4f34-af74-9dc6d33fcdb1/wiyozi58","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/mWwKnqB473iCuSwa3FaX/gradient-text-reveal-mrFPgURhvt9IJXFt6Z5hUjV08a0sTV","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-11-23T11:57:52.019Z","updatedAt":"2026-05-04T17:24:02.968Z","publishedAt":"2025-12-17T06:13:26.908Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://gradienttextreveal.framer.website/","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_BkKlV0rERjoH0f0w8pWvZifX3IFPOynzNkzHJ1nT4mQ","workshop":true,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"5eyxMCjKKDgtWeWogtWs","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-12-17T06:13:26.908Z","updatedAt":"2025-12-17T06:13:26.908Z","reported":false}}],"$L5f"]

Suggested for you