LUN-X

LUN-X is een fictieve nightvision zonnebril waarmee je in het donker zou kunnen zien. Voor het vak Web Animations maakte ik hiervoor een volledige productwebsite, van concept en design in Figma tot een werkende, geanimeerde website in Webflow.

De website bestaat uit een hero met een interactieve 3D bril die je cursor volgt, een technology sectie met specs en info cards, een centrale overgangsanimatie en een experience sectie. Het visuele concept is opgebouwd rond een themawissel: de website begint in een donkerblauw-paarse sfeer die de nacht voorstelt, en via een scroll-animatie waarbij je de bril virtueel opzet, verandert alles naar een donkergroen en fluogroen thema dat zogezegd het zicht door de bril toont.

Het design was voor mij de grootste persoonlijke uitdaging. Designen ligt me minder dan technisch werk, maar ik heb er bewust veel tijd in gestoken en het resultaat is het beste design dat ik tot nu toe gemaakt heb.

Het 3D model van de bril maakte ik in Spline, wat technisch een frustrerende ervaring was. Booleans deden de software crashen, textures glitchten en de interface was traag. Bovendien zorgde het model in Webflow voor performantieproblemen ondanks de kleine bestandsgrootte, iets wat ik niet verwacht had.

De GSAP animaties waren ook een uitdaging. Ik wist wat ik wou en hoe ik het moest aanpakken, maar de hoeveelheid aan animaties die ik wou doen vroeg veel tijd.

Het eindresultaat ziet er precies uit zoals ik het voor ogen had. De themawissel is vloeiend, de animaties zijn gelaagd en de website heeft een sterke visuele identiteit waar ik trots op ben.

De grootste les die ik geleerd heb is dat de juiste tools het verschil maken. Webflow en Spline waren vereisten van de opdracht, maar beide gaven enorm veel bugs en beperkingen. Met React en Blender zou ik hetzelfde resultaat bereikt hebben in veel minder tijd en met veel meer controle.