feat: add micro-animations to TopBar, toasts, settings, and shortcut help

src/components/shortcuts/ShortcutHelpModal.tsx

@@ -1,3 +1,5 @@
+import { motion } from "framer-motion";
+import { springs, staggerContainer, fadeSlideUp } from "@/lib/motion";
 import {
   Dialog,
   DialogContent,
@@ -42,9 +44,14 @@ export function ShortcutHelpModal({ open, onOpenChange }: ShortcutHelpModalProps
           </DialogDescription>
         </DialogHeader>
 
-        <div className="flex flex-col gap-4">
+        <motion.div
+          className="flex flex-col gap-4"
+          variants={staggerContainer(0.06)}
+          initial="hidden"
+          animate="visible"
+        >
           {SHORTCUT_GROUPS.map((group) => (
-            <div key={group.category}>
+            <motion.div key={group.category} variants={fadeSlideUp} transition={springs.bouncy}>
               <h4 className="mb-2 font-mono text-xs font-semibold uppercase tracking-widest text-pylon-text-secondary">
                 {group.category}
               </h4>
@@ -58,9 +65,9 @@ export function ShortcutHelpModal({ open, onOpenChange }: ShortcutHelpModalProps
                   </div>
                 ))}
               </div>
-            </div>
+            </motion.div>
           ))}
-        </div>
+        </motion.div>
       </DialogContent>
     </Dialog>
   );