---
title: "Text Spotlight — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Nabeel · Text. About A text hover effect that reveals a different color through a smooth circular spotlight that follows your cursor - creating a spotlight…"
canonical: "https://framer.elliotli.dev/component/text-spotlight"
---

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

# Text Spotlight

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

![Text Spotlight preview image 1](https://framer.elliotli.dev/og/component/text-spotlight/342dda5664342385/1600x1200.jpg)

## Summary

About A text hover effect that reveals a different color through a smooth circular spotlight that follows your cursor - creating a spotlight kind of effect.

## Description

## About

A text hover effect that reveals a different color through a smooth circular spotlight that follows your cursor - creating a spotlight kind of effect.

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click [here](https://segmentui.com/uikit) to see the full library

## Instructions

1.  Copy and paste the component into your project
    
2.  Customize the appearance:
    
    -   Enter your desired text
        
    -   Choose base and reveal colors
        
    -   Adjust the spotlight size with reveal radius
        
    -   Fine-tune the blur amount for softer/harder edges
        
    -   Set up your preferred font styles
        

Once added, users can hover their cursor over the text to see the spotlight effect follow their movement, revealing the secondary color underneath

## How It Works

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-hvogm9ti-qDgciqqZhHPhnziwwCZcf2jnJkC4CL)

The component comes with several customizable properties:

-   Text content: Your message to display
    
-   Base Color: The main visible text color
    
-   Reveal Color: The color shown in the spotlight
    
-   Reveal Radius: Size of the spotlight circle
    
-   Blur Amount: Softness of the spotlight edge
    
-   Font: Complete typography controlsSupport
    

For any queries and help setting up the component, contact [hello@segmentui.com](mailto:hello@segmentui.com)

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

-   All · #9050

## Details

- **Author**: Nabeel
- **Price**: $9.00
- **Published**: 2025-09-01
- **Updated**: 2025-09-01
- **Added**: 2025-08-18
- **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