colineliquid-glass

Public

Liquid Glass for the web: the rim refraction, light and motion of iOS 27 glass on any rounded element. React bindings and pill tabs. MIT.

feat(liquid-glass): 0.2.0, resynced with Coline's iOS 27 glass and motion Ports what changed in Coline's glass since 0.1.1: - Engine: the refraction is a layer of its own masked to the rim, so the body is the page's own pixels instead of a nearest-pixel resample. New `rimShare` geometry (0.6) keeps small glass's top and bottom rims short of its middle; maxFall 0.45 and glowBottom 0.8 by default; four refraction samples by default; slices built at up to 3x; a 96-build cache, and prewarmLiquidGlass() builds radii ahead of time. - `shape`: glass of any outline from an SVG path (createShapedGlass), shaded from each pixel's distance to the outline. - `level`: iOS 27's Clear to Tinted slider, measured at each stop. Light glass washes and frosts; dark glass is a smoky film that keeps the colour beneath. `clear` is level 0. Floating glass has a body of its own at every level. - Interactive glass swells on press and leans after a drag (taffy), and light interactive glass floats on a faint shadow. Menu and dialog triggers don't swell. kickGlass() bulges or gives a swelling surface. - pourFrom() and drawBack(): menus pour out of their button and cover it, and draw back into it as a drop, frame-matched to iOS 27; sub-menus unfold from their own edge, context menus from a point. - attachLiquidGlassHighlight / useLiquidGlassHighlight: a hover pill whose edges ride lead and trail springs. - Tabs follow iOS 27's segmented control: a solid thumb that clears into a bigger clear lens, hangs, and refills; semibold labels that hold their width (LiquidGlassTabLabel); no track swell or magnifying lens. Vertical lists keep their well. - materialize() and dematerialize() ease out on a cubic curve, 240/180 ms. The demo site uses the new menu, tabs, highlight and level slider, its docs are regenerated, and the sync script splits origin/main, the live line. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>