Trabalhando com Design & Movimento

## Viabilidade de movimento - <nome da tela>
**Participantes:** Designer, engenheiro, PM (opcional)
**Entradas:** Wireframe ou lo-fi + notas de interação (não pixels finais)
**Dispositivos:** Simulador de iPhone 16 + Pixel 6a ou 8 (Android de baixo custo obrigatório para movimento)
 
### Agenda (30 min)
1. Percorrer o caminho do usuário - 5 min
2. Listar interações - scroll, swipe, elemento compartilhado, teclado - 5 min
3. Classificar cada uma: Estático | API Animated | Reanimated | Nativo - 10 min
4. Sinalizar spikes + fallbacks - 5 min
5. Escrever notas de ticket + gravar clipe de dispositivo de 20s - 5 min

# Preparação do engenheiro - ter o starter do Reanimated em execução
npx expo install react-native-reanimated react-native-gesture-handler
npx expo start
# Abrir o monitor de desempenho no Android: agitar → Mostrar Monitor de Desempenho

## Especificação de movimento: Sucesso do checkout
**Gatilho:** API de pagamento retorna 200
**Entrada:** Escala de checkmark de 0→1, mola (amortecimento 15, rigidez 150), percebido em 400ms
**Saída:** Avanço automático para recibo em 1200ms ou toque em Continuar
**Interrupção:** Gesto de voltar cancela a animação → mostrar recibo imediatamente
**Movimento reduzido:** Pular escala; mostrar checkmark estático + apenas haptic
**Haptic:** notificação de sucesso (iOS); vibração curta (Android)
**Referência:** Não Lottie - desenho vetorial em SVG ou ícone

// 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 - descartável; 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,
  };
}

## Porta de bloqueio de hi-fi
- [ ] Áreas seguras no menor quadro de telefone
- [ ] Estados do teclado documentados
- [ ] Especificação de movimento por transição não estática
- [ ] Variante de movimento reduzido aprovada
- [ ] Quadros de carregamento / vazio / erro existem
- [ ] Tokens usados - sem valores hex órfãos ([Sistemas de Design](../design-systems/design-systems-basics.md))
- [ ] Comentário do engenheiro: nenhum risco ALTO não resolvido sem ticket de spike
- [ ] Clipe de dispositivo de 20s ou QR de pré-visualização anexado

## Plano de movimento em fases
**v1 (sprint N):** Transições estáticas, layout correto, haptics no sucesso
**v1.1 (sprint N+1):** Ações de swipe se o spike for GO
**v2:** Elemento compartilhado - depende da atualização do Router