projects

SO Coffee 
Roasters 

Website for SO Coffee Roasters
deeper immersiontake a look
about

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.

SO Coffee — screenshot 1
SO Coffee — screenshot 2
SO Coffee — screenshot 3
technologies

Main technologies used in the development of this project — Next.js, React, Three.js, Blender, Rapier Physics

project role

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.

challenges and achievement

What I learned through this project:

 Adapting existing branding to a digital environment

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.

 Creating realistic 3D product visualization

3D models of coffee cups and packaging were carefully created to match the real-world products of the brand, ensuring visual consistency and authenticity.

 Custom smoke shader & physics-driven animation

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 and performance balance

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

Brand Adaptation & Web Design

  • Working within existing brand identity and logo
  • Designing the website layout and UI system
  • Implementing light and dark mode themes
  • Defining interaction patterns and visual hierarchy

3D Modeling, Shaders & Physics

  • Modeling coffee cups, packaging and other assets in Blender
  • Matching materials and visuals to real-world products
  • Developing a custom procedural smoke shader
  • Implementing real-time physics simulation with Rapier
  • Adding post-processing effects for visual enhancement
  • Optimizing 3D assets for web performance

Frontend Development

  • Integrating Three.js scenes
  • Implementing numerous custom CSS animations
  • Ensuring responsive layout
  • Performance optimization

Deployment

  • Cross-device testing
  • Final performance tuning
  • Deployment on Vercel (for now)
Visit Project