feat(magicCard): extend with optional orb glow layer

[Yeom-JinHo]

Description

This PR extends the existing MagicCard implementation without changing its public behavior.
It introduces an additional visual variant (orb) while keeping the original gradient-based interaction as the default.

The original pointer-tracking gradient border + inner glow remains intact, and the new mode is implemented as an additive layer approach.

Changes

• Add mode prop
  • mode="gradient" (default): preserves the existing behavior (no visual/API changes for current consumers)
  • mode="orb": adds an extra “orb glow” layer that follows the pointer
• Add orb-only customization props
  • glowFrom, glowTo, glowAngle
  • glowSize, glowBlur, glowOpacity
• Orb animation behavior
  • Uses useSpring to smooth pointer tracking
  • Uses an internal visibility spring to fade the orb in/out on pointer enter/leave
• Theme-aware blend mode
  • Uses next-themes to adjust mixBlendMode for better visibility across dark/light backgrounds
• Hydration guard for motion layer(s)
  • Adds suppressHydrationWarning on motion layers where motion/react style serialization can differ between SSR/CSR

Motivation

• Keep the existing MagicCard as-is for all current usages.
• Provide a more expressive “orb glow” option for marketing/hero-style cards without duplicating the component.

Breaking Changes

• None.

Screenshots

Dark theme

2026-01-20.10.35.11.mov

Light theme

2026-01-20.10.35.53.mov

[vercel]

@Yeom-JinHo is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

[Yeom-JinHo]

@dillionverma
I’ve implemented some additional features on top of the awesome MagicCard you built🚀
If you have time, I’d really appreciate your review!

[dillionverma]

this PR looks amazing I love the new addition and how it looks

just added a couple small comments about the code types, otherwise it looks good to me to merge

[dillionverma]

any reason why we have these optional props here as never?

couldn't this be removed since it's already handled by the other interface?

[Yeom-JinHo]

@dillionverma
I use never intentionally to forbid mode-specific props on the other branch of the discriminated union.

Without never, the union isn’t always strictly exclusive in TypeScript (e.g., with object spreads or values typed wider), so invalid prop combinations can slip through.

never improves DX by:

• making autocomplete mode-specific (no glow* suggestions in gradient mode, no gradient* suggestions in orb mode),
• producing a clear compile-time error if someone accidentally passes a prop for the wrong mode.

If I don’t care about that strictness, I can remove them, but I added never to enforce the API contract and avoid silent misuse.