[feat] video setting panel and mock

src/components/window/Card.tsx

@@ -1,4 +1,5 @@
 import { cn } from "@heroui/react"
+import { motion } from "framer-motion"
 import type { ReactNode } from "react"
 
 interface CardProps {
@@ -10,7 +11,11 @@ interface CardProps {
 
 const Card = ({ children, className, ...props }: CardProps) => {
   return (
-    <div
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.3}}
       className={cn(
         "dark:bg-white/[3%] dark:border-white/[6%] px-3 py-3 flex flex-col gap-2.5 border w-full rounded-lg bg-white/40 border-black/[6%]"
       , className)}
@@ -18,7 +23,7 @@ const Card = ({ children, className, ...props }: CardProps) => {
       {...props}
     >
       {children}
-    </div>
+    </motion.div>
   )
 }