Decathlon « Deal Frenzy / Cơn Lốc Deal » : un jeu WebAR à filtre facial partageable
Decathlon Vietnam voulait un jeu-filtre AR viral pour TikTok/Instagram. Mais Meta a tué les filtres AR tiers en 2025. Voici comment Code Crush a livré le même jeu d'attrape à face-tracking et bonus de groupe en WebAR partageable — avec MediaPipe, sans app ni gatekeeper de plateforme.
Code Crush Team
Gamification Agency
Le projet
Deal Frenzy — Cơn Lốc Deal (« Cyclone de deals ») est le second de deux concepts de gamification que Code Crush a prototypés pour Decathlon Vietnam. Là où la Deal-cathlon AR Hunt pousse les gens en magasin, celui-ci est fait pour se propager en ligne : un jeu d'attrape rapide, drôle, contrôlé au visage, à jouer avec sa caméra et à partager avec ses amis.
La tour Decathlon éclate, du matériel pleut, et vous bougez la tête pour balayer un panier de gauche à droite et tout attraper — en 50 secondes — tout en esquivant les nuages d'orage. Tout le monde gagne quelque chose.
L'intro de Deal Frenzy. Panier contrôlé au visage, bonus de groupe ×2, un voucher garanti, et un classement hebdo jusqu'à 5 000 000₫.
Le brief
Le deck de pitch était précis sur l'objectif — et sur le canal :
Un jeu-filtre AR fun et partageable sur TikTok et Instagram. Utiliser le face/hand tracking pour attraper du matériel Decathlon qui tombe. Le concevoir pour que jouer avec des amis ou la famille déclenche un bonus de groupe, et donner à chacun une récompense garantie avec un classement par-dessus.
Les mécaniques demandées étaient donc claires : face/hand tracking, un round d'attrape de 50 secondes, un bonus de groupe ×2 quand deux personnes ou plus sont dans le cadre, un e-voucher garanti de 50K, et un classement hebdo/saisonnier.
Le hic : le brief demandait une plateforme qui n'existe plus
Voici le vrai problème rencontré, et comment on l'a résolu.
On ne peut plus publier de filtre AR custom sur Instagram ou Facebook. Meta a fermé Spark AR — sa plateforme de filtres AR tiers — le 14 janvier 2025. Marques et agences ne peuvent plus livrer de filtres Meta custom. Effect House de TikTok existe encore, mais c'est un éditeur fermé et propriétaire : on construit dans leur outil, selon leurs règles, sans pouvoir embarquer sa propre logique, ses récompenses, son CRM ou ses contrôles anti-fraude.
Construire le brief à la lettre reviendrait soit à livrer sur une plateforme morte, soit à menotter toute la couche récompense-et-data dans le bac à sable de quelqu'un d'autre.
Comment Code Crush y a répondu
Nous avons livré exactement la même expérience en WebAR — un jeu AR à face-tracking qui tourne dans le navigateur mobile et se partage par lien ou QR.
Cette décision a transformé la limite de plateforme en avantage :
Ça tourne partout — un seul lien marche dans le navigateur in-app de TikTok, sur Instagram, Zalo, Messenger, ou via un QR sur une affiche. Pas de « dispo sur iOS seulement ».
On possède toute la boucle — scoring, voucher garanti, classement, partage et capture de data first-party vivent dans notre code, pas dans le sandbox d'effets d'une plateforme.
Pas d'app, pas de gatekeeper, pas de file de validation — on publie et on itère quand on veut.
Les deux concepts vivent derrière un seul lien — les joueurs choisissent « The Deal-cathlon AR Hunt » ou « Deal Frenzy / Cơn Lốc Deal » depuis le hub.
Comment on l'a codé
Face tracking : le FaceLandmarker de MediaPipe (Tasks Vision) de Google. On auto-héberge le runtime WASM et le fichier modèle, et on les lazy-load seulement au démarrage du jeu, pour qu'ils restent hors du bundle initial et que l'écran d'accueil reste instantané.
Panier calé sur la tête : le panier suit la position du visage détecté — inclinez la tête et le panier balaie vers le matériel qui tombe. C'est la même primitive qu'un try-on virtuel, donc les joueurs comprennent tout de suite « mon visage est la manette ».
Le bonus de groupe ×2 : le tracker compte les visages dans le cadre. Quand il en voit deux ou plus en continu, le score du round double automatiquement — la mécanique qui récompense littéralement le fait de tirer un ami dans le plan.
Du risque, pas que de la récompense : environ un drop sur six est un nuage d'orage valant −3 points, donc le round demande de l'attention plutôt qu'un balayage aveugle. Des paliers de score se déclenchent en cours de route pour le feel.
Récompenses : un e-voucher garanti de 50 000₫ pour terminer, plus un tirage bonus pondéré, et un classement hebdo + saisonnier où le joueur est placé selon son score.
Partage réel : une carte de score générée plus la Web Share API, pour que « partager ta partie » ouvre la feuille de partage native, pas un bouton mort.
Repli élégant : pas de caméra, ou un appareil incapable de faire tourner le modèle ? Le panier bascule en glisser-au-doigt avec un toggle manuel de bonus de groupe, pour que personne ne soit bloqué.
Les limites (et les compromis assumés)
Pas de filtre natif de plateforme — par nécessité. Comme dit plus haut, les filtres Meta custom ont disparu et Effect House est fermé. Le WebAR est la seule voie qui garde les récompenses et la data first-party. Le compromis : ça vit dans le navigateur plutôt que dans la caméra d'effets TikTok/IG.
Le face tracking dépend de l'appareil. Le ML on-device demande un téléphone assez récent et la permission caméra ; les perfs varient, c'est exactement pourquoi le repli glisser-au-doigt existe.
Le classement a besoin d'un backend pour être réel. Dans le prototype il est simulé côté client. Une vraie campagne demande un serveur, plus les contrôles d'identité et anti-fraude que le brief réclame (plafonds de tentatives, dédoublonnage) avant de mettre du vrai argent-lot en jeu.
La permission caméra est une étape de funnel. Certains joueurs ne l'accorderont pas — le voucher garanti et le mode de repli sont là pour les garder dans le jeu.
Pourquoi ça marche pour Decathlon
Le bonus de groupe est le moteur de croissance : le moyen le moins cher de doubler son score, c'est de tirer quelqu'un dans le cadre, donc le jeu se propage tout seul. Tout le monde gagne un voucher, donc chaque partie est une raison redeemable de passer chez Decathlon — et comme c'est notre code, chaque partie est aussi de la data first-party pour le remarketing.
Prototype conçu et développé par Code Crush comme concept pour Decathlon Vietnam. Récompenses, classement et horaires sont illustratifs. Date de fermeture de Spark AR selon l'annonce publique de Meta.
Mots-clés
case studyDecathlonWebARAR face trackingMediaPipesocial gameSpark ARviral marketingVietnam
Newsletter gratuite
Recevez des conseils sur la gamification chaque semaine
Rejoignez les responsables de marque et les marketeurs qui reçoivent nos meilleurs contenus sur les jeux de marque, les stratégies d'engagement et le marketing interactif — sans spam, désabonnement à tout moment.
Pas de spam. Désabonnement à tout moment. Nous respectons votre boîte mail.
Comment Code Crush y a répondu