Decathlon « Deal-cathlon AR Hunt » : une chasse au trésor WebAR en magasin
Comment Code Crush a transformé un brief de gamification Decathlon Vietnam en une vraie chasse au trésor WebAR — un mini-jeu d'attrape, un geofence GPS de 200 m et une chasse AR caméra + gyroscope qui pousse les joueurs en ligne vers les magasins. Le build, la tech et les limites assumées.
Code Crush Team
Gamification Agency
Le projet
The Deal-cathlon AR Hunt est le premier de deux concepts de gamification que Code Crush a prototypés pour la campagne des 50 ans de Decathlon Vietnam. C'est une chasse au trésor online-to-offline : les joueurs se qualifient depuis leur téléphone, puis doivent se rendre physiquement dans l'un des cinq magasins Decathlon pendant une « Grand Event Hour » (Giờ G) pour dénicher et réclamer un vrai lot.
Tout ce qui suit est une application web jouable en direct — construite en Next.js, sans installation d'app, déployée sur Google Cloud Run. Elle fait tourner tout le parcours de bout en bout : mini-jeu d'attrape → pass d'accès → choix du magasin → check-in GPS → chasse AR caméra → tirage → remise en magasin.
L'écran d'accueil. Le joueur arrive pendant la fenêtre de pré-lancement et est envoyé directement dans le mini-jeu de qualification.
Le brief
La demande de Decathlon (issue du deck de pitch) était directe :
Connecter l'audience en ligne au point de vente. Générer du vrai trafic en magasin, capter de la data CRM, et rendre le tout partageable — pas juste un énième roue-de-la-fortune.
Le mécanisme décrit était un parcours en cinq étapes :
1Découverte — visiter le site pendant la fenêtre de pré-lancement.
2Défi rapidité — un mini-jeu d'attrape, un essai par jour, qui débloque un Pass d'accès.
3Choix du point de chasse — verrouiller le pass sur 1 des 5 magasins.
4Check-in à l'heure de la chasse — venir dans la bonne fenêtre, prouver sa présence, déclencher un tirage.
5Remise — donner un code au staff, obtenir le lot sur place, CRM mis à jour.
Le plus dur, c'est l'étape 4. « Prouver sa présence » est ce qui sépare un vrai générateur de trafic d'un coupon que n'importe qui peut réclamer depuis son canapé.
Comment Code Crush y a répondu
Nous avons construit tout le parcours comme une machine à états rapide, chaque étape étant un moment distinct et brandé.
1. Le mini-jeu d'attrape. Des tuiles de deals tombent ; on tape pour les attraper. Un round de 35 secondes, un boost de vitesse à 10 prises, et un seuil de 15 points pour gagner un pass. Le limiter à un essai par jour est ce qui garde le pass rare.
« Grab It Before It's Gone » — le jeu d'attrape de qualification. Faites 15+ en 35 secondes pour gagner un Pass d'accès.
2. Le Pass d'accès. En gagnant, on reçoit un pass à code-barres avec un compte à rebours en direct vers la fenêtre d'événement du magasin. Il est stocké sur l'appareil : le joueur peut fermer l'onglet et revenir — le pass (et son compte à rebours) est toujours là.
Le Pass d'accès — stocké localement, reprenable, et verrouillé sur un seul magasin pour l'événement.
3. Choisir son magasin. Cinq vrais magasins Decathlon Vietnam, chacun avec sa surface et la fenêtre Giờ G partagée (17h le jeudi).
Le choix du magasin de chasse. Le pass se verrouille sur le magasin choisi.
4. Le check-in — un vrai geofence de 200 m. Voici notre réponse à « prouver sa présence ». Avant que la chasse ne se débloque, l'app demande le GPS et vérifie que vous êtes à moins de 200 mètres du magasin choisi. Trop loin, et elle vous dit exactement de combien.
5. La chasse AR. Dans le rayon, la caméra arrière du téléphone s'ouvre et des drops sont cachés en 3D autour de vous. Vous tournez physiquement pour les trouver, en suivant un radar qui « chauffe » quand vous approchez, puis vous tapez pour collecter.
La chasse AR en caméra live. Les drops sont ancrés en 3D autour du joueur ; le radar pointe vers le plus proche. Tournez le téléphone pour le trouver, tapez pour l'attraper.
6. Le tirage & la remise. Décrocher le drop suprême ouvre un tirage pondéré dans un pool fixe de 50 lots exactement par magasin (« 50 Đặc Quyền Tuổi 50 »), puis produit un ticket de remise que le joueur montre au staff — et qu'il peut enregistrer sur son téléphone en image.
Le tirage. Un pool fixe de 50 lots par magasin, pondéré selon le nombre restant de chaque.
Le ticket de remise — un code-barres plus un export « enregistrer sur le téléphone » rendu sur un canvas.
Comment on l'a codé
Stack : Next.js 15 (App Router), une machine à états côté client pilotant chaque écran, déployée en conteneur standalone sur Google Cloud Run (région Singapour, scale-to-zero).
Jeu d'attrape : une boucle `requestAnimationFrame` fait apparaître et tomber les tuiles ; attraper est un tap avec une zone de contact volontairement généreuse pour que des cibles rapides restent équitables au doigt.
Pass d'accès : stocké en `localStorage` avec un compte à rebours en direct, pour survivre à un refresh et rester verrouillé sur son magasin.
Geofence : `navigator.geolocation` + une distance haversine vers les coordonnées du magasin, plafonnée à 200 m, avec un chemin « prévisualiser quand même » pour que la démo soit explorable hors site.
L'AR : le vrai point fort. Un flux caméra arrière est placé derrière une couche WebGL Three.js transparente dont la caméra est pilotée par le `DeviceOrientationEvent` de l'appareil — tourner physiquement le téléphone fait regarder autour de la scène. Les drops sont des billboards 3D placés loin sur une sphère et révélés un à un ; un tap fait un raycast sur le drop actif. Sans caméra ni capteur de mouvement (ex. desktop), on retombe sur une démo glisser-pour-regarder pour que le lien ne montre jamais un écran cassé.
Ticket de remise : dessiné sur un `
Responsive : un mockup de téléphone encadré sur desktop pour le pitch, plein écran sur les vrais téléphones.
Les limites (et les compromis assumés)
Être clair sur les bords fait partie du métier :
Le WebAR, c'est regarder autour, pas du world-tracking. Un navigateur ne peut pas faire de détection de plans niveau ARKit ; les drops sont donc ancrés au cap du joueur (via le gyroscope), pas fixés à un rayon précis. Ça se lit comme de l'AR et ne demande aucune app — le compromis pour cette portée, c'est l'absence de vrai ancrage spatial.
Le GPS seul peut être falsifié. Un geofence de 200 m est un filtre fort, mais pour un vrai événement à lots il doit s'associer au scan du QR en magasin déjà prévu par le brief — le QR est la preuve infalsifiable de présence ; le GPS est le premier filtre amical.
iOS exige un tap pour la caméra + le mouvement. Les deux permissions doivent partir d'un geste utilisateur ; la chasse démarre donc toujours derrière un bouton explicite « Enable camera AR ».
Les boucles de jeu web se mettent en pause en arrière-plan. Comme tout jeu `requestAnimationFrame`, la boucle des deals qui tombent dort quand l'onglet passe en arrière-plan — comportement attendu, pas un bug.
Pourquoi ça marche pour Decathlon
Tout l'intérêt, c'est la marche jusqu'au magasin. Se qualifier en ligne est fun, mais le pass ne vaut rien tant qu'on n'est pas debout dans un Decathlon pendant Giờ G — et le filtre GPS plus la chasse caméra font de « être là » le vrai jeu. C'est du trafic mesurable, de la data first-party à la remise, et un moment partageable, le tout depuis un lien.
Prototype conçu et développé par Code Crush comme concept pour Decathlon Vietnam. Données magasins, lots et horaires sont illustratifs.
Mots-clés
case studyDecathlonWebARAR treasure huntgeofencingThree.jsNext.jsonline to offlineVietnam
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