Mouse Effect Card
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { MouseEffectCard } from "@corew500/ui/mouse-effect-card"
<MouseEffectCard>Content</MouseEffectCard>Variants
mouseEffectCardVariants
| Axis | Values | Default |
|---|---|---|
| variant | defaultprimarysecondary | default |
| size | smdefaultlg | default |
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| pattern | enum | dots | Background pattern type |
| spotlightSize | enum | default | Spotlight size |
| disabled | enum | false | Disable the mouse effect |
| variant | enum | — | — |
| size | enum | — | — |
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