29 de julio de 2026

Visión general

EPIC es la tarjeta de crédito metálica del Banco del Austro, emitida en ediciones limitadas. El portal es donde llega un miembro después de recibir una: una página privada que presenta la tarjeta, las ediciones, las experiencias y la curaduría de viajes asociadas, y el concierge. Lo diseñé y lo construí. El encargo era inusual para un banco: que se sintiera menos como banca en línea y más como abrir una caja.

El problema de diseño

Una tarjeta metálica es un producto físico que se vende por peso, acabado y sonido. Es, deliberadamente, un objeto. Todos los instintos del diseño web bancario juegan en contra: la categoría cae por defecto en ilustraciones planas, fotos de archivo de gente sonriendo y una tabla de beneficios. Una fotografía plana de una tarjeta metálica es solo la imagen de un rectángulo. No puede transmitir lo que el producto realmente vende. Por eso la tarjeta se renderiza como un objeto 3D real en el navegador, iluminada por un foco que barre su superficie mientras te quedas con ella. Puedes girarla. La luz atrapa el canto, el acabado se comporta como metal cepillado, y las distintas ediciones tienen materiales visiblemente diferentes. Esto es lo más cerca que llega una pantalla a ponerte la tarjeta en la mano.

El acceso como primera experiencia

El portal abre en una puerta, no en una página de inicio. El miembro ingresa los últimos cuatro dígitos de su cédula, y el panel se disuelve hacia la experiencia. Arriba del campo: Edición selecta. Acceso reservado. Debajo, una línea que explica que el portal es de acceso restringido para miembros EPIC y que quien tenga una invitación debe contactar a su Relationship Manager. La decisión de diseño interesante es qué pasa con un número no reconocido. No rechaza. Cualquier ingreso abre, con una identidad de miembro estándar por defecto. Es deliberado. Esto no es autenticación —la tarjeta en la mano del miembro ya estableció quién es, y no hay nada sensible detrás de la puerta—. La puerta existe para fijar un tono. Un rechazo duro en la entrada de un producto de lujo es la primera impresión equivocada, y un portal que saluda por su nombre a un miembro conocido mientras deja pasar discretamente al resto hace el trabajo de un cordón de terciopelo: señala exclusividad sin crear un incidente. El acceso real a cuentas vive en los canales de banca del banco, que es donde corresponde autenticar.

Dirección de UI

• Obsidiana y acero. Un fondo casi negro con tonos platino y acero cepillado. La paleta sale de la propia tarjeta, así que la interfaz y el producto son visiblemente de la misma familia de materiales.
• Paneles de vidrio. El contenido se apoya en superficies translúcidas que dejan pasar el fondo iluminado, lo que mantiene a la tarjeta como lo más brillante de la pantalla.
• Un cursor propio. Un pequeño disco de luz con mezcla por diferencia, que se invierte contra lo que cruza. Hace que la página se sienta como una superficie que se examina y no como un documento que se desplaza.
• Tipografía sobria y espaciada. Interletrado amplio y tamaños pequeños a baja opacidad. En el diseño de lujo la señal de confianza es lo poco que dices, no lo fuerte.
• El movimiento como peso. Las transiciones son lentas y suavizadas. Nada salta. Las ediciones rotan hasta su sitio en vez de cambiar, porque un objeto pesado no cambia de golpe.

Características clave

• Una tarjeta 3D en tiempo real con materiales por edición, sombras de contacto y una luz principal en movimiento, posicionada y escalada según el estado.
• Tres ediciones —EPIC Standard, Wonder Woman Gold y Batman Titanium— seleccionables y comparadas por material, acabado, chip EMV y límite. Elegir una edición mueve las tarjetas físicamente: la seleccionada se adelanta, las otras se recuestan atrás.
• Módulos de experiencias y curaduría de viajes que presentan a qué da acceso la tarjeta.
• Módulo de concierge para el servicio asociado a la membresía.
• Una sección de preguntas frecuentes escrita en el mismo registro sobrio que el resto, porque una lista de preguntas suele ser donde se derrumba un tono de lujo.
• Diseño sonoro, usado con moderación, para los momentos en los que un producto físico haría ruido.

Tecnologías utilizadas

• Framework: Next.js con React, TypeScript y App Router.
• 3D: Three.js mediante React Three Fiber, con ayudantes de Drei para iluminación de entorno y sombras de contacto, y una pasada de post-procesado.
• Movimiento: GSAP para la transición de la puerta y las revelaciones al hacer scroll.
• Estrategia de renderizado: la escena 3D se monta solo después de que el cliente monta, dejando WebGL completamente fuera del renderizado en servidor.

Retos y aprendizajes

El 3D en la web es un presupuesto de rendimiento, no una función. Una escena en tiempo real con iluminación de entorno y post-procesado es fácil de hacer hermosa y fácil de hacer inusable en un teléfono de gama media. La escena tuvo que construirse alrededor de la restricción de que la audiencia abre esto en el dispositivo que lleva encima, no en una estación de trabajo. El renderizado en servidor y WebGL no se mezclan. El lienzo 3D tiene que ser estrictamente de cliente; intentar renderizarlo en el servidor cuelga la petición. Bloquear toda la escena tras una comprobación de montaje es un fragmento pequeño de código al que costó llegar depurando, y es de esas cosas que solo aparecen en condiciones de producción. El lujo es sobre todo resta. Cada ronda de diseño en este proyecto quitó algo: una etiqueta, un degradado, una segunda llamada a la acción, una animación más rápida. El portal terminado dice menos que cualquier otra página que haya construido para este cliente, y eso es lo que hace que se lea como caro. Una puerta es un tono, no un cerrojo. Decidir que la puerta siempre abra fue lo correcto para un producto donde la tarjeta es la credencial y no hay datos privados detrás de la página, pero conviene ser honesto: es escenografía con un propósito, no seguridad. Tratarlo como más o como menos que eso habría producido un peor diseño.

Resultado

Un portal donde lo primero que encuentra un miembro es una puerta cerrada con su nombre detrás, y lo segundo es su propia tarjeta, iluminada y girando, en los mismos materiales que la que lleva en la billetera. Para un producto que se vende por cómo se siente en la mano, ese es el único encargo que vale la pena responder.