Une silhouette immédiatement lisible
Chaque carte commence par une grille fixe : zone de portrait, nom, série, code de rareté et numéro. Cette structure permet de reconnaître Candidex même lorsque les palettes et les décors changent fortement d’une collection à l’autre.
La 3D au service de la matière
Le rendu 3D sert à simuler les couches de vernis, les tranches, les reflets et la profondeur du cadre. L’objectif n’est pas de reproduire une carte physique au millimètre, mais de créer un objet numérique que l’on a envie de faire pivoter et d’observer.
Des boosters comme des scènes
Les pochettes sont composées comme de petits décors. La caméra, l’éclairage et le son préparent la révélation. Une édition rare ne se contente donc pas d’une couleur : elle dispose d’un rythme et d’une réaction visuelle propres.
Une hiérarchie qui reste accessible
Le nom, le numéro et le code de rareté restent lisibles lorsque l’effet 3D est réduit ou absent. Le mouvement complète l’information, il ne doit pas en être l’unique support. Cette règle compte notamment pour les personnes qui préfèrent limiter les animations, utilisent un écran tactile ou consultent le catalogue sur un appareil moins puissant.
Du prototype au catalogue
Chaque famille visuelle est testée sur plusieurs formats : carte isolée, grille de collection, booster et petit écran. Un effet réussi en plein écran peut devenir illisible dans une galerie ; il est alors simplifié avant publication. Le catalogue du hub sert de référence stable pour comparer les finitions sans dépendre de l’animation d’ouverture.
La donnée structure le cadre
Avant le rendu, chaque carte possède un identifiant, un nom public, une famille, une rareté et un fichier portrait. Cette structure alimente plusieurs usages : grille du jeu, page du catalogue, résultat d’un booster et sauvegarde. Le visuel ne doit donc pas devenir la seule source d’information.
Le numéro CDX-xxx est ajouté dans une collection ordonnée. Il fournit un repère stable pour signaler une erreur d’image ou distinguer deux éditions portant le même nom. Les notices éditoriales utilisent le même identifiant mais restent publiées séparément.
Du portrait au fichier web
Le cadrage réserve une zone au visage et une autre aux informations. Un portrait très horizontal ou placé trop près du bord peut fonctionner seul et échouer une fois inséré dans la carte. Les essais portent donc sur le format final plutôt que sur l’image source isolée.
Les exports de catalogue sont redimensionnés et convertis en WebP afin de réduire leur poids. Certaines cartes mises en avant disposent d’une version plus définie, mais la grille utilise des fichiers adaptés à sa taille réelle. Charger 163 visuels en qualité maximale ralentirait inutilement l’arrivée du contenu.
React Three Fiber et la scène
Le jeu utilise Three.js à travers React Three Fiber et des outils de la bibliothèque Drei. Cette couche permet d’intégrer la scène 3D aux composants React qui gèrent l’état du booster. La géométrie du paquet, les lumières et la caméra restent séparées des règles de tirage exécutées par le service.
La texture du booster est composée dans un canvas puis appliquée à l’objet 3D. Cette méthode permet de varier illustration, couleurs et informations sans fournir une géométrie différente à chaque paquet. Un cache évite de recomposer inutilement les mêmes textures pendant une session.
L’ouverture comme séquence contrôlée
Le paquet ne doit s’ouvrir qu’après confirmation du droit correspondant. L’animation accompagne un résultat déjà cohérent avec le serveur ; elle ne décide pas de la rareté au dernier moment. Cette séparation est essentielle pour éviter qu’un rechargement ou une animation interrompue produise un autre tirage.
Flash, anneaux et disparition du paquet préparent la première carte, mais leurs durées sont réduites lorsque le système demande moins de mouvement. Une transition réussie doit aussi survivre à un téléphone modeste, à un changement d’orientation et à une connexion irrégulière.
Contrôler avant de publier
Chaque famille est observée dans la grille, le détail et le booster. Les contrôles recherchent les portraits coupés, les noms illisibles, les contrastes trop faibles et les effets qui masquent le code de rareté. Une capture fixe complète le test interactif pour vérifier ce que voit une personne qui ne manipule pas la carte.
Le build du hub vérifie ensuite que le contenu éditorial existe réellement dans le HTML. Le jeu et sa documentation remplissent des rôles complémentaires : l’un fournit la scène, l’autre explique la méthode sans exiger WebGL ou JavaScript.