# @colineapp/liquid-glass

> 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.

Version 0.1.0. Install: `npm install @colineapp/liquid-glass`. npm: https://www.npmjs.com/package/@colineapp/liquid-glass. Playground: https://liquid-glass-e55033.coline.space.

## A magnifying lens

The tab lens on its own: the lens variant, its geometry, four samples and magnify().

```tsx
import { useRef } from "react";
import { LENS_GEOMETRY } from "@colineapp/liquid-glass";
import { LiquidGlass, type LiquidGlassHandle } from "@colineapp/liquid-glass/react";

export function Lens() {
  const lens = useRef<LiquidGlassHandle | null>(null);
  return (
    <div
      className="absolute size-24 rounded-full"
      onPointerDown={() => lens.current?.magnify(1.15)}
      onPointerUp={() => lens.current?.magnify(1)}
    >
      <LiquidGlass glassRef={lens} appearance="class" variant="lens" geometry={LENS_GEOMETRY} samples={4} />
    </div>
  );
}
```