Trabajar con Diseño y Animación

## Viabilidad de animación - <screen name>
**Asistentes:** Diseñador, ingeniero, PM (opcional)
**Inputs:** Wireframe o lo-fi + notas de interacción (no píxeles finales)
**Dispositivos:** Simulador iPhone 16 + Pixel 6a u 8 (Android de bajo rendimiento obligatorio para animación)
 
### Agenda (30 min)
1. Recorrer el flujo del usuario - 5 min
2. Listar interacciones - scroll, swipe, elemento compartido, teclado - 5 min
3. Clasificar cada una: Estático | Animated API | Reanimated | Nativo - 10 min
4. Marcar spikes + fallbacks - 5 min
5. Escribir notas de ticket + grabar clip de dispositivo de 20s - 5 min

# Preparación del ingeniero - tener Reanimated starter funcionando
npx expo install react-native-reanimated react-native-gesture-handler
npx expo start
# Abre Performance monitor en Android: agita - Show Perf Monitor

## Especificación de animación: Éxito en checkout
**Trigger:** Payment API devuelve 200
**Entrada:** Escala del checkmark 0-1, spring (damping 15, stiffness 150), 400ms percibido
**Salida:** Avance automático al recibo a 1200ms o tap Continue
**Interrupción:** Gesto de retroceso cancela animación - mostrar recibo inmediatamente
**Reduced motion:** Omitir escala; mostrar checkmark estático + haptic solo
**Haptic:** notificación de éxito (iOS); vibración corta (Android)
**Referencia:** No Lottie - dibujo de vector en SVG o icono

// theme/motion.ts
export const motion = {
  springSnappy: { damping: 18, stiffness: 220 },
  springGentle: { damping: 22, stiffness: 120 },
  durationFast: 200,
  durationNormal: 300,
} as const;

// spikes/SwipeRowSpike.tsx - descartable; responde GO / NO-GO
import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
 
export function SwipeRowSpike() {
  const translateX = useSharedValue(0);
  const pan = Gesture.Pan()
    .activeOffsetX([-10, 10])
    .onUpdate((e) => { translateX.value = e.translationX; })
    .onEnd(() => { translateX.value = withSpring(0); });
 
  const style = useAnimatedStyle(() => ({ transform: [{ translateX: translateX.value }] }));
 
  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[{ height: 56, backgroundColor: "#eee" }, style]} />
    </GestureDetector>
  );
}

import { useReducedMotion } from "react-native-reanimated";
 
export function useMotionPolicy() {
  const reduced = useReducedMotion();
  return {
    shouldAnimate: !reduced,
    enterDuration: reduced ? 0 : 300,
  };
}

## Compuerta de hi-fi lock
- [ ] Áreas seguras en el frame de teléfono más pequeño
- [ ] Estados de teclado documentados
- [ ] Especificación de animación por transición no estática
- [ ] Variante de reduced-motion aprobada
- [ ] Existen frames de carga / vacío / error
- [ ] Tokens utilizados - sin valores hex huérfanos ([Design Systems](../design-systems/design-systems-basics.md))
- [ ] Comentario del ingeniero: sin riesgo HIGH sin resolver sin ticket de spike
- [ ] Clip de dispositivo de 20s o QR de vista previa adjunto

## Plan de animación en fases
**v1 (sprint N):** Transiciones estáticas, layout correcto, haptics en éxito
**v1.1 (sprint N+1):** Acciones de swipe si spike GO
**v2:** Elemento compartido - depende de actualización de Router