fix: update spotlight

magicuidesign · Dec 27, 2024 · d0fb347 · d0fb347
1 parent c121a12
commit d0fb347
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 18 deletions.
diff --git a/content/docs/components/magic-card.mdx b/content/docs/components/magic-card.mdx
@@ -50,8 +50,9 @@ npx shadcn@latest add "https://magicui.design/r/magic-card"
 | className       | string          | -         | Additional CSS classes to apply to the card |
 | gradientSize    | number          | 200       | Size of the gradient effect                 |
 | gradientColor   | string          | "#262626" | Color of the gradient effect                |
-| gradientOpacity | number          | -         | Opacity of the gradient effect              |
-| gradientColors  | string[]        | -         | Colors of the gradient effect               |
+| gradientOpacity | number          | 0.8       | Opacity of the gradient effect              |
+| gradientFrom    | string          | "#9E7AFF" | Start color of the gradient border          |
+| gradientTo      | string          | "#FE8BBB" | End color of the gradient border            |
 
 ## Credits
 

diff --git a/registry/default/example/magic-card-demo.tsx b/registry/default/example/magic-card-demo.tsx
@@ -13,14 +13,12 @@ export default function MagicCardDemo() {
       <MagicCard
         className="cursor-pointer flex-col items-center justify-center whitespace-nowrap text-4xl shadow-2xl"
         gradientColor={theme === "dark" ? "#262626" : "#D9D9D955"}
-        gradientColors={["#00ffff", "#0088ff", "#0033cc"]}
       >
         Magic
       </MagicCard>
       <MagicCard
         className="cursor-pointer flex-col items-center justify-center whitespace-nowrap text-4xl shadow-2xl"
         gradientColor={theme === "dark" ? "#262626" : "#D9D9D955"}
-        gradientColors={["#00ffff", "#0088ff", "#0033cc"]}
       >
         Card
       </MagicCard>

diff --git a/registry/default/magicui/magic-card.tsx b/registry/default/magicui/magic-card.tsx
@@ -1,15 +1,16 @@
 "use client";
 
+import { motion, useMotionTemplate, useMotionValue } from "motion/react";
 import React, { useCallback, useEffect, useRef } from "react";
-import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
 
 import { cn } from "@/lib/utils";
 
-export interface MagicCardProps extends React.HTMLAttributes<HTMLDivElement> {
+interface MagicCardProps extends React.HTMLAttributes<HTMLDivElement> {
   gradientSize?: number;
   gradientColor?: string;
   gradientOpacity?: number;
-  gradientColors?: [string, string, string];
+  gradientFrom?: string;
+  gradientTo?: string;
 }
 
 export function MagicCard({
@@ -18,7 +19,8 @@ export function MagicCard({
   gradientSize = 200,
   gradientColor = "#262626",
   gradientOpacity = 0.8,
-  gradientColors = ["#FF0080", "#4096FF", "#78FF78"],
+  gradientFrom = "#9E7AFF",
+  gradientTo = "#FE8BBB",
 }: MagicCardProps) {
   const cardRef = useRef<HTMLDivElement>(null);
   const mouseX = useMotionValue(-gradientSize);
@@ -74,12 +76,9 @@ export function MagicCard({
   return (
     <div
       ref={cardRef}
-      className={cn(
-        "group relative flex size-full rounded-xl backdrop-blur-lg",
-        className,
-      )}
+      className={cn("group relative flex size-full rounded-xl", className)}
     >
-      <div className="absolute inset-0.5 z-10 rounded-xl bg-neutral-100 dark:bg-neutral-900" />
+      <div className="absolute inset-px z-10 rounded-xl bg-neutral-100 dark:bg-neutral-900" />
       <div className="relative z-30">{children}</div>
       <motion.div
         className="pointer-events-none absolute inset-px z-10 rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
@@ -91,17 +90,15 @@ export function MagicCard({
         }}
       />
       <motion.div
-        className="pointer-events-none absolute inset-px rounded-xl duration-300 group-hover:opacity-100"
+        className="pointer-events-none absolute inset-0 rounded-xl duration-300 group-hover:opacity-100"
         style={{
           background: useMotionTemplate`
             radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px,
-              ${gradientColors[0]}, 
-              ${gradientColors[1]}, 
-              ${gradientColors[2]}, 
+              ${gradientFrom}, 
+              ${gradientTo}, 
               transparent 100%
             )
           `,
-          opacity: 1,
         }}
       />
     </div>