imessage-ui

Live showcase — one playground, reconfigured by toggles. Edit the kit and this updates instantly.

Heads-up: the glass engines shown here (CSS frost, PallavAg, ybouane, Hybrid) are legacy / comparison engines — none of them is the current production engine. The real one is the liquid-glass package (aave-faithful SVG refraction + jelly motion), tuned live at /debug/glass. Wiring liquid-glass into this iMessage chrome is the open integration step (see docs/liquid-glass-integration.md).

Playground

One container. Style = old iOS vs iOS 26. Theme = light / dark (and a photo background under iOS 26). Under Default, Chrome keeps the frosted blur header + input (the classic iOS material the messages blur under) or goes fully plain. Engine (iOS 26 only) picks the glass: CSS frost, PallavAg (SVG), ybouane (WebGL), or the new Hybrid. Inputflips the live view between a static sample and an interactive, keyboard-following thread. Tapbacks + a typing indicator are baked into the canonical messages so every scenario shows them.

Engine comparison — full chrome, scrolling

The same scrolling chrome rendered three ways. PallavAg (SVG feDisplacementMap, cheap to move) · ybouane (WebGL shader, true bevel + Fresnel) · Hybrid(PallavAg’s move-the-sample model + ybouane-tuned optics and bevel rim). Drag or scroll each; flip the background to compare refraction over a photo, white, and black.

Pixel calibration tool

(drop an iMessage screenshot below to tune HeroBubble against the real thing)