# @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.coline.space.

## A glass card

Regular glass on a rounded box: the rim bends what crosses it, and the body keeps the card's text legible.

```tsx
import { LiquidGlass } from "@colineapp/liquid-glass/react";
import "@colineapp/liquid-glass/styles.css";

export function Card() {
  return (
    <div className="relative grid gap-1 rounded-[30px] p-5">
      <LiquidGlass appearance="class" />
      <h3 className="font-semibold">Now playing</h3>
      <p className="text-sm opacity-70">Glass takes the box's radius and follows its size.</p>
    </div>
  );
}
```