# Liquid Blob

> A morphing liquid blob animation that follows the cursor with spring physics.

<demo-liquid-blob>



</demo-liquid-blob>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import LiquidBlob from '~/components/ui/liquid-blob/LiquidBlob.vue';
</script>

<template>
  <LiquidBlob class="h-75 w-full rounded-xl bg-neutral-100 dark:bg-zinc-900" />
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        color1
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#7c3aed'
      </code>
    </td>
    
    <td>
      Primary color of the blob
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color2
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#06b6d4'
      </code>
    </td>
    
    <td>
      Secondary color of the blob
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        300
      </code>
    </td>
    
    <td>
      Size of the blob in pixels
    </td>
  </tr>
  
  <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>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Additional CSS classes for the container
    </td>
  </tr>
</tbody>
</table>