Homebrew
Liquid Glass is a progress visualization that fills a glass-shaped container as something progresses — a homebrew fermentation, a water-intake goal, a pour-over coffee timer, a sourdough proof. Pass a progress value 0–100 and a liquid variant (beer, water, wine, coffee, dough) and embed anywhere.
Where a progress bar says "63% of the way there" with a thin rectangle, Liquid Glass says it with a beer glass that actually fills up — foam, bubbles, amber gradient, pilsner silhouette — and reads the same 63% at the bottom. It is built for hobbyist dashboards where the subject matter has a natural liquid metaphor (fermentation, hydration, extraction) and generic progress bars feel clinical. Five liquid presets ship: beer (with foam head + rising carbonation bubbles), water (clean blue, no foam), wine (deep burgundy, no foam), coffee (dark brown with crema foam), and dough (pale beige, no foam — use for sourdough proof). The glass renders as an inline SVG with animated wave motion on the liquid surface, so even static-progress widgets feel alive. Progress and liquid variant are URL parameters, so the widget is embedabble anywhere an iframe works: Notion databases tracking brew batches, Obsidian daily-notes with a hydration tracker, personal dashboards assembled on the graph-engine builder. The widget is also the first WidgetCraft visualizer built on the Sprint 5.7 graph-engine substrate — open it in the Graph Builder (`/builder/graph?preset=liquid-fill`) to see the node graph that produces the rendered output, and connect new inputs (a Duration → Progress transform, a user-editable Number node) to build your own variant.
Questions, answered.
What liquids are available?
Five presets: beer (amber with foam head), water (clear blue, no foam), wine (deep burgundy), coffee (dark brown with crema), dough (pale beige — good for sourdough proofs). Pass `?liquid=beer` through to `?liquid=dough`.
Can I use this for things that aren't homebrewing?
Yes. Anything with a natural fill metaphor: daily water intake (use `liquid=water`), an espresso pull or brew timer (`liquid=coffee`), a sourdough proof (`liquid=dough`), a barrel-aging timer (`liquid=wine`). Generic percentage progress works too — the beer variant is the default because it's visually loudest.
Does the fill animate automatically?
Yes — the liquid surface has a continuous wave animation, and beer and coffee variants have rising bubbles. The fill level itself changes only when the `progress` parameter changes (via URL update or postMessage from the builder).
How do I connect it to a live data source?
Open `/builder/graph?preset=liquid-fill` to see the widget as a node graph. Replace the Number Input node with a live-data node (e.g. a Duration → Progress transform wired to a countdown from a target date), drag a connection into the Liquid Glass `fill` port, and the widget now renders against live data. Share the resulting URL — the graph is encoded in the hash.
Is this production-ready?
The widget renders cleanly in Notion, Obsidian, and direct-web embeds. The underlying graph-engine is Sprint 5.7 substrate; the visual editor is Sprint 5.9-ready today. If you're composing complex multi-source graphs, the builder is the recommended path; if you want a simple fixed-fill progress indicator, direct URL-param embedding works and has no dependencies.
Does the fill animation use a lot of battery?
The wave uses requestAnimationFrame at the browser's refresh rate, so on a 60Hz display it's about 16ms of work per frame, and the SVG renders on the GPU. The bubble rise animations use CSS keyframes, which are GPU-accelerated. On laptops and mobile devices you won't see a meaningful battery impact from a single widget embedded in a page; if the host page has dozens of them, the browser automatically pauses off-screen animations.