use framer motion for doing the text feedback fade-out animation

blame @ashen-dawn for this choice of library i am blindly following their guidance

extension/data/components/TextFeedbackContainer.tsx

@@ -1,3 +1,4 @@
+import {AnimatePresence, motion} from 'framer-motion';
 import {useSelector} from 'react-redux';
 import {RootState} from '../store';
 import {TextFeedbackLocation} from '../store/textFeedbackSlice';
@@ -20,12 +21,18 @@ export function TextFeedbackContainer () {
         } as const;
 
     return (
-        <>
+        <AnimatePresence>
             {currentMessage && (
-                <div id='tb-feedback-window' className={currentMessage.kind} style={style}>
+                <motion.div
+                    id='tb-feedback-window'
+                    className={currentMessage.kind}
+                    style={style}
+                    animate={{opacity: 1}}
+                    exit={{opacity: 0}}
+                >
                     <span className='tb-feedback-text'>{currentMessage.message}</span>
-                </div>
+                </motion.div>
             )}
-        </>
+        </AnimatePresence>
     );
 }

package.json

@@ -23,6 +23,7 @@
         "@reduxjs/toolkit": "^2.1.0",
         "codemirror": "^5.65.15",
         "dompurify": "^3.0.5",
+        "framer-motion": "^11.0.3",
         "iter-ops": "^3.1.1",
         "jquery": "^3.7.1",
         "pako": "^0.2.6",