Text Spotlight

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 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

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