The goal of the Melody Earbuds project was to create a responsive, visually engaging website that introduces and promotes a new line of wireless earbuds named Melody. These earbuds were inspired by Loop earbuds and featured a distinct magic circle design, available in four vibrant colors: red, blue, purple, and pink. The website aimed to combine aesthetic appeal with smooth interactivity to enhance the overall user experience. To reinforce branding beyond the screen, I also designed a set of promotional posters using Adobe Photoshop and Illustrator, ensuring a consistent visual identity across digital and print platforms.
One of the most complex parts of this project was optimizing the 3D assets for web use without sacrificing quality. Balancing file size and visual detail was crucial to ensuring quick load times and smooth interaction. Integrating the scroll-triggered image sequence also posed challenges — I had to manage performance across devices while syncing the animation accurately with the user’s scroll behavior. Some layout issues occurred when combining responsive design with GSAP animation, especially at different breakpoints, which required detailed debugging. On the print side, I encountered difficulties calibrating colors between digital screens and printed posters, which I addressed by adjusting color profiles and resolution settings carefully.
This project taught me how to integrate multiple forms of media into a cohesive interactive experience. I modeled the earbuds using Cinema 4D, then used Model Viewer to display them as interactive 3D models on the website, allowing users to view the product from every angle. One key learning experience was implementing an image sequence scroll effect — a smooth animation that responds to the user’s scroll, creating a cinematic transition that added storytelling depth to the product reveal. I built this using GSAP (GreenSock Animation Platform), which allowed precise control over frame-by-frame animation. I also utilized Sass to organize and scale my stylesheets efficiently. Through this, I learned how animation, 3D interaction, and styling can work together to elevate user engagement. Lastly, working on posters alongside the web design highlighted the value of maintaining strong, consistent cross-platform branding.
The Melody Earbuds website project was a well-rounded creative and technical experience, blending 3D modeling, scroll-based animation, web development, and graphic design into one unified product showcase. By combining Cinema 4D, Model Viewer, GSAP, image sequence animation, Sass, and Adobe Creative tools, I was able to deliver an immersive digital experience that communicates the product’s style and function across multiple media. The process not only strengthened my development and animation skills but also taught me how to tell a product story through design, motion, and interaction. It’s one of the most complete examples of my ability to create an engaging and professional user experience from concept to launch.
