Aurora Hero Spotlight — React Component

Cursor-reactive spotlight layered over an aurora field for launch heroes.

Hero Sectionshovergradientmarketinggradientpointer

Aurora Hero Spotlight

Animation effects

hovergradient

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

About Aurora Hero Spotlight

The Aurora Hero Spotlight is a cursor-reactive spotlight layered over a flowing aurora gradient background. The spotlight tracks the cursor position using Framer Motion spring physics, creating a depth effect that responds to user interaction in real time. The aurora layer uses stacked CSS radial gradients with blur and animation to simulate shifting northern lights — a visual language that reads as technical and premium. Best for AI products, developer tools, and SaaS launch pages where the first impression needs to communicate sophistication.

Common use cases

  • AI product launch heroes
  • SaaS landing page heroes
  • Developer tool homepages
  • Premium product launch pages