From 11e58adb987704ad39dd41fe4e245621221b6ebb Mon Sep 17 00:00:00 2001
From: Dani Moreno <96433370+dani-moreno@users.noreply.github.com>
Date: Fri, 29 Nov 2024 12:59:45 +0100
Subject: [PATCH] animation

---
 lib/experimental/Utilities/PrivateBox/index.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/lib/experimental/Utilities/PrivateBox/index.tsx b/lib/experimental/Utilities/PrivateBox/index.tsx
index 1ae0da33a..e4f55cf6d 100644
--- a/lib/experimental/Utilities/PrivateBox/index.tsx
+++ b/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>
   )
 }