[Animation] - mettre des animations dans le quizz via palette sprites

[TristanHourtoulle]

Problème / Contexte

L'expérience quiz actuelle est statique et manque de feedback visuel engageant pour l'utilisateur. Lors des interactions clés (validation d'une réponse, bonne/mauvaise réponse, transition entre questions, chargement…), l'utilisateur n'a aucun retour visuel ludique. Cela réduit l'aspect gamifié de la plateforme et peut rendre l'attente ou les transitions ennuyeuses, impactant la rétention et le plaisir d'utilisation.

Solution proposée

Intégrer des animations 2D pixel-art basées sur des sprite sheets dans le parcours quiz. Un personnage mascotte (ex: Pingus le pingouin) et des éléments visuels (checkmark, badges "Correct!") sont animés via des palettes de sprites pour accompagner les moments clés du quiz : validation de réponse, bonne réponse, mauvaise réponse, chargement, transition entre questions, et fin de quiz.

Critères d'acceptation

L'utilisateur voit une animation du personnage mascotte lorsqu'il valide une réponse

L'utilisateur voit une animation de célébration (personnage + checkmark/badge) sur une bonne réponse

L'utilisateur voit une animation distincte sur une mauvaise réponse

Les animations sont jouées via des sprite sheets (pas de GIF/Lottie), avec un système de découpage frame-by-frame

Les animations sont fluides et synchronisées avec les événements du quiz (pas de décalage visible)

Les sprites sont lazy-loadés et ne dégradent pas les performances ni le LCP de la page

Le système d'animation est réutilisable pour ajouter facilement de nouvelles animations/sprites à l'avenir

L'expérience reste fonctionnelle et propre si les assets ne chargent pas (graceful fallback)

Tests couverts pour : le rendu du composant sprite, le cycle d'animation (play/stop/reset), le fallback en cas d'erreur de chargement

Maquettes / Références

Sprite sheet de référence fourni (Pingus validation + checkmark + badge "Correct!")

Style visuel : pixel-art, coloré, léger et fun — cohérent avec une identité éducative gamifiée

Inspiration : animations de feedback dans Duolingo, Kahoot, ou les jeux éducatifs rétro

Impact estimé

Complexité: M

Pages concernées: page quiz (gameplay), potentiellement page résultats

Notes techniques

Créer un composant générique qui prend en props : le sprite sheet (image), le nombre de frames, la taille d'une frame, la vitesse (fps), et le mode (once / loop)

Utiliser background-position en CSS animé via steps() ou piloter les frames via requestAnimationFrame pour un contrôle plus fin côté JS

Stocker les sprite sheets dans le dossier /public/sprites/ et définir une config par animation (JSON ou objet TS) contenant les métadonnées (frames, dimensions, fps)

Précharger les sprites critiques (bonne/mauvaise réponse) dès le montage du composant quiz pour éviter un flash au premier déclenchement

Prévoir un système d'événements ou de state machine simple pour synchroniser l'animation avec le cycle de vie du quiz (ex: onAnswerSubmit → playAnimation → onAnimationEnd → nextQuestion)

Les assets doivent être optimisés (PNG compressé, dimensions raisonnables) pour ne pas alourdir le bundle

Penser extensibilité : le système doit permettre d'ajouter facilement de nouveaux personnages ou animations sans refactoring