Joran Vreye
Contact
VIEWPORT_01 // HERO
> Project Detail

LUN-X

An interactive product website for fictional night vision glasses, with a visual theme switch where the visitor virtually puts on the glasses and the interface transforms.

Realtime & Interactive Software
Web & App Development
VIEWPORT_02 // METADATA
Period
November 2025 - January 2026
My Roles
UI/UX DesignerWeb Developer3D Designer
Used Technologies
Webflow
GSAP
Spline
Figma
Links
VIEWPORT_03 // PROJECT CONTENT
LUN-X hero section
1/4

Project documentation

Context

LUN-X is a fictional pair of night vision glasses that would allow you to see in the dark. For the course Web Animations I built a full product website around it, from concept and design in Figma to a working, animated website in Webflow.

The website consists of a hero with an interactive 3D model of the glasses that follows your cursor, a technology section with specs and info cards, a central transition animation and an experience section. The visual concept is built around a theme switch: the website starts in a dark blue-purple atmosphere representing the night, and through a scroll animation where the visitor virtually puts on the glasses, everything shifts to a dark green and neon green theme representing what you would see through the lenses.

Transition animation

Challenge

The design was my biggest personal challenge. Design is not my strongest suit compared to technical work, but I deliberately put a lot of time into it and the result is the best design I have made so far.

The 3D model of the glasses was built in Spline, which turned out to be a technically frustrating experience. Booleans crashed the software, textures glitched and the interface was slow. On top of that, the model caused performance issues in Webflow despite its small file size, something I did not anticipate.

The GSAP animations were also a challenge, not because of complexity but because of the sheer amount of animations I wanted to implement. I knew what I wanted and how to approach it, but it took a lot of time to get everything right.

Result

The end result looks exactly the way I envisioned it. The theme switch is smooth, the animations are layered and the website has a strong visual identity I am proud of.

The biggest lesson from this project is that the right tools make a real difference. Webflow and Spline were requirements of the assignment, but both came with a lot of bugs and limitations. With React and Blender I would have achieved the same result in far less time and with much more control.

OUTLINER_01 // NAVIGATION