Kaloyan

portfolio

Madzhunov

Loading...

The XR Cases

An experimental 3D portfolio website that allows the exploration of projects by navigating through an interactive 3D helix.

Period
2022
Expertise

Three.js

GSAP

Interaction Design

render

Showcasing XR projects

While pursuing my bachelor's studies, I took on a 4-month part-time internship at VanBerlo agency (acquired by Accenture), where I embarked on the experimental task of creating an innovative portfolio that would allow the studio to showcase their Extended Reality (XR) projects to clients. Mobile design was a priority to enable a convenient and portable way of showing the projects. The portfolio had to convey VanBerlo's playful brand elements in a subtle and interactive manner, intertwined with the feeling of depth to give a sense of the XR technology.

vanberlo-brand-elements

Creating a 3D web piece

To bring this concept to life, I decided to challenge myself by creating 3D web animations. Alongside visual exploration in Blender and Figma, I immersed myself in Three.js and GSAP development. Playing with the brand elements by adding depth led to the development of the project tunnel as a concept for the main navigation. Working with a senior digital designer helped me address UX/UI concerns and development issues about making the tunnel interactive and animating the images.

shapes-exploration
2.5d-shapes-exploration
abstract-ui-exploration-1
abstract-ui-exploration-2
abstract-ui-exploration-3
blender-tunnel-render
blender-tunnel-planes-render
planes-bend-depth-exploration-1
planes-bend-depth-exploration-2
planes-bend-depth-exploration-3
planes-helix-depth-ui-exploration-1
planes-helix-depth-ui-exploration-2
planes-helix-depth-ui-exploration-3

A unique XR portfolio

The resulting 3D interface showcases project content along a swipeable helix pattern. The seamless transition between triangles, squares, hexagons, and circles serves as a metaphor for increasing fidelity, relating to the iterative and playful exploration that defines VanBerlo's approach to prototyping. The engaging bouncy animation applied to the images is inspired by how the wind moves ship sails and acts as a micro-interaction for movement. These visual cues invite users to explore VanBerlo's XR projects* by swiping up and down through the tunnel, providing a unique experience.

*The project images shown on this page have been created with AI for illustrative purposes only and have no relation to any of VanBerlo's XR projects.

ui-screens-home
ui-screens-project-part-1
ui-screens-project-part-2