---
title: Shader Card 2
description: An advanced, high-performance WebGL simplex FBM procedural plasma tendril card component with dynamic wave distortion, custom color grading, ambient glow, and interactive 3D perspective tilt.
---

<ComponentPreview name="shader-card-2-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 shader-card-2
```

*(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 shader-card-2
```

</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 shader-card-2
> ```

</TabsContent>

</Tabs>

## Usage

```tsx
import ShaderCard2 from "@/components/lightswind-pro/shader-card-2";
```

```tsx
import ShaderCard2 from "@/components/lightswind-pro/shader-card-2";
import { Sparkles, Check, ArrowRight } from "lucide-react";

export default function PricingDemo() {
  return (
    <ShaderCard2
      color="#5227FF"
      speed={0.5}
      noiseScale={1.5}
      waveAmount={0.15}
      branchIntensity={2.0}
      blur={5.0}
      opacity={0.8}
      enableTilt={true}
      glow={true}
      className="max-w-[380px] w-full p-7"
    >
      <div className="flex flex-col gap-4">
        <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-wider bg-black/5 dark:bg-white/10 text-foreground backdrop-blur-md border border-black/10 dark:border-white/15">
          <span className="w-2 h-2 rounded-full bg-[#5227FF] animate-pulse" />
          <span>Most Popular</span>
        </div>
        <div>
          <h3 className="text-2xl font-extrabold tracking-tight text-foreground flex items-center gap-2">
            Enterprise AI Pro
            <Sparkles className="w-4 h-4 text-[#5227FF]" />
          </h3>
          <p className="text-xs text-muted-foreground mt-1">
            Real-time procedural GPU shaders and high-fps 3D UI elements.
          </p>
        </div>
      </div>

      <div className="my-5 py-4 border-y border-border/60 flex items-baseline gap-2">
        <span className="text-5xl font-black text-foreground">$49</span>
        <span className="text-xs text-muted-foreground">/ month</span>
      </div>

      <button className="w-full py-3 px-4 rounded-xl text-sm font-bold text-white bg-[#5227FF] flex items-center justify-center gap-2">
        <span>Get Started with Pro</span>
        <ArrowRight className="w-4 h-4" />
      </button>
    </ShaderCard2>
  );
}
```