Glow Hover Cards

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

Open in v0~8.9 kB

Last updated: March 13, 2026

Design System

Build beautiful interfaces with our comprehensive design system

  • ✓Component library
  • ✓Color palette
  • ✓Typography scale
Explore

Components

Pre-built components ready to use in your next project

  • ✓40+ components
  • ✓Fully customizable
  • ✓TypeScript support
View All

Animations

Smooth, performant animations powered by Framer Motion

  • ✓GPU accelerated
  • ✓Accessible
  • ✓Spring physics
Learn More

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

AttributeElementPurpose
aria-hidden="true"Glow overlayHides the decorative glow overlay from assistive technologies

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

GitHub Stars Animation

Display GitHub stargazers with animated avatars and a countdown star counter. Perfect for hero sections and landing pages.

Gooey Popover

React popover with gooey blob morphing animation powered by SVG filters and GSAP. Create liquid-like menu transitions in minutes.

On this page

Installation
Features
Accessibility
ARIA Attributes
Screen Reader
Reduced Motion
Props

Created by

Edu Calvo's avatar
Edu Calvo

Powered by

motion.dev