MouseEffectCard

pnpm add @corew500/ui

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

<MouseEffectCard>
  <MouseEffectCardContent>
    <h3>Interactive Card</h3>
    <p>Move your mouse over this card to see the spotlight effect</p>
  </MouseEffectCardContent>
</MouseEffectCard>

{/* Dot pattern (default) */}
<MouseEffectCard pattern="dots">
  <MouseEffectCardContent>Content</MouseEffectCardContent>
</MouseEffectCard>

{/* Grid pattern */}
<MouseEffectCard pattern="grid">
  <MouseEffectCardContent>Content</MouseEffectCardContent>
</MouseEffectCard>

{/* No pattern */}
<MouseEffectCard pattern="none">
  <MouseEffectCardContent>Content</MouseEffectCardContent>
</MouseEffectCard>

{/* Default */}
<MouseEffectCard variant="default">
  <MouseEffectCardContent>Default variant</MouseEffectCardContent>
</MouseEffectCard>

{/* Primary */}
<MouseEffectCard variant="primary">
  <MouseEffectCardContent>Primary variant</MouseEffectCardContent>
</MouseEffectCard>

{/* Secondary */}
<MouseEffectCard variant="secondary">
  <MouseEffectCardContent>Secondary variant</MouseEffectCardContent>
</MouseEffectCard>

<MouseEffectCard spotlightSize="sm">
  {/* Small spotlight */}
</MouseEffectCard>

<MouseEffectCard spotlightSize="default">
  {/* Default spotlight */}
</MouseEffectCard>

<MouseEffectCard spotlightSize="lg">
  {/* Large spotlight */}
</MouseEffectCard>

<MouseEffectCard size="sm">
  {/* Small padding */}
</MouseEffectCard>

<MouseEffectCard size="default">
  {/* Default padding */}
</MouseEffectCard>

<MouseEffectCard size="lg">
  {/* Large padding */}
</MouseEffectCard>

<MouseEffectCard disabled>
  <MouseEffectCardContent>
    No mouse effect
  </MouseEffectCardContent>
</MouseEffectCard>

import { MouseEffectCard, MouseEffectCardContent } from "@corew500/ui/mouse-effect-card"
import { Button } from "@corew500/ui/button"

function FeatureCard({ feature }) {
  return (
    <MouseEffectCard variant="primary" pattern="dots">
      <MouseEffectCardContent>
        <feature.icon className="h-12 w-12 mb-4 text-primary" />
        <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
        <p className="text-muted-foreground mb-4">{feature.description}</p>
        <Button variant="outline" size="sm">
          Learn More
        </Button>
      </MouseEffectCardContent>
    </MouseEffectCard>
  )
}

function FeaturesGrid() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {features.map((feature) => (
        <FeatureCard key={feature.id} feature={feature} />
      ))}
    </div>
  )
}