Motion

Enter/exit transitions, staggering, and contextual icon cross-fades — the principles, cross-platform. This file gives a Web snippet (CSS / Tailwind / GSAP) and a Mobile snippet (Reanimated) for each pattern. No motion library — the web stack here is plain CSS/Tailwind for state transitions and GSAP for sequenced/staggered motion; there is no framer-motion/motion.div. For the full mechanics of each engine, defer to the sibling skills: skills/web/animations/gsap (timelines, ScrollTrigger, SplitText, stagger) and skills/mobile/animations/reanimated (shared values, animated styles, layout animations).

One value applies everywhere: spring bounce / bounciness must be 0. These interfaces don't overshoot.

Blur on mobile: CSS filter: blur() animates cheaply on the web. React Native has no animatable blur on arbitrary views — Reanimated can't tween a blur on a View/Text. On native, treat the blur(4px)→0 step as best-effort: either omit it (opacity + translateY alone read great) or overlay an expo-blur BlurView and animate its intensity. Never block a mobile animation on blur.

Interruptible Animations

Users change intent mid-interaction; motion must retarget toward the latest state, not restart.

Web — Transitions vs. Keyframes