Cocktail ingredients have some specific amounts set (1/4 oz), some general (a dash, a sprinkle). This would need some IA thought but ultimately I would imagine that the height of each ingredient color would represent the amount of the ingredient being added. All of these ingredient amounts would total 100% of the parent container height.
Animate into single drink color
Once all of the ingredients are poured, the ingredient colors should combine into one another and create the drink color.
Color elements would "smush" together a bit, possibly using a transform: scaleY() on the parent container, then rise slightly as the new drink color.
Ingredient colors could possibly overlap one another and use the mix-blend-mode property to create the drink color. This might have mixed (pun intended) results but worth a shot.
If the previous idea creates too many unexpected results, the ingredient colors could instead fade into the main drink color which could be set as the background-color of the parent element.
Ingredient color sizing
Cocktail ingredients have some specific amounts set (1/4 oz), some general (a dash, a sprinkle). This would need some IA thought but ultimately I would imagine that the height of each ingredient color would represent the amount of the ingredient being added. All of these ingredient amounts would total 100% of the parent container height.
Animate into single drink color
Once all of the ingredients are poured, the ingredient colors should combine into one another and create the drink color.
transform: scaleY()on the parent container, then rise slightly as the new drink color.mix-blend-modeproperty to create the drink color. This might have mixed (pun intended) results but worth a shot.background-colorof the parent element.