---
title: "Text Illuminate — Free Framer component · Best of Framer"
description: "Free Framer component · by Aidan Looker · Text. What is Text Illuminate?"
canonical: "https://framer.elliotli.dev/component/text-illuminate"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Text Illuminate

# Text Illuminate

Luminous gradient text reveal animation.

[View on Framer](https://framer.com/marketplace/components/text-illuminate/?via=elliot-li)

![Text Illuminate preview image 1](https://framer.elliotli.dev/og/component/text-illuminate/c3818bfc3c3f80db/1600x1200.jpg)

## Summary

What is Text Illuminate?

## Description

## What is Text Illuminate?

Text Illuminate is a per-character gradient sweep animation. A luminous wave travels across your text, painting each letter from top to bottom with a glowing accent edge before settling into the final colour. Ideal for hero sections, feature headings, call-to-action lines, and anywhere a premium text entrance adds visual impact.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Per-character gradient sweep reveal using a luminous accent edge that travels through each letter individually
    
-   Five curated colour themes — Midnight, Ember, Ocean, Aurora, and Monochrome — plus full custom palette support
    
-   Glow flash burst on character arrival that fades smoothly to a subtle steady glow
    
-   Four stagger directions — Left to Right, Right to Left, Center Out, and Random — for varied reveal patterns
    
-   Three trigger modes — On View, On Hover, and Loop — with seamless looping and configurable pause duration
    

## Controls inside Framer

### Theme

-   Theme preset selector with five options plus Custom
    
-   Text colour and accent colour pickers (visible in Custom mode)
    

### Reveal

-   Trigger mode (On View, On Hover, Loop)
    
-   Stagger direction (Left to Right, Right to Left, Center Out, Random)
    
-   Per-character stagger delay
    
-   Per-character sweep duration
    
-   Loop pause duration
    

### Glow

-   Glow toggle (On / Off)
    
-   Glow intensity radius
    

### General

-   Text content with multiline support
    
-   Font family and weight
    
-   Font size
    
-   Text alignment (Left, Center, Right)
    
-   Hover Lift toggle
    

## Best use cases

-   Hero headlines and landing page headings that need a premium first impression
    
-   Portfolio and agency sites where kinetic typography sets the creative tone
    
-   SaaS feature sections and product launch pages to draw attention to key messaging
    
-   Looping display text for event pages, waitlists, and coming-soon screens
    

Elevate your headlines from static to cinematic. Drop Text Illuminate and have a polished, looping text animation running in seconds.

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [contact@teampixel.com.au](mailto:contact@teampixel.com.au).

## Rank history [How rankings work →](/terms#rankings)

-   All · #4491

## Details

- **Author**: Aidan Looker
- **Published**: 2026-03-30
- **Updated**: 2026-06-13
- **Added**: 2026-03-19
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing