Cursor Spotlight Shader

Micro Interactions

Subtle radial luminance gradient that dynamically tracks cursor coordinates on cards.

Interactive Live Preview

components/ui/cursor-spotlight.tsxTypeScript · React 19

1// Source code for Cursor Spotlight Shader
2import * as React from "react";
3
4export default function CursorSpotlightShader() {
5  return <div>Cursor Spotlight Shader</div>;
6}

Props & Specification

Prop	Type	Default	Description
variant	Card \| Grid \| Border	Card	Visual state and layout presentation mode.
className	string	""	Optional Tailwind CSS wrapper class overrides.

Related Components in Micro Interactions

Follow Cursor Label↗

Smooth magnetic cursor coordinate follower badge with spring damping.

Magnetic Physics Button↗

Physics spring button that attracts to mouse cursor proximity.

Hover Card Fan Stack↗

Deck of 3D layered cards that smoothly fan out on hover.