A modern interactive website for SO Coffee Roasters, built on existing brand guidelines and transformed into a refined digital experience featuring realistic 3D visuals, custom shader effects, Rapier-powered physics animation, post-processing, dark mode, and optimized performance.
Next.js // React // Three.js // Blender // Rapier Physics
Web Design, UI /
UX Development, 3D Modeling, Shader Development, Frontend Development
Designed and developed the digital experience based on existing brand guidelines. Created realistic 3D product models, built a custom smoke shader, implemented Rapier-based physics for falling coffee beans, integrated post-processing and dark mode, and developed a performance-optimized frontend architecture enriched with refined CSS animations.
What I learned through this project:
The logo and brand identity were provided. The challenge was to design and structure the website in a way that respected the established branding while enhancing it through motion, interaction, shader effects, post-processing, CSS animations, and dark mode.
3D models of coffee cups and packaging were carefully created to match the real-world products of the brand, ensuring visual consistency and authenticity.
A custom procedural smoke shader was developed to simulate subtle rising steam from coffee, adding atmospheric depth. Falling coffee beans are simulated using the Rapier physics engine, creating natural real-time motion while maintaining smooth performance.
Post-processing effects were integrated to enhance depth and cinematic quality. The experience combines detailed 3D, physics simulation, and numerous CSS animations while remaining responsive and optimized across devices.
steps of development