Browse components
Fluid Glass
A liquid glass lens that trails the cursor, magnifying and refracting the content beneath it with chromatic edges.
Installation
npx shadcn@latest add @glint-ui/fluid-glassFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/fluid-glass.json
Usage
import { FluidGlass } from "@/components/ui/fluid-glass";
<FluidGlass className="h-[32rem]" size={200} zoom={1.35}>
<YourContent />
</FluidGlass>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content the lens floats over. Give it its own background. |
| size | number | 200 | Lens diameter in px. |
| zoom | number | 1.35 | Magnification inside the lens. |
| refraction | number | 60 | Px of edge refraction. |
| aberration | number | 6 | Px of chromatic split at the rim. |
| wobble | boolean | true | Squash and stretch the lens with its speed. |
| className | string | — | Extra classes for the root element. |