Magic Card

1"use client"
2 
3import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
4import {
5  motion,
6  useMotionTemplate,
7  useMotionValue,
8  useSpring,
9} from "motion/react"
10import { useTheme } from "next-themes"
11 
12import { cn } from "@/lib/utils"
13 
14interface MagicCardBaseProps {
15  children?: React.ReactNode
16  className?: string
17  gradientSize?: number
18  gradientFrom?: string
19  gradientTo?: string
20}
21 
22interface MagicCardGradientProps extends MagicCardBaseProps {
23  mode?: "gradient"
24 
25  gradientColor?: string
26  gradientOpacity?: number
27 
28  glowFrom?: never
29  glowTo?: never
30  glowAngle?: never
31  glowSize?: never
32  glowBlur?: never
33  glowOpacity?: never
34}
35 
36interface MagicCardOrbProps extends MagicCardBaseProps {
37  mode: "orb"
38 
39  glowFrom?: string
40  glowTo?: string
41  glowAngle?: number
42  glowSize?: number
43  glowBlur?: number
44  glowOpacity?: number
45 
46  gradientColor?: never
47  gradientOpacity?: never
48}
49 
50type MagicCardProps = MagicCardGradientProps | MagicCardOrbProps
51type ResetReason = "enter" | "leave" | "global" | "init"
52 
53function isOrbMode(props: MagicCardProps): props is MagicCardOrbProps {
54  return props.mode === "orb"
55}
56 
57export function MagicCard(props: MagicCardProps) {
58  const {
59    children,
60    className,
61    gradientSize = 200,
62    gradientColor = "#262626",
63    gradientOpacity = 0.8,
64    gradientFrom = "#9E7AFF",
65    gradientTo = "#FE8BBB",
66    mode = "gradient",
67  } = props
68 
69  const glowFrom = isOrbMode(props) ? (props.glowFrom ?? "#ee4f27") : "#ee4f27"
70  const glowTo = isOrbMode(props) ? (props.glowTo ?? "#6b21ef") : "#6b21ef"
71  const glowAngle = isOrbMode(props) ? (props.glowAngle ?? 90) : 90
72  const glowSize = isOrbMode(props) ? (props.glowSize ?? 420) : 420
73  const glowBlur = isOrbMode(props) ? (props.glowBlur ?? 60) : 60
74  const glowOpacity = isOrbMode(props) ? (props.glowOpacity ?? 0.9) : 0.9
75  const { theme, systemTheme } = useTheme()
76  const [mounted, setMounted] = useState(false)
77 
78  useEffect(() => setMounted(true), [])
79 
80  const isDarkTheme = useMemo(() => {
81    if (!mounted) return true
82    const currentTheme = theme === "system" ? systemTheme : theme
83    return currentTheme === "dark"
84  }, [theme, systemTheme, mounted])
85 
86  const mouseX = useMotionValue(-gradientSize)
87  const mouseY = useMotionValue(-gradientSize)
88 
89  const orbX = useSpring(mouseX, { stiffness: 250, damping: 30, mass: 0.6 })
90  const orbY = useSpring(mouseY, { stiffness: 250, damping: 30, mass: 0.6 })
91// … truncated