https://acrnm-product-explorer.now.sh/

Technologies Used:

THREE.js, GLSL, SCSS, vanilla JS for DOM manipulation

Role:

Design, Development, Animation

Category:

Website

I made this website as an experimental demo for a favourite brand of mine - ACRNM from Germany.

I used THREE.js and GLSL for the layout, sliders, cursor and loader of the website. The rest is built using vanilla JS for DOM manipulation and the popmotion npm package for complex animations.

The project was challenging because since most of the website is drawn in WebGL, custom implementations of mouse hovering, scrolling and layouting were necessary.

I developed separate mobile version to account for touch and spent significant amount of time making sure this demo runs smoothly on various devices and tested on low-budget Androids, different iPhones and iPads to make sure each one gets the best performance. A dynamic Performance Manager frees up resources and degrades the quality if the framerate drops significantly.

NOTE: This website was made for presentational purposes and is not affiliated with Acronym GmbH. All of the materials on it belong to them.

I built a custom slider supporting clicks and dragging using shaders for nice image effect.

Once a product is highlighted, the user can press & hold to enter single view. The slider smoothly transitions from the main view to the single view and back.

All of the website layout is made using THREE.js with orthographic projection. A "explore" and regular 2D grid layouts are both supported. I made sure scroll is also supported and in sync with the WebGL scene.

I developed an augmented version for handheld devices to account for touch interactions, while preserving the WebGL scene for playful interaction.