Spotlight Text — Cursor driven spotlight text effect

SpotlightText adds a smooth circular spotlight hover effect that follows your cursor, revealing a secondary color layer beneath the text. It creates a clean, interactive highlight perfect for hero sections, call to actions, and portfolio titles.

This component is lightweight and highly customizable. You can control the spotlight size, easing style, text color layers, and typography to match any design. It is ideal for designers who want subtle premium motion without heavy animation.

Key Features

• 🔆 Circular spotlight hover effect that tracks the cursor

• 🌀 Smooth motion with adjustable easing

• 🎨 Customizable spotlight size and color layers

• 📱 Fully responsive and performance optimized

• 🧩 Works with any Framer layout

• ✍️ Full font and typography control

Best For

• 🖥️ Hero text and interactive headlines

• 🎨 Portfolios or creative sites

• 🧊 Minimalist layouts needing subtle motion

• 🏷️ Highlighting product names or taglines