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.
| 1 | # @colineapp/liquid-glass |
| 2 | |
| 3 | > Liquid Glass for the web: the rim refraction, light and motion of iOS 27's glass on any rounded element, with React bindings and tabs whose thumb lifts into a lens. MIT. |
| 4 | |
| 5 | Version 0.1.0. Install: `npm install @colineapp/liquid-glass`. npm: https://www.npmjs.com/package/@colineapp/liquid-glass. Playground: https://liquid-glass.coline.space. |
| 6 | |
| 7 | Liquid Glass is a material, not a component library: put `<LiquidGlass />` first inside any positioned, rounded element and it becomes glass. Every option below has its own plain-text page. |
| 8 | |
| 9 |
| ## Docs |
| 10 |
| 11 | - [Agents guide](https://liquid-glass.coline.space/agents.md): how to use the package correctly, with the rules that keep the glass from blanking |
| 12 | - [Full reference](https://liquid-glass.coline.space/docs/api.md): every option, geometry field, method and export |
| 13 | - [Everything in one file](https://liquid-glass.coline.space/llms-full.txt) |
| 14 | - [Reference as JSON](https://liquid-glass.coline.space/options.json) |
| 15 |
| 16 | ## Examples |
| 17 |
| 18 | - [A glass toolbar in React](https://liquid-glass.coline.space/docs/examples/react.md): Render <LiquidGlass /> first inside a positioned, rounded element. |
| 19 | - [Without React](https://liquid-glass.coline.space/docs/examples/vanilla.md): createLiquidGlass inserts the glass as the element's first child. |
| 20 | - [Pill tabs](https://liquid-glass.coline.space/docs/examples/tabs.md): Your tabs, your selection; the thumb follows aria-selected. |
| 21 | - [A menu that materializes](https://liquid-glass.coline.space/docs/examples/menu.md): Fade the contents, never the surface; the glass grows from clear. |
| 22 | - [A glass dialog](https://liquid-glass.coline.space/docs/examples/dialog.md): floating="dialog" casts the deeper shadow; the glass materializes as the contents zoom in. |
| 23 | - [A search field that swells](https://liquid-glass.coline.space/docs/examples/search.md): interactive lights it under the pointer; swell springs it on press. |
| 24 | - [A glass card](https://liquid-glass.coline.space/docs/examples/card.md): Regular glass on a rounded box: the rim bends what crosses it, and the body keeps the card's text legible. |
| 25 |
| 26 | ## Options |
| 27 |
| 28 | - [Glass options: appearance](https://liquid-glass.coline.space/docs/options/appearance.md): `system` follows prefers-color-scheme |
| 29 | - [Glass options: variant](https://liquid-glass.coline.space/docs/options/variant.md): `regular` diffuses and evens out the page so text on the glass stays legible over anything |
| 30 | - [Glass options: floating](https://liquid-glass.coline.space/docs/options/floating.md): For menus, popovers, dialogs and sheets |
| 31 | - [Glass options: interactive](https://liquid-glass.coline.space/docs/options/interactive.md): For glass that holds controls, like SwiftUI's `.glassEffect(.regular.interactive())`: the pointer warms the glass beneath it, and a press blooms out from there |
| 32 | - [Glass options: swell](https://liquid-glass.coline.space/docs/options/swell.md): For glass you press, like a search field: pressed, the surface swells about its centre on the tabs' spring and springs back with a slight overshoot on release |
| 33 | - [Glass options: tint](https://liquid-glass.coline.space/docs/options/tint.md): Colour washed over the body by the tone's `tint` share (50% on dark regular glass, 40% on light) |
| 34 | - [Glass options: hue](https://liquid-glass.coline.space/docs/options/hue.md): A colour whose hue the glass takes on, like tinted iOS glass: each pixel beneath shifts toward the hue at its own brightness, so colours behind keep their chroma |
| 35 | - [Glass options: hueStrength](https://liquid-glass.coline.space/docs/options/hueStrength.md): How much of the hue the glass takes |
| 36 | - [Glass options: geometry](https://liquid-glass.coline.space/docs/options/geometry.md): The rim's shape, measured from iOS 27: its width and depth, how steeply it bends, the darkened edge and the glints |
| 37 | - [Glass options: tone](https://liquid-glass.coline.space/docs/options/tone.md): Per-appearance overrides of the variant's filters: body `blur`, `floatingBlur`, `saturate`, `contrast`, `brightness`, `tint` share, and the rim's `highlightContrast`, `highlightBrightness`, `shadeBrightness`, `glowSaturate`, `glowBrightness`, `edgeBrightness` |
| 38 | - [Glass options: fit](https://liquid-glass.coline.space/docs/options/fit.md): `box` fills the surface |
| 39 | - [Glass options: refraction](https://liquid-glass.coline.space/docs/options/refraction.md): Bend the page at the rim |
| 40 | - [Glass options: samples](https://liquid-glass.coline.space/docs/options/samples.md): Refraction samples per pixel |
| 41 | - [Geometry fields: bezel](https://liquid-glass.coline.space/docs/options/geometry-bezel.md): Width of the refracting rim along the top and bottom |
| 42 | - [Geometry fields: thickness](https://liquid-glass.coline.space/docs/options/geometry-thickness.md): Glass depth under the top and bottom rims |
| 43 | - [Geometry fields: sideBezel](https://liquid-glass.coline.space/docs/options/geometry-sideBezel.md): Width of the refracting rim at the sides and rounded ends |
| 44 | - [Geometry fields: sideThickness](https://liquid-glass.coline.space/docs/options/geometry-sideThickness.md): Glass depth under the sides and rounded ends |
| 45 | - [Geometry fields: refractiveIndex](https://liquid-glass.coline.space/docs/options/geometry-refractiveIndex.md): The glass's refractive index, for Snell's law at the rim |
| 46 | - [Geometry fields: maxFall](https://liquid-glass.coline.space/docs/options/geometry-maxFall.md): Rim bend: the steepest the rim's shift may fall per pixel inward |
| 47 | - [Geometry fields: edge](https://liquid-glass.coline.space/docs/options/geometry-edge.md): Width of iOS 27's darkened edge, a contour where the glass meets the air, with the hairline just inside it |
| 48 | - [Geometry fields: glint](https://liquid-glass.coline.space/docs/options/geometry-glint.md): Share of the hairline's light that gathers into glints where the light catches the curve, at the top-left and, fainter, the bottom-right |
| 49 | - [Geometry fields: hairline](https://liquid-glass.coline.space/docs/options/geometry-hairline.md): Rim hairline width |
| 50 | - [Geometry fields: hairlineSides](https://liquid-glass.coline.space/docs/options/geometry-hairlineSides.md): Share of the hairline's strength that reaches the sides |
| 51 | - [Geometry fields: shadeWidth](https://liquid-glass.coline.space/docs/options/geometry-shadeWidth.md): Width of the darkened sides |
| 52 | - [Geometry fields: glowReach](https://liquid-glass.coline.space/docs/options/geometry-glowReach.md): How far the inner glow reaches in from the top and bottom rims |
| 53 | - [Geometry fields: glowBottom](https://liquid-glass.coline.space/docs/options/geometry-glowBottom.md): Bottom glow strength relative to the top |
| 54 | - [The glass handle: update(options)](https://liquid-glass.coline.space/docs/options/handle-update.md): Replaces the options |
| 55 | - [The glass handle: magnify(factor)](https://liquid-glass.coline.space/docs/options/handle-magnify.md): Magnifies what is beneath the glass about its centre, as a raised lens does (1 for none), and sharpens it so it doesn't come out soft |
| 56 | - [The glass handle: materialize(timing?)](https://liquid-glass.coline.space/docs/options/handle-materialize.md): Grows the glass from clear to its tone, for surfaces that appear |
| 57 | - [The glass handle: dematerialize(timing?)](https://liquid-glass.coline.space/docs/options/handle-dematerialize.md): Fades the glass back to clear and holds it there, for surfaces that leave |
| 58 | - [The glass handle: destroy()](https://liquid-glass.coline.space/docs/options/handle-destroy.md): Removes the glass and its filters |
| 59 | - [The glass handle: element](https://liquid-glass.coline.space/docs/options/handle-element.md): The glass element, the surface's first child |
| 60 | - [The glass handle: appearance](https://liquid-glass.coline.space/docs/options/handle-appearance.md): The resolved appearance |
| 61 | - [Tabs: appearance](https://liquid-glass.coline.space/docs/options/tabs-appearance.md): As for glass |
| 62 | - [Tabs: orientation](https://liquid-glass.coline.space/docs/options/tabs-orientation.md): Vertical tabs stack and don't scrub |
| 63 | - [Tabs: tabs](https://liquid-glass.coline.space/docs/options/tabs-tabs.md): Selector for the tabs inside the track |
| 64 | - [Tabs: isSelected](https://liquid-glass.coline.space/docs/options/tabs-isSelected.md): Whether a tab is selected |
| 65 | - [Tabs: onSelect](https://liquid-glass.coline.space/docs/options/tabs-onSelect.md): Selects the tab the thumb was dragged onto |
| 66 | - [Tabs: glass](https://liquid-glass.coline.space/docs/options/tabs-glass.md): The track's own glass, or its options |
| 67 | - [Tabs: refraction](https://liquid-glass.coline.space/docs/options/tabs-refraction.md): Bend the page at the rims |
| 68 | - [React: <LiquidGlass />](https://liquid-glass.coline.space/docs/options/react-LiquidGlass.md): Glass behind a surface's content |
| 69 | - [React: useLiquidGlass(ref, options)](https://liquid-glass.coline.space/docs/options/react-useLiquidGlass.md): Turns an element you already render into a glass surface; the glass is inserted as its first child |
| 70 | - [React: useLiquidGlassTabs(ref, options)](https://liquid-glass.coline.space/docs/options/react-useLiquidGlassTabs.md): Liquid Glass tabs on a track you render |
| 71 | - [CSS: .liquid-glass-well](https://liquid-glass.coline.space/docs/options/css-liquid-glass-well.md): For a selected or hovered control on a glass surface: brightens the glass beneath it (dimmer in light), instead of glass on glass |
| 72 | - [CSS: --liquid-glass-shadow](https://liquid-glass.coline.space/docs/options/css-liquid-glass-shadow.md): The shadow floating glass casts |
| 73 | - [CSS: --liquid-glass-dialog-shadow](https://liquid-glass.coline.space/docs/options/css-liquid-glass-dialog-shadow.md): The deeper shadow of `floating: "dialog"` glass |
| 74 |