Developed brand exhibition pages and researched interactions for FILA, NEPA, and others
A 2024 project to build the exhibition page for the FILA x ThugClub collaboration. The scroll-driven video playback interaction suffered from loading delays depending on network conditions, and playback instability caused by the mismatch between the 30FPS video and varying monitor refresh rates.
The goal was to guarantee stable video playback regardless of network conditions, and to provide a consistent playback experience across different monitor environments.
Built the page on Vite and React, setting responseType to blob so the video's src only updated once the download finished, guaranteeing playback triggered by a user gesture. Also implemented throttling inside requestAnimationFrame to keep the video updating stably at 30FPS regardless of the monitor's refresh rate.
Delivered stable scroll-driven video playback regardless of network conditions or monitor specs. A consistent interaction experience that responded instantly to user gestures completed a premium experience befitting the brand collaboration.
A 2021 front-end project for maFILA, FILA's shoe customization service. Customers needed an intuitive 3D interaction that gave visual feedback and let them customize the shoe by clicking specific areas.
The goal was to offer a differentiated experience where brand customers could customize and purchase directly, and to strengthen usability through clear visual feedback for the clicked area.
Built the 3D environment on Vite and React, and implemented raycasting logic to precisely detect which mesh was under the mouse click. Implemented camera-update and mesh color-change animations with Tween.js to provide instant visual feedback for user interactions.
Successfully built an intuitive 3D customization interface. Precise area detection and smooth animation strengthened usability, giving brand customers a differentiated purchase experience where they could easily order a personalized product.
A 2021 project to build the exhibition page for NEPA's Spirit GTX shoe. The challenge was delivering an immersive sense of space while avoiding the performance hit that comes from overusing 3D models.
The goal was to effectively combine 2D and 3D elements to convey a sense of space while providing an optimized brand experience that didn't hurt page performance.
Set up the development environment on Webpack and ES6, and rather than building the entire space in 3D, strategically combined 2D images with 3D elements. Placed 3D models only in the core product area and implemented animation with Tween.js, balancing performance optimization against visual impact.
Built an exhibition page that delivered an immersive sense of space without any performance hit. The effective combination of 2D and 3D kept loading time to a minimum while still effectively conveying the brand product's premium experience.