Mobile motion patterns

All animation in web/mobile uses the motion package through the shared
presets module src/lib/motion/presets.ts. Components never define their own
durations, easings, or springs.

The presets

Consume via the hook (reduced-motion aware — this is mandatory):

import {useMotionPresets} from "@/lib/motion/presets"

const {sharedAxisPush, sheetSlideUp, crossfade, reduced} = useMotionPresets()

• sharedAxisPush — list → chat navigation (and any parent → child screen
  push). Forward uses custom={1}, back uses custom={-1}; the back
  gesture/button reverses the same preset. Wrap sibling screens in
  <AnimatePresence custom={direction} initial={false}>.
• sheetSlideUp — spring-based bottom sheets (project drawer). Pair with a
  crossfade scrim.
• crossfade — skeleton → content swaps. Skeleton and content must occupy
  identical geometry so the fade causes zero layout shift.

Rules

• Animate navigation, containment, and state swaps — not decoration. No
  attention-seeking motion, no animating properties that trigger layout
  (animate transform/opacity only).
• Reduced motion is not optional. useMotionPresets() returns instant
  variants when prefers-reduced-motion is set; any animation built outside
  the presets module must justify itself in review AND handle reduced motion
  itself (prefer extending the presets module instead).
• Message entrance/streaming (WP3b+): subtle and consistent with the
  playground's feel — entrance is a small fade/rise on the preset tokens; text
  streaming is never per-character animated.
• New shared patterns go INTO presets.ts (one exported preset + doc comment),
  not into a component file.