Role: Creative Developer (WebGL & Interaction)

To achieve maximum performance and control, I made the architectural decision to build this without high-level frameworks (like React or Vue).

The Stack: Vanilla JavaScript, Webpack, and SCSS.

The Logic: By bypassing the overhead of a framework, I gained granular control over the rendering loop, ensuring that the heavy WebGL textures and GSAP animations ran at a consistent 60fps on all devices.

Static images weren't enough to convey the "organic" theme. I utilized GLSL (OpenGL Shading Language) to create custom shaders for the imagery.

The Effect: As the user scrolls, images undergo a subtle liquid distortion, mimicking the flow of sap or water. This links the user's interaction (scrolling) directly to the visual narrative.

Optimization: I used OGL/Three.js to manage the 3D scene, ensuring textures were disposed of correctly to prevent memory leaks during navigation.

Infinite Navigation: I engineered a custom infinite loop for the product gallery, allowing users to explore the collection without hitting a "bottom."

Page Transitions: using GSAP, I built an SPA (Single Page Application) feel where pages morph into one another without a hard refresh.

Headless CMS: The site is fully dynamic, connected to Prismic CMS, allowing the client to update collections and stories without touching the codebase.

This project was developed as part of an advanced creative development curriculum.

Original Design: Luca Franceschetti

Development Mentorship: Luis Enrique Bizarro (Awwwards Academy)

Implementation: Jose Armando Felix – Responsible for full code implementation, logic, and animation tuning.

Stack: WebGL, Three.js, GLSL, Webpack, Node, Prismic, SCSS, JavaScript.