29 juli 2026

Overzicht

EPIC is de metalen kredietkaart van Banco del Austro, uitgegeven in beperkte oplages. Het portaal is waar een lid terechtkomt nadat die de kaart heeft ontvangen: een privépagina die de kaart zelf presenteert, de edities, de ervaringen en reiscuradie die eraan vasthangen, en de concierge. Ik heb het ontworpen en gebouwd. De briefing was ongewoon voor een bank: laat het minder aanvoelen als online bankieren en meer als het openmaken van een doos.

Het designprobleem

Een metalen kaart is een fysiek product dat verkocht wordt op gewicht, afwerking en geluid. Het is, bewust, een object. Elk instinct van bank-webdesign werkt daar tegenin — de categorie valt standaard terug op platte illustraties, stockfoto's van lachende mensen en een voordelentabel. Een platte foto van een metalen kaart is gewoon een foto van een rechthoek. Die kan niet overbrengen wat het product echt verkoopt. De kaart wordt dus gerenderd als een echt 3D-object in de browser, belicht door een meelopende spotlight die over het oppervlak trekt terwijl je ernaar kijkt. Je kan ze draaien. Het licht vangt de rand, de afwerking gedraagt zich als geborsteld metaal, en de verschillende edities hebben zichtbaar verschillende materialen. Verder dan dit raakt een scherm niet aan iemand de kaart in handen geven.

Toegang als eerste ervaring

Het portaal opent op een poort, niet op een homepage. Het lid voert de laatste vier cijfers van het identiteitsnummer in, en het paneel lost op in de ervaring. Boven het invoerveld: Edición selecta. Acceso reservado. Daaronder een regel die uitlegt dat het portaal voorbehouden is aan EPIC-leden en dat wie een uitnodiging heeft, contact moet opnemen met de relatiebeheerder. De interessante designdecisie zit in wat er gebeurt bij een onbekend nummer. Het wordt niet geweigerd. Elke invoer ontgrendelt, standaard met de identiteit van een gewoon lid. Dat is bewust. Dit is geen authenticatie — de kaart in de hand van het lid heeft al vastgesteld wie die is, en achter de poort staat niets gevoeligs. De poort bestaat om een toon te zetten. Een harde weigering aan de deur van een luxeproduct is de verkeerde eerste indruk, en een portaal dat een bekend lid bij naam begroet en tegelijk stilletjes iedereen verwelkomt, doet het werk van een fluwelen koord: het signaleert exclusiviteit zonder een incident te creëren. Echte rekeningtoegang zit in de eigen kanalen van de bank, waar authenticatie thuishoort.

UI-richting

• Obsidiaan en staal. Een bijna zwarte achtergrond met platina en geborsteld stalen tinten. Het palet komt van de kaart zelf, zodat de interface en het product zichtbaar uit dezelfde materialenfamilie komen.
• Glazen panelen. Content zit op doorschijnende oppervlakken die de belichte achtergrond doorlaten, waardoor de kaart het helderste object op het scherm blijft.
• Een aangepaste cursor. Een kleine lichte schijf met difference blending, zodat ze inverteert tegen alles waar ze over gaat. Daardoor voelt de pagina als een oppervlak dat je onderzoekt in plaats van een document dat je scrolt.
• Ingehouden typografie met letterspatiëring. Brede tracking en kleine letters bij lage opacity. Het vertrouwenssignaal in luxedesign is hoe weinig je zegt, niet hoe luid.
• Motion als gewicht. Transities zijn traag en geëased. Niets klikt. De edities draaien op hun plek in plaats van te wisselen, want een zwaar object wisselt niet.

Kernfuncties

• Een realtime 3D-kaart met materiaal per editie, contactschaduwen en een bewegend keylicht, per toestand gepositioneerd en geschaald.
• Drie edities — EPIC Standard, Wonder Woman Gold en Batman Titanium — selecteerbaar en vergelijkbaar op materiaal, afwerking, EMV-chip en limiet. Een editie kiezen beweegt de kaarten fysiek: de gekozen kaart komt naar voren, de andere deinen terug.
• Modules voor ervaringen en reiscuradie die tonen waartoe de kaart toegang geeft.
• Conciergemodule voor de dienstverlening die aan het lidmaatschap vasthangt.
• Een FAQ-sectie in dezelfde ingehouden toon als de rest, want een vragenlijst is meestal de plek waar een luxetoon in elkaar zakt.
• Sounddesign, met mate gebruikt, voor de momenten waarop een fysiek product geluid zou maken.

Gebruikte technologieën

• Framework: Next.js met React, TypeScript en de App Router.
• 3D: Three.js via React Three Fiber, met Drei-helpers voor omgevingslicht en contactschaduwen, en een post-processing pass.
• Motion: GSAP voor de poorttransitie en scroll-gestuurde reveals.
• Renderstrategie: de 3D-scene wordt pas gemount nadat de client gemount is, zodat WebGL volledig buiten de serverrender blijft.

Uitdagingen en lessen

3D op het web is een performancebudget, geen feature. Een realtime scene met omgevingslicht en post-processing is makkelijk mooi en makkelijk onbruikbaar op een midrange telefoon. De scene moest gebouwd worden rond de beperking dat het publiek dit opent op het toestel dat ze toevallig in handen hebben, niet op een workstation. Serverrendering en WebGL gaan niet samen. Het 3D-canvas moet strikt client-only zijn; als je het op de server probeert te renderen, blijft de request hangen. De hele scene achter een mountcheck zetten is een klein stukje code waar echt debugwerk aan voorafging, en het is precies het soort ding dat alleen onder productieomstandigheden opduikt. Luxe is vooral weglaten. Elke designronde in dit project haalde iets weg — een label, een gradiënt, een tweede call-to-action, een snellere animatie. Het afgewerkte portaal zegt minder dan eender welke andere pagina die ik voor deze klant bouwde, en dat is net wat het duur doet lijken. Een poort is een toon, geen slot. Beslissen dat de deur altijd opengaat was de juiste keuze voor een product waarbij de kaart het toegangsbewijs is en er geen privégegevens achter de pagina staan, maar het is eerlijk om te zeggen dat dit theater met een bedoeling is en geen beveiliging. Het als meer of als minder dan dat behandelen zou een slechter design hebben opgeleverd.

Resultaat

Een portaal waar een lid eerst een gesloten deur tegenkomt met de eigen naam erachter, en daarna de eigen kaart, belicht en draaiend, in dezelfde materialen als die in de portemonnee. Voor een product dat verkocht wordt op hoe het in de hand voelt, is dat de enige briefing die het antwoorden waard is.