---
title: Animated Glassy
description: A high-performance WebGL refractive floating glass membrane and liquid silk background. Features realistic lens refraction, 3D specular rim glints, dual chained warp fluid dynamics, tritone color mapping, and seamless dark and light mode adaptation.
---

<ComponentPreview name="animated-glassy-demo" />

## Premium Pro Component

This is a premium Pro component. To get access to its source code and advanced interactive configurations:
1. Visit the pricing page: [https://lightswind.com/pricing](https://lightswind.com/pricing)
2. Purchase a license to unlock this component.

If you have already purchased a license, you can install this component directly via our CLI:

```bash
npx lightswind@latest add animated-glassy
```

*(Note: Make sure you have configured your API key in your project to authenticate your Pro license).*

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx lightswind@latest add animated-glassy
```

</TabsContent>

<TabsContent value="manual">

> [!IMPORTANT]
> This is a premium component. Manual copy-paste source code is only available to Pro license holders.
> Please purchase a plan at [https://lightswind.com/pricing](https://lightswind.com/pricing) to unlock manual access, or use the authenticated CLI command:
> 
> ```bash
> npx lightswind@latest add animated-glassy
> ```

</TabsContent>

</Tabs>

## Usage

```tsx
import { AnimatedGlassy } from "@/components/lightswind/animated-glassy"
```

```tsx
import { AnimatedGlassy } from "@/components/lightswind/animated-glassy";

export function Demo() {
  return (
    <div className="w-full h-[540px] relative overflow-hidden rounded-2xl">
      <AnimatedGlassy variant="violet" speed={1.0} distortion={0.3} refraction={0.86} glassSides={3}>
        <div className="flex flex-col items-center justify-center h-full text-center px-6">
          <h2 className="text-4xl font-extrabold text-foreground">Refractive Floating Glass</h2>
          <p className="mt-3 text-muted-foreground max-w-md">Luminous WebGL liquid silk flow with beveled glass refraction and specular rim lighting.</p>
        </div>
      </AnimatedGlassy>
    </div>
  );
}
```