Magic Card Effect

Magic Card Effect is a button in the UI HUB buttons collection. A card with a radial gradient spotlight that follows the mouse cursor. Creates a premium 'magic' lighting effect that reveals depth beneath the card surface.

The component is driven by 5 documented props (className, gradientSize, gradientColor, gradientOpacity, children), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.

Implementation notes: onMouseMove event with rect-relative coordinates; CSS radial-gradient positioned at mouse; Configurable gradient size and color.

Preview the button in the browser above, copy the source, and paste it into your project. Buttons components in UI HUB are grouped by category so you can compare effects side by side before choosing one.