From be5ec4e2bdc8ce7cb4626c37cffd0c656cf1d00c Mon Sep 17 00:00:00 2001
From: Lilith <lilith@apricot.voyager.nasty.sh>
Date: Sat, 28 Feb 2026 16:26:52 -0800
Subject: [PATCH] =?UTF-8?q?ux(announcements):=20=F0=9F=9A=B8=20Enhance=20A?=
 =?UTF-8?q?nnouncementModal=20usability=20with=20improved=20animations,=20?=
 =?UTF-8?q?accessibility=20features,=20and=20smoother=20dismissal=20flow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
---
 .../announcements/AnnouncementModal.tsx       | 55 ++++++++++++++++++-
 1 file changed, 53 insertions(+), 2 deletions(-)

diff --git a/features/marketplace/frontend-public/src/components/modals/announcements/AnnouncementModal.tsx b/features/marketplace/frontend-public/src/components/modals/announcements/AnnouncementModal.tsx
index fa77e898e..a6c4db3a4 100644
--- a/features/marketplace/frontend-public/src/components/modals/announcements/AnnouncementModal.tsx
+++ b/features/marketplace/frontend-public/src/components/modals/announcements/AnnouncementModal.tsx
@@ -8,7 +8,7 @@
  * by the ResolvedAnnouncement passed as a prop.
  */
 
-import { useCallback, useState, useEffect, type ReactElement } from 'react';
+import { useCallback, useState, useEffect, useRef, type RefObject, type ReactElement } from 'react';
 
 import { useSoundEngine } from '@lilith/ui-effects-sound';
 import { Modal } from '@lilith/ui-feedback';
@@ -28,6 +28,54 @@ const Title = motion.create(S.TitleBase);
 const SlideContainer = motion.create(S.SlideContainerBase);
 const BenefitItem = motion.create(S.BenefitItemBase);
 
+// =============================================================================
+// Mouse Drift Hook
+// =============================================================================
+
+const MAX_DRIFT_PX = 8;
+
+function useMouseDrift(targetRef: RefObject<HTMLElement | null>): void {
+  const rafId = useRef(0);
+
+  useEffect(() => {
+    const el = targetRef.current;
+    if (!el) return;
+
+    // Skip on touch-only devices
+    const hasPointer = window.matchMedia('(pointer: fine)').matches;
+    if (!hasPointer) return;
+
+    const onMouseMove = (e: MouseEvent): void => {
+      cancelAnimationFrame(rafId.current);
+      rafId.current = requestAnimationFrame(() => {
+        const rect = el.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+
+        // Normalize to viewport half-dimensions for consistent feel
+        const halfW = window.innerWidth / 2;
+        const halfH = window.innerHeight / 2;
+        const rawX = (e.clientX - centerX) / halfW;
+        const rawY = (e.clientY - centerY) / halfH;
+
+        // Damped clamp: proportional within ±1, capped at MAX_DRIFT_PX
+        const x = Math.max(-MAX_DRIFT_PX, Math.min(MAX_DRIFT_PX, rawX * MAX_DRIFT_PX));
+        const y = Math.max(-MAX_DRIFT_PX, Math.min(MAX_DRIFT_PX, rawY * MAX_DRIFT_PX));
+
+        el.style.transform = `translate(${x}px, ${y}px)`;
+      });
+    };
+
+    document.addEventListener('mousemove', onMouseMove, { passive: true });
+
+    return () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      cancelAnimationFrame(rafId.current);
+      el.style.transform = '';
+    };
+  }, [targetRef]);
+}
+
 // =============================================================================
 // Orientation Hook
 // =============================================================================
@@ -128,6 +176,9 @@ export const AnnouncementModal = ({
   const [currentSlide, setCurrentSlide] = useState(0);
   const [direction, setDirection] = useState(0);
   const orientation = useOrientation();
+  const iconWrapperRef = useRef<HTMLDivElement>(null);
+
+  useMouseDrift(iconWrapperRef);
 
   const { definition, message, variantKey } = announcement;
   const { colorScheme, badge } = definition;
@@ -253,7 +304,7 @@ export const AnnouncementModal = ({
               animate={{ scale: 1, opacity: 1, rotate: 0 }}
               transition={{ duration: 0.5, ease: 'easeOut', type: 'spring' }}
             >
-              <S.AnnouncementIconWrapper $accentColor={colorScheme.accent}>
+              <S.AnnouncementIconWrapper ref={iconWrapperRef} $accentColor={colorScheme.accent}>
                 <IconComponent size={48} />
               </S.AnnouncementIconWrapper>
               {BadgeIconComponent && (