How a Developer Faked Spreading Liquid Foundation with Three.js

Spreading Liquid with Three.js

Misaki Nakano explains how he built the liquid foundation simulation for a Japanese cosmetics site in 2021. A fluid simulation drives a velocity map, which moves a height map representing liquid thickness; a separate alpha map keeps the traces left behind, and normals computed from the height map add highlights via a Matcap texture. He admits the volume isn't conserved — circular strokes keep adding liquid — but the look is what matters.