From da64fe930bae4c1fe333b364fad104350b933273 Mon Sep 17 00:00:00 2001
From: Story Crater Bot <19826264+Riotpiaole@users.noreply.github.com>
Date: Wed, 2 Sep 2026 10:05:00 -0700
Subject: [PATCH] feat: smooth collapse/expand animation for terminal toggle

---
 components/InteractiveTerminal.tsx | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/components/InteractiveTerminal.tsx b/components/InteractiveTerminal.tsx
index b47abd9..8954e90 100644
--- a/components/InteractiveTerminal.tsx
+++ b/components/InteractiveTerminal.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { motion } from 'framer-motion'
+import { motion, AnimatePresence } from 'framer-motion'
 import { useEffect, useRef, useState } from 'react'
 import { useTerminal } from '@/lib/TerminalContext'
 import ReactMarkdown from 'react-markdown'
@@ -232,23 +232,28 @@ export function InteractiveTerminal() {
   }
 
   return (
-    <motion.div
-      className="fixed bottom-6 right-6 z-40"
-      initial={{ opacity: 0, scale: 0.9 }}
-      animate={{ opacity: 1, scale: 1 }}
-    >
+    <div className="fixed bottom-6 right-6 z-40">
+      <AnimatePresence mode="wait">
       {!isOpen ? (
-        <button
+        <motion.button
+          key="trigger"
           onClick={() => setIsOpen(true)}
           className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-mono text-sm shadow-lg"
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0.9 }}
+          transition={{ duration: 0.2 }}
         >
           Ask Poimen ({isMac ? 'Cmd' : 'Ctrl'}+K)
-        </button>
+        </motion.button>
       ) : (
         <motion.div
+          key="terminal"
           ref={containerRef}
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
+          initial={{ opacity: 0, y: 20, scale: 0.95 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: 20, scale: 0.95 }}
+          transition={{ duration: 0.25, ease: 'easeInOut' }}
           style={{ width: `${width}px`, height: `${height}px` }}
           className={`rounded-lg shadow-2xl flex flex-col border relative ${
             isDark 
@@ -357,6 +362,7 @@ export function InteractiveTerminal() {
           </div>
         </motion.div>
       )}
-    </motion.div>
+      </AnimatePresence>
+    </div>
   )
 }