CONCEPTOConcepto: no es un encargo de cliente

VOXA: concepto de un banco por voz, con pagos hablados, dinero en los chats y una hucha compartida

VOXA es un banco del futuro ficticio, y esta es la web que VITON13 hizo para él como concepto para bancos y productos fintech. Una cámara vuela por un mundo de three.js con diez funciones; cada una abre una app real en el teléfono donde el visitante paga a un amigo con la voz, ahorra para un sueño compartido, compra un vuelo que se convierte en tarjeta de embarque o diseña una tarjeta, y una escena final con dos películas de Veo 3.1 le pasa el micrófono.

Sitio concepto · three.js · voz · inglés, ruso · 2026

Abrir el proyecto
Primera diapositiva de VOXA: un enorme «1», un teléfono que escucha «Send Anna $25 for pizza» sobre un pedestal lila dentro de anillos de sonido blancos, una tarjeta flotante «Voice ID 98%» y el título «Pay With Your Voice».
funciones en un mundo de three.js, cada una con una demo de teléfono
10
comandos de voz de prueba entendidos, 28 en inglés y 28 en ruso
56
tasa mediana de fotogramas en reposo y en vuelo en un MacBook con Apple M5 (mínimo 58,1)
60 fps
JavaScript con gzip, three.js incluido
0,24 MB

Tarea

VITON13 crea sitios concepto para mostrar su alcance en sectores donde todavía no tiene un proyecto de cliente que enseñar. VOXA es el de banca y fintech: la web de un banco del futuro ficticio, en el género de las historias interactivas de funciones donde un precargador cuenta hasta diez y una cámara vuela por un único mundo 3D, una función en cada parada. El banco, sus clientes, saldos y vuelos son inventados, y la web está en inglés y ruso.

El encargo nos lo pusimos nosotros: un banco al que se le habla y en el que se pasa el tiempo. La voz sustituye al número de tarjeta, los amigos a la lista de destinatarios, y un viaje, un sueño o una cuenta a medias se vuelven algo que se hace juntos: el banco como segundo lugar en la red después del chat. Y tenía que poder probarse, no solo mirarse.

Qué hicimos

Una página con diez funciones: pagos por voz, Voice ID, dinero en los chats, pagos que conocen tu vuelo, sueños compartidos, cuentas a medias, un laboratorio de tarjetas con tarjetas de prueba y de un solo uso, un muro de amigos con importes privados, un coach de dinero con IA y círculos de inversión. Cada función tiene un escaparate en el mundo 3D, una diapositiva con texto y un panel «Explorar» que abre una app real de teléfono en esa función; el menú lista las diez con miniaturas renderizadas desde la escena.

La app funciona sobre un estado compartido: el dinero enviado en un panel aparece en el chat, el saldo y el laboratorio; los amigos responden y reaccionan; la hucha se llena ante tus ojos; un billete comprado se convierte en tarjeta de embarque con cuenta atrás en vivo, seguro de viaje y aviso de moneda local. El laboratorio reúne todo con comandos para decir o pulsar, y un micrófono en la cabecera maneja toda la web con la voz.

La escena final monta dos películas de 6 segundos generadas con Veo 3.1 (Alex pide a VOXA pagarle a Anna la pizza; Anna se ríe cuando llega) con los dos teléfonos de la página y luego pasa el micrófono al visitante. Todos los textos están en inglés y ruso, y las películas existen en ambos idiomas.

Cómo funciona

El mundo es una sola escena de three.js: diez escaparates en un estudio pastel cuyo color fluye de parada en parada, y una cámara que vuela entre ellos en arco, con una leve respiración del objetivo, y sigue al cursor. Todos los modelos están hechos en código, desde teléfonos cuyas pantallas se dibujan en canvas hasta un avión blanco, una hucha de cristal con monedas, tarjetas de metal, cristal y holograma y un arco con los miembros de un círculo de inversión; los amigos son retratos ilustrados en código, no fotos.

La voz funciona en el navegador. El servicio de reconocimiento del propio navegador pasa el habla a texto y la frase se convierte en una intención en inglés o ruso, incluidas formas rusas como «Ане» y «Максу». Voice ID graba tres frases y guarda una huella vocal con la forma media del espectro y el tono, calculada en la pestaña y sin enviarse a ninguna parte; los pagos hablados se comparan con ella y, si no coincide, pide Face ID. La web se compila con esbuild en archivos estáticos y se sirve en /demos/voxa-bank/ con una cabecera que permite el micrófono solo en esa ruta.

Qué existe hoy

Lo que existe ahora es un concepto funcional en tarasovvitalii.com/demos/voxa-bank/, construido el 28 de septiembre de 2026. Una prueba del analizador ese mismo día entendió los 56 comandos de prueba, 28 por idioma. Contamos fotogramas con requestAnimationFrame durante tres segundos, dos veces en reposo y dos durante un vuelo de cámara, en Chrome headless con ANGLE Metal en un MacBook con Apple M5 a 1600 × 1000 en escala Retina: 60,1, 59,8, 60,0 y 58,1 fps. La página carga 0,24 MB de JavaScript con gzip, three.js incluido; la compilación pesa 4,3 MB, 3,3 MB de ellos los cuatro clips.

Ese mismo día Lighthouse 13.5 se ejecutó tres veces por dispositivo en la dirección publicada. Las medianas: rendimiento 47 en móvil y 61 en escritorio, accesibilidad 100, buenas prácticas 100; LCP 3,5 s en móvil y 0,5 s en escritorio, CLS 0,005, y la página transfiere 0,4 MB al cargar. Lo que frena la nota en móvil es el arranque del mundo 3D: construir diez escaparates y compilar sus materiales bloquea un teléfono simulado durante 15.754 ms. La máquina estaba muy cargada ese día (load average cercano a 50), así que conviene medir de nuevo la dirección publicada.

Qué no demuestra

VOXA es un concepto que VITON13 hizo para mostrar lo que podemos crear para bancos y fintech, no un encargo. El banco, los amigos, los saldos y los vuelos son ficticios y no se mueve dinero; las dos personas de las películas se generaron con Veo 3.1 y Nano Banana Pro y no son clientes. La web no tiene cliente, usuarios, tráfico ni solicitudes, y no demuestra nada sobre conversión o retención.

Voice ID es una demostración, no seguridad biométrica: compara espectros medios, puede confundir voces parecidas y se probó en Chrome headless con un micrófono sintético, no con personas reales. El reconocimiento de voz requiere Chrome, Edge o Safari. La tasa de fotogramas viene de una sola máquina en un día, y Lighthouse es una prueba de laboratorio que se ejecutó con la máquina muy cargada.

Cómo revisar el portafolio de un estudio web

Revisión SEO

El 28 de septiembre de 2026 Lighthouse (tres ejecuciones por dispositivo en la dirección publicada, medianas) dio rendimiento 47 en móvil (LCP 3,5 s, 0,4 MB) y 61 en escritorio (LCP 0,5 s), accesibilidad 100 y buenas prácticas 100. El SEO es 66 porque la demo lleva noindex, nofollow en la página y en la cabecera del servidor, a propósito: la página pensada para buscadores es su caso en el portfolio.

Revisado el 28 de septiembre de 2026: 2 páginas renderizadas en Chrome tal como las ve un rastreador, y Lighthouse 13 en la portada.

Lighthouse, portada

Rendimiento
Móvil47Escritorio61
Accesibilidad
Móvil100Escritorio100
Buenas prácticas
Móvil100Escritorio100
SEO
Móvil66Escritorio66

Comprobaciones de página y SEO técnico

  • Títulos de página únicoscorrecto2/2
  • Título de 30–65 caracterescorrecto2/2
  • Metadescripción de 70–170 caracterescorrecto2/2
  • Un solo H1 por páginacorrecto2/2
  • Idioma de la página declaradocorrectoen, ru
  • Diseño móvil sin desplazamiento lateralcorrecto2/2
  • Imágenes con texto alternativocorrecto10/10
  • Enlaces internos rotoscorrecto0
  • URL canónicacorrecto2/2
  • Open Graph: título e imagencorrecto2/2
  • Datos estructurados (JSON-LD)correcto2/2
  • sitemap.xml y robots.txtparcial1/2

Revisada la única página en sus dos idiomas (los estados inglés y ruso de /demos/voxa-bank/) en Chrome headless a 390 px. Hay: un título propio en cada idioma, un H1, el idioma declarado (en y ru), sin desplazamiento horizontal, URL canónica, Open Graph con imagen absoluta, JSON-LD WebApplication, texto alt en las diez miniaturas del menú y robots.txt en la raíz del dominio. Los 5 destinos de enlace responden: las páginas del caso en el portfolio, /work/voxa-bank/ y /ru/work/voxa-bank/, que daban 404 el día de la revisión, se publicaron el 28 de septiembre de 2026 y se volvieron a comprobar (200). La demo queda fuera de sitemap.xml a propósito.

Si VOXA fuera la web de un banco real: quitar noindex; dar a cada idioma su propia URL con hreflang en lugar de un selector en una sola página; incluir las páginas en sitemap.xml; añadir JSON-LD FinancialService y FAQ en las páginas de producto. Para la velocidad en móvil, arrancar el mundo 3D después del primer pintado, construir los diez escaparates por partes, cargar los clips y las texturas de la escena cuando hagan falta y volver a medir la dirección publicada en una máquina sin carga.

Servicios que muestra este caso

Describe la tarea en la página del servicio; el alcance, el plazo y el precio por escrito llegan en un día laborable.

Hablar de un proyecto similar