Text Spotlight
A text hover effect that reveals a different color through a smooth circular spotlight that follows your cursor - creating a spotlight kind of effect.
Make it with Workshop
Build your own component with AI
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
Copy and paste the component into your project
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
