# Closing Plasma

> A premium footer-ready plasma background with atmospheric noise and smooth pointer-driven flow.

<demo-closing-plasma>



</demo-closing-plasma>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/closing-plasma.json"
```

## Usage

```vue
<script setup lang="ts">
  import ClosingPlasma from '~/components/ui/closing-plasma/ClosingPlasma.vue';
</script>

<template>
  <ClosingPlasma class="h-100" />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Animation speed multiplier
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        turbulence
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Amount of layered FBM deformation
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mouse-influence
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Strength of pointer distortion
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        grain
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Procedural grain intensity
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        sparkle
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Sparkle highlight intensity
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        vignette
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Edge falloff intensity
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Final alpha of the plasma output
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        interactive
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Enables pointer interaction
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dark-color-a
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#0d0d14'
      </code>
    </td>
    
    <td>
      Dark palette base tone
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dark-color-b
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#1f2540'
      </code>
    </td>
    
    <td>
      Dark palette mid tone
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dark-color-c
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#4a6191'
      </code>
    </td>
    
    <td>
      Dark palette highlight tone
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        light-color-a
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#f0f2f7'
      </code>
    </td>
    
    <td>
      Light palette base tone
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        light-color-b
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#d7dceb'
      </code>
    </td>
    
    <td>
      Light palette mid tone
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        light-color-c
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#bcc5e0'
      </code>
    </td>
    
    <td>
      Light palette highlight tone
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Additional CSS classes
    </td>
  </tr>
</tbody>
</table>