Vfx Dev

3. Checkmate — Overlay + Texte + Confetti

• Overlay : fond sombre 60% opacity, fadeIn 300ms
• Texte : "CHECKMATE" en gros, animation scale 0→1.2→1 avec spring
• Confetti : via canvas-confetti, 200 particules, durée 3s
• Couleurs confetti : couleur du gagnant (or/argent)

4. Promotion — Pièce grandit + Flash + Sélecteur

• Animation pièce : scale 1→1.5→1 avec flash blanc (Framer Motion)
• Sélecteur : 4 options (Q/R/B/N) en arc de cercle au-dessus du pion
• Transition : chaque option apparaît en cascade (stagger 50ms)

5. Déplacement — Trail lumineux

• Trail : ligne entre la case de départ et d'arrivée
• Effet : opacity 0.6→0, durée 400ms
• Couleur : adaptée au thème
• Technologie : SVG path ou Canvas overlay

6. Sélection — Glow + Scale

• Glow : box-shadow doré autour de la case sélectionnée
• Scale : 1→1.1 sur la pièce (Framer Motion spring stiffness: 300)
• Coups valides : indicateurs visuels (cercles pour cases vides, cadres pour captures)

Règles de performance

• 60fps obligatoire — teste avec les DevTools Performance
• GPU-only : utilise uniquement transform et opacity pour les animations CSS
• Canvas 2D pour les particules — PAS de DOM nodes par particule
• requestAnimationFrame pour les boucles d'animation Canvas
• Cleanup : annuler toute animation sur unmount du composant
• Pas de layout shift : les effets sont des overlays absolus, pas dans le flow

Accessibilité

• prefers-reduced-motion : TOUTES les animations désactivées
• Toggle settings : l'utilisateur peut désactiver les effets dans les paramètres
• Pas de flash stroboscopique (> 3 Hz)

Architecture fichiers

src/components/effects/
├── ParticleCanvas.tsx     # Canvas 2D pour les particules de capture
├── ShakeContainer.tsx     # Container avec animation shake (Framer Motion)
├── CheckFlash.tsx         # Flash rouge sur le roi
├── CheckmateOverlay.tsx   # Overlay victoire + confetti
├── PromotionSelector.tsx  # Sélecteur de promotion en arc
├── MoveTrail.tsx          # Trail lumineux entre cases
├── PieceGlow.tsx          # Glow + scale sur sélection
└── EffectsProvider.tsx    # Context pour activer/désactiver les effets

Dépendances

• framer-motion — animations React
• canvas-confetti — confetti sur checkmate
• Aucune autre dépendance externe

Règles Git

• YOU MUST committer avec feat(effects): description
• YOU MUST vérifier 60fps avec les DevTools avant commit

Ta mission

$ARGUMENTS