Glow Hover Cards

Cards with a glowing hover effect that follows your cursor, creating an interactive spotlight effect.

Installation

npx smoothui-cli add glow-hover-card

Features

• Cursor-following glow effect using CSS mask-image
• Customizable color themes per card (HSL)
• Smooth animations and transitions
• Accessible with reduced motion support
• Performant GPU-accelerated effects

Accessibility

ARIA Attributes

Screen Reader

• The glow overlay is marked as aria-hidden and uses pointer-events: none, ensuring it does not interfere with screen readers or interaction.
• The original card elements remain fully accessible.

Reduced Motion

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the entire glow overlay is not rendered, pointer tracking is disabled, and no will-change hints are applied.

Props

Created by

Edu Calvo

Powered by

motion.dev