# Image Ripple Effect

> A WebGL-based image distortion effect that creates ripple waves on mouse hover using FBO ping-pong displacement mapping.

<demo-image-ripple-effect>



</demo-image-ripple-effect>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/image-ripple-effect.json"
```

## Usage

```vue
<script setup lang="ts">
  import ImageRippleEffect from '~/components/ui/image-ripple-effect/ImageRippleEffect.vue';
</script>

<template>
  <ImageRippleEffect
    :images="[
      {
        src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop',
        alt: 'Mountains',
      },
    ]"
  />
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        images
      </code>
    </td>
    
    <td>
      <code>
        RippleImageItem[]
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Array of image objects with <code>
        src
      </code>
      
       and optional <code>
        alt
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        brush-texture-url
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Custom brush texture URL (defaults to radial gradient SVG)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        distortion-strength
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.075
      </code>
    </td>
    
    <td>
      Strength of the UV distortion effect
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        wave-count
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        100
      </code>
    </td>
    
    <td>
      Number of wave meshes in the pool
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        wave-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        60
      </code>
    </td>
    
    <td>
      Size of each wave circle in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        wave-rotation-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.025
      </code>
    </td>
    
    <td>
      Rotation speed of each wave per frame
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        wave-fade-multiplier
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.95
      </code>
    </td>
    
    <td>
      Opacity decay multiplier per frame (0-1)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        wave-growth
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.155
      </code>
    </td>
    
    <td>
      Scale growth per frame
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        wave-spawn-threshold
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.1
      </code>
    </td>
    
    <td>
      Minimum normalized distance before spawning a new wave
    </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>