# Fresh & Healthy: cosmetics bottles in glass and color

> A cosmetics landing page built to push glass rendering: bottles with believable transparency and refraction, and colors that change on the fly.

Canonical page: https://andersonmancini.dev/blog/cosmetics-landing-glass

Published: 2026-08-31 · 1 min read · Tags: three.js, webgl, glass, product, launch

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](https://andersonmancini.dev/images/cosmetics.webp)

## 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](https://andersonmancini.dev/videos/threejs-cosmetics-time-lapse.md), a [rendering video](https://andersonmancini.dev/videos/threejs-cosmetics-rendering.md) and a video of the [finished demo with the live link](https://andersonmancini.dev/videos/finished-cosmetics-demo-live-link.md). A later glass material is shown in the [perfume example](https://andersonmancini.dev/videos/threejs-advanced-glass-material-for-r3f-perfume-example.md).

## Try it

The page is live at [threejs-cosmetics.vercel.app](https://threejs-cosmetics.vercel.app/), and the details are on the [project page](https://andersonmancini.dev/projects/fresh-and-healthy.md).

## Related projects

- [Fresh & healthy](https://andersonmancini.dev/projects/fresh-and-healthy.md) — Cosmetics landing page