GitHub

Mouse Effect Card

Card with interactive mouse tracking effects

Basic Usage

Loading...

Installation

pnpm add @corew500/ui

Usage

import { MouseEffectCard } from "@corew500/ui/mouse-effect-card"

<MouseEffectCard>Content</MouseEffectCard>

Variants

mouseEffectCardVariants

AxisValuesDefault
variant
defaultprimarysecondary
default
size
smdefaultlg
default

API Reference

Props

PropTypeDefaultDescription
patternenumdotsBackground pattern type
spotlightSizeenumdefaultSpotlight size
disabledenumfalseDisable the mouse effect
variantenum
sizeenum

Accessibility

Keyboard Navigation

  • Content remains fully accessible to keyboard and screen reader users

Additional

  • - Mouse effect is purely decorative and doesn't affect accessibility
  • Effect respects prefers-reduced-motion user preference

Localization

Translatable Content

  • - Pass translated content to child components
  • No built-in text content requiring localization