CONCEPTConcept — pas une commande client

VOXA : concept d’une banque à la voix, avec paiements parlés, argent dans les chats et cagnotte de rêve

VOXA est une banque du futur fictive, et voici le site que VITON13 a réalisé pour elle comme concept pour les banques et la fintech. Une caméra traverse un monde three.js de dix fonctions ; chacune ouvre une vraie appli de téléphone où le visiteur paie un ami à la voix, épargne pour un rêve commun, achète un vol qui devient une carte d’embarquement ou compose sa carte, et une scène finale avec deux films Veo 3.1 lui tend le micro.

Site concept · three.js · voix · anglais, russe · 2026

Ouvrir le projet
Première diapositive de VOXA : un immense « 1 », un téléphone qui écoute « Send Anna $25 for pizza » sur un socle lilas au milieu d’anneaux sonores blancs, une carte flottante « Voice ID 98% » et le titre « Pay With Your Voice ».
fonctions dans un monde three.js, chacune avec une démo de téléphone
10
commandes vocales de test comprises, 28 en anglais et 28 en russe
56
fréquence d’images médiane au repos et en vol de caméra sur un MacBook avec Apple M5 (minimum 58,1)
60 fps
de JavaScript compressé en gzip, three.js compris
0,24 Mo

Objectif

VITON13 crée des sites concepts pour montrer ce qu’elle sait faire dans des secteurs où elle n’a pas encore de projet client à présenter. VOXA est celui de la banque et de la fintech : le site d’une banque du futur fictive, dans le genre des récits interactifs de fonctions où un préchargeur compte jusqu’à dix et une caméra traverse un seul monde 3D, une fonction par étape. La banque, ses clients, ses soldes et ses vols sont inventés, et le site est en anglais et en russe.

Le brief que nous nous sommes donné : une banque à qui l’on parle et où l’on passe du temps. La voix remplace le numéro de carte, les amis remplacent la liste des bénéficiaires, et un voyage, un rêve ou une addition partagée deviennent quelque chose que l’on fait ensemble : la banque comme deuxième lieu en ligne après la messagerie. Et il fallait que le visiteur puisse l’essayer, pas seulement la regarder.

Ce que nous avons fait

Une page et dix fonctions : paiements vocaux, Voice ID, argent dans les chats, paiements qui connaissent votre vol, rêves partagés, partage d’addition, un labo de cartes avec cartes de test et à usage unique, un fil d’amis aux montants privés, un coach financier IA et des cercles d’investissement. Chaque fonction a sa vitrine dans le monde 3D, une diapositive avec texte et un panneau « Explorer » qui ouvre une vraie appli de téléphone sur cette fonction ; le menu liste les dix avec des vignettes rendues depuis la scène.

L’appli repose sur un état partagé : l’argent envoyé dans un panneau apparaît dans le chat, le solde et le labo de test ; les amis répondent et réagissent ; la cagnotte se remplit sous vos yeux ; un billet acheté devient une carte d’embarquement avec compte à rebours en direct, assurance voyage et note sur la devise locale. Le labo de test réunit tout avec des commandes à dire ou à toucher, et un micro dans l’en-tête pilote tout le site à la voix.

La scène finale monte deux films de 6 secondes générés avec Veo 3.1 (Alex demande à VOXA de payer la pizza d’Anna ; Anna rit quand l’argent arrive) avec les deux téléphones de la page, puis passe le micro au visiteur. Tous les textes sont en anglais et en russe, et les films existent dans les deux langues.

Comment cela fonctionne

Le monde est une seule scène three.js : dix vitrines dans un studio pastel dont la couleur coule d’une étape à l’autre, et une caméra qui vole de l’une à l’autre en arc, avec une légère respiration de l’objectif, et suit le curseur. Tous les modèles sont faits en code, des téléphones dont les écrans sont dessinés en canvas à un avion blanc, une tirelire en verre pleine de pièces, des cartes en métal, en verre et holographiques et une arche portant les membres d’un cercle d’investissement ; les amis sont des portraits illustrés en code, pas des photos.

La voix fonctionne dans le navigateur. Le service de reconnaissance du navigateur transforme la parole en texte, puis la phrase devient une intention en anglais ou en russe, formes russes comme «Ане» et «Максу» comprises. Voice ID enregistre trois phrases et garde une empreinte faite de la forme spectrale moyenne et de la hauteur, calculée dans l’onglet et envoyée nulle part ; les paiements parlés sont comparés à elle, et en cas d’écart la banque demande Face ID. Le site est compilé par esbuild en fichiers statiques et servi sur /demos/voxa-bank/ avec un en-tête qui n’autorise le micro que sur ce chemin.

Ce qui existe aujourd’hui

Ce qui existe aujourd’hui est un concept fonctionnel sur tarasovvitalii.com/demos/voxa-bank/, construit le 28 septembre 2026. Un passage de l’analyseur le même jour a compris les 56 commandes de test, 28 par langue. Nous avons compté les images avec requestAnimationFrame pendant trois secondes, deux fois au repos et deux fois pendant un vol de caméra, dans Chrome headless avec ANGLE Metal sur un MacBook avec Apple M5 en 1600 × 1000 à l’échelle Retina : 60,1, 59,8, 60,0 et 58,1 fps. La page charge 0,24 Mo de JavaScript en gzip, three.js compris ; la version compilée pèse 4,3 Mo, dont 3,3 Mo pour les quatre clips.

Le même jour, Lighthouse 13.5 a tourné trois fois par appareil sur l’adresse publiée. Les médianes : performance 47 sur mobile et 61 sur ordinateur, accessibilité 100, bonnes pratiques 100 ; LCP 3,5 s sur mobile et 0,5 s sur ordinateur, CLS 0,005, et la page transfère 0,4 Mo au chargement. Ce qui freine le score mobile, c’est le démarrage du monde 3D : construire dix vitrines et compiler leurs matériaux bloque un téléphone simulé pendant 15 754 ms. La machine était très chargée ce jour-là (load average autour de 50), il faudra donc remesurer l’adresse publiée.

Ce que cela ne prouve pas

VOXA est un concept réalisé par VITON13 pour montrer ce que nous pouvons faire pour les banques et la fintech, pas une commande. La banque, les amis, les soldes et les vols sont fictifs et aucun argent ne circule ; les deux personnes des films ont été générées avec Veo 3.1 et Nano Banana Pro et ne sont pas des clients. Le site n’a ni client, ni utilisateurs, ni trafic, ni demandes, et il ne prouve rien sur la conversion ou la fidélisation.

Voice ID est une démonstration, pas une sécurité biométrique : il compare des spectres moyens, peut confondre des voix proches et a été testé dans Chrome headless avec un micro synthétique, pas avec de vraies personnes. La reconnaissance vocale nécessite Chrome, Edge ou Safari. La fréquence d’images vient d’une seule machine un seul jour, et Lighthouse est un test de laboratoire lancé alors que la machine était très chargée.

Comment vérifier le portfolio d’une agence web

Revue SEO

Le 28 septembre 2026, Lighthouse (trois passages par appareil sur l’adresse publiée, médianes) a donné une performance de 47 sur mobile (LCP 3,5 s, 0,4 Mo) et 61 sur ordinateur (LCP 0,5 s), une accessibilité de 100 et des bonnes pratiques à 100. Le SEO est à 66 car la démo porte noindex, nofollow dans la page et dans l’en-tête du serveur, volontairement : la page destinée aux moteurs est son cas dans le portfolio.

Vérifié le 28 septembre 2026 : 2 pages rendues dans Chrome comme les voit un robot d’indexation, et Lighthouse 13 sur la page d’accueil.

Lighthouse, page d’accueil

Performances
Mobile47Ordinateur61
Accessibilité
Mobile100Ordinateur100
Bonnes pratiques
Mobile100Ordinateur100
SEO
Mobile66Ordinateur66

Contrôles de page et SEO technique

  • Titres de page uniquesen place2/2
  • Titre de 30 à 65 caractèresen place2/2
  • Méta-description de 70 à 170 caractèresen place2/2
  • Un seul H1 par pageen place2/2
  • Langue de la page déclaréeen placeen, ru
  • Mise en page mobile sans défilement horizontalen place2/2
  • Images avec texte alternatifen place10/10
  • Liens internes cassésen place0
  • URL canoniqueen place2/2
  • Open Graph : titre et imageen place2/2
  • Données structurées (JSON-LD)en place2/2
  • sitemap.xml et robots.txtpartiel1/2

Vérifiée : l’unique page dans ses deux langues (états anglais et russe de /demos/voxa-bank/), rendue dans Chrome headless à 390 px. En place : un titre propre dans chaque langue, un H1, la langue déclarée (en et ru), pas de défilement horizontal, une URL canonique, Open Graph avec image absolue, un JSON-LD WebApplication, un texte alt sur les dix vignettes du menu et robots.txt à la racine du domaine. Les 5 cibles de liens répondent : les pages du cas dans le portfolio, /work/voxa-bank/ et /ru/work/voxa-bank/, en 404 le jour du contrôle, sont en ligne depuis le 28 septembre 2026 et ont été revérifiées (200). La démo est volontairement absente de sitemap.xml.

Si VOXA était le site d’une vraie banque : retirer noindex ; donner à chaque langue sa propre URL avec hreflang au lieu d’un sélecteur sur une seule page ; lister les pages dans sitemap.xml ; ajouter du JSON-LD FinancialService et FAQ sur les pages produit. Pour la vitesse sur mobile, lancer le monde 3D après le premier rendu, construire les dix vitrines par étapes, charger les clips et les textures à la demande, puis mesurer à nouveau l’adresse publiée sur une machine non chargée.

Services illustrés par ce cas

Décrivez la tâche sur la page du service ; le périmètre, le délai et le prix écrits arrivent sous un jour ouvré.

Parler d’un projet similaire