Hi everyone,
I’d like to share SUHHA, a teaser website for a Japanese wellness bath aroma brand.
The site uses three.js to create a quiet, cinematic product experience around a 3D bathtub scene.
Instead of using three.js only as a decorative background, I tried to make the 3D scene part of the brand experience itself — combining product storytelling, atmosphere, and subtle interaction.
The goal was to create a calm, premium, and sensory feeling, something closer to a product film than a typical landing page.
Built with
- three.js
- scroll-based storytelling
- real-time 3D product scene
- atmospheric lighting
- mobile-conscious layout and performance tuning
- real-time visual tuning with Leva
Visual tuning workflow
During development, I used a Leva control panel to tune the scene visually in real time.
It helped me adjust lighting, camera position, material parameters, fog, and atmospheric effects directly in the browser, without repeatedly changing values in code and reloading the page.
This was especially useful in an AI-assisted workflow, because many visual details are hard to describe precisely in words — for example, how dark the scene should feel, how soft the reflections should be, or how much steam should remain visible.
By exposing those parameters in Leva, I could explore the mood visually and make final adjustments through direct interaction.
This workflow was very helpful for finding the right balance between darkness, soft reflections, steam, and product visibility.