Spotlight (New)
NewUpdated spotlight effect with mouse-following behavior and gradient glow.
Preview
Spotlight (New)
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Interactive hero sections where the spotlight follows cursor movement.
Why this component matters
The cursor-following behavior creates a direct connection between user input and visual feedback.
Usage guidance
Best for hero sections on desktop. Falls back to a static glow on mobile. Pair with dark backgrounds.
Installation
bash
npx shadcn@latest add @aceternity/spotlight-newUsage
example.tsxtsx
import { SpotlightNew } from "@/components/ui/spotlight-new";
export default function Example() {
return (
<SpotlightNew>
{/* Your content here */}
</SpotlightNew>
);
}Source
spotlight-new.tsx
components/ui/spotlight-new.tsx