perf: opacity adjustments

systemphil · Nov 21, 2024 · 99b9269 · 99b9269
1 parent 413bbb8
commit 99b9269
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/lib/components/ui/CardShellMagic.tsx b/lib/components/ui/CardShellMagic.tsx
@@ -16,7 +16,9 @@ export function CardShellMagic({ children }: { children?: ReactNode }) {
         <div
             className={cn(
                 styles["card-magic"],
-                "h-[35vh] aspect-[4/3] card-magic border hover:border-hidden dark:border-slate-900 bg-gradient-to-b from-gray-50/90 to-gray-100/90 dark:from-neutral-950/90 dark:to-neutral-800/90 rounded-md flex flex-col items-center justify-center"
+                "h-[35vh] aspect-[4/3] card-magic border hover:border-hidden rounded-md flex flex-col items-center justify-center",
+                "dark:border-slate-900 bg-gradient-to-b from-gray-50/90 to-gray-100/90 dark:from-neutral-950/90 dark:to-neutral-800/90",
+                "hover:from-gray-50 hover:to-gray-100 hover:dark:from-neutral-950  hover:dark:to-neutral-800"
             )}
         >
             {children}

diff --git a/lib/components/ui/card.module.css b/lib/components/ui/card.module.css
@@ -24,7 +24,7 @@
     );
     animation: rotate 3s linear infinite;
     opacity: 0;
-    transition: opacity 2s;
+    transition: opacity 1s;
 }
 .card-magic::after {
     filter: blur(3.5rem);