Agua de hoy
/8
vasos
Water glass with straw
A water intake counter: the level rises with each tap, and the straw and stripes look broken inside the water.
Settings
Code
<div class="uvq11-wg" style="--lv:.375"><div class="gs"><i class="s1" aria-hidden="true"></i><button type="button" class="tb" aria-label="Add a glass"><span class="bk"></span><span class="wt"><span class="s2"></span><span class="wr"></span><span class="bb"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i></span></span><span class="po"></span><span class="gw"></span></button></div><div class="cn"><p class="lb">Water today</p><p class="ct"><output class="n">3</output><span>/8</span></p><p class="un">glasses</p><div class="bt"><button type="button" class="ch mn" aria-label="Remove a glass"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/></svg></button><button type="button" class="ch pl" aria-label="Add a glass"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button></div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Liquid Glass
See all Liquid GlassWhere to use it
A hydration tracker built around a glass tumbler in CSS. Behind it there is a striped wall, and inside the water the stripes appear wider and shifted, while the straw seems to snap at the surface, the classic refraction you see at any table. Each glass added pours in with a wobble of the meniscus and rising bubbles.
Change the water and straw colors, rename the label, and use the plus and minus buttons or tap the glass itself. Eight glasses fill it to the top, which makes it handy for health apps and daily habit trackers.