---
title: Animated Prism
description: A high-performance WebGL chromatic dispersion optical prism background component. Features realistic light refraction, spectral caustic caustics, multi-variant color presets, interactive cursor beam tracking, film grain anti-banding, and seamless dark and light mode adaptation.
---

<ComponentPreview name="animated-prism-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-prism
```

*(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-prism
```

</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-prism
> ```

</TabsContent>

</Tabs>

## Usage

```tsx
import { AnimatedPrism } from "@/components/lightswind/animated-prism"
```

```tsx
import { AnimatedPrism } from "@/components/lightswind/animated-prism";

export function Demo() {
  return (
    <div className="w-full h-[520px] relative overflow-hidden rounded-2xl">
      <AnimatedPrism variant="prism" speed={0.8} intensity={3.8} spread={2.8} beamWidth={0.28}>
        <div className="flex flex-col items-center justify-center h-full text-center px-6">
          <h2 className="text-4xl font-extrabold text-foreground">Spectral Optical Prism</h2>
          <p className="mt-3 text-muted-foreground max-w-md">Luminous WebGL chromatic dispersion with real-time cursor reaction.</p>
        </div>
      </AnimatedPrism>
    </div>
  );
}
```