July 29, 2026

Overview

EPIC is Banco del Austro's metal credit card, issued in limited editions. The portal is where a member arrives after receiving one: a private page that presents the card itself, the editions, the experiences and travel curation attached to it, and the concierge. I designed and built it. The brief was unusual for a bank: make it feel less like online banking and more like opening a box.

The design problem

A metal card is a physical product sold on weight, finish and sound. It is, deliberately, an object. Every instinct of banking web design works against that — the category defaults to flat illustrations, stock photography of smiling people, and a benefits table. A flat photograph of a metal card is just a picture of a rectangle. It cannot convey the thing the product is actually selling. So the card is rendered as a real 3D object in the browser, lit by a sweeping spotlight that travels across its surface as you sit with it. You can turn it. The light catches the edge, the finish behaves like brushed metal, and the different editions have visibly different materials. This is the closest a screen gets to handing someone the card.

Access as the first experience

The portal opens on a gate, not a homepage. The member enters the last four digits of their national identity number, and the panel dissolves into the experience. Above the input: Edición selecta. Acceso reservado. Below it, a line explaining that the portal is restricted to EPIC members and that anyone holding an invitation should contact their relationship manager. The interesting design decision is what happens with an unrecognised number. It does not reject. Every entry unlocks, defaulting to a standard member identity. That is deliberate. This is not authentication — the card in the member's hand already established who they are, and there is nothing sensitive behind the gate. The gate exists to set a tone. A hard rejection at the door of a luxury product is the wrong first impression, and a portal that greets a known member by name while quietly welcoming everyone else does the work a velvet rope does: it signals exclusivity without creating an incident. Real account access lives in the bank's actual banking channels, where authentication belongs.

UI direction

• Obsidian and steel. A near-black ground with platinum and brushed-steel tones. The palette is taken from the card itself, so the interface and the product are visibly the same material family.
• Glass panels. Content sits on translucent surfaces that let the lit background through, which keeps the card the brightest thing on screen.
• A custom cursor. A small light disc using difference blending, so it inverts against whatever it crosses. It makes the page feel like a surface being examined rather than a document being scrolled.
• Letter-spaced, restrained typography. Wide tracking and small type at low opacity. The confidence signal in luxury design is how little you say, not how loudly.
• Motion as weight. Transitions are slow and eased. Nothing snaps. The editions rotate into place rather than switching, because a heavy object does not switch.

Key features

• A real-time 3D card with edition-specific materials, contact shadows and a moving key light, positioned and scaled per state.
• Three editions — EPIC Standard, Wonder Woman Gold and Batman Titanium — selectable and compared on material, finish, EMV chip and limit. Choosing an edition moves the cards physically: the selected one comes forward, the others settle back.
• Experiences and travel curation modules presenting what the card opens access to.
• Concierge module for the service attached to membership.
• A frequently-asked section written in the same restrained register as the rest, because a question list is usually where a luxury tone collapses.
• Sound design, used sparingly, for the moments where a physical product would make a noise.

Technologies used

• Framework: Next.js with React, TypeScript and the App Router.
• 3D: Three.js via React Three Fiber, with Drei helpers for environment lighting and contact shadows, and a post-processing pass.
• Motion: GSAP for the gate transition and scroll-driven reveals.
• Rendering strategy: the 3D scene is mounted only after the client has mounted, keeping WebGL entirely out of the server render.

Challenges and learnings

3D on the web is a performance budget, not a feature. A real-time scene with environment lighting and post-processing is easy to make beautiful and easy to make unusable on a mid-range phone. The scene had to be built around the constraint that the audience opens this on the device they happen to be holding, not on a workstation. Server rendering and WebGL do not mix. The 3D canvas has to be strictly client-only; attempting to render it on the server hangs the request. Gating the entire scene behind a mount check is a small piece of code that took real debugging to arrive at, and it is the kind of thing that only shows up under production conditions. Luxury is mostly subtraction. Every round of design on this project removed something — a label, a gradient, a second call to action, a faster animation. The finished portal says less than any other page I have built for this client, and that is what makes it read as expensive. A gate is a tone, not a lock. Deciding that the door should always open was the right call for a product where the card is the credential and no private data sits behind the page, but it is worth being honest that this is theatre with a purpose rather than security. Treating it as either more or less than that would have produced a worse design.

Outcome

A portal where the first thing a member meets is a closed door with their name behind it, and the second is their own card, lit and turning, in the same materials as the one in their wallet. For a product sold on how it feels in the hand, that is the only brief worth answering.