Fresh & Healthy: cosmetics bottles in glass and color

· 1 min read · three.js, webgl, glass, product, launch

Glass cosmetics bottles with colored liquids on a clean studio background, a product landing page built with Three.js

Beauty and wellness brands need packaging to feel tactile. A bottle photographed flat loses most of what makes it desirable: the way light passes through it. This landing page was built to push glass and product rendering in Three.js.

Cosmetics bottles in glass

What it does #

  • Glass bottles and packaging with convincing transparency, refraction and studio polish, in real time.
  • Colors change on the fly. Tints, labels and surface response stay believable as you move through different product looks.

It is a clean concept for beauty brands, where premium packaging has to feel real in the browser and not like a static photo.

Videos #

I made a time-lapse of the build, a rendering video and a video of the finished demo with the live link. A later glass material is shown in the perfume example.

Try it #

The page is live at threejs-cosmetics.vercel.app, and the details are on the project page.

Related projects