animation

lib/experimental/Utilities/PrivateBox/index.tsx

@@ -1,5 +1,6 @@
 import { usePrivacyMode } from "@/lib/privacyMode"
 import { cn } from "@/lib/utils"
+import { motion } from "framer-motion"
 import { FC, PropsWithChildren } from "react"
 
 export const PrivateBox: FC<PropsWithChildren> = ({ children }) => {
@@ -8,13 +9,22 @@ export const PrivateBox: FC<PropsWithChildren> = ({ children }) => {
   return (
     <div
       className={cn(
-        "inline-flex",
+        "inline-flex ring-1 ring-inset ring-transparent transition-all duration-150",
         enabled &&
-          "select-none overflow-hidden rounded-sm ring-1 ring-inset ring-f1-border-secondary"
+          "select-none overflow-hidden rounded-sm ring-f1-border-secondary"
       )}
       aria-hidden={enabled}
     >
-      <div className={cn(enabled && "opacity-30 blur")}>{children}</div>
+      <motion.div
+        className="h-full w-full"
+        animate={{
+          opacity: enabled ? 0.3 : 1,
+          filter: enabled ? "blur(5px)" : "blur(0px)",
+        }}
+        transition={{ duration: 0.15 }}
+      >
+        {children}
+      </motion.div>
     </div>
   )
 }