# Ripple Distortion

> The RippleDistortion component is an interactive WebGL-powered React component built with Three.js and custom shaders. It takes an image as input and applies a dynamic ripple-like distortion that reacts smoothly to mouse movement. Unlike grid-based distortion, this effect creates concentric wave ripples that radiate outward from the cursor, giving the illusion of water-like refraction. The distortion is highly customizable through parameters such as frequency (number of ripples), amplitude (intensity of displacement), and speed (animation flow), making it versatile for different visual styles. This component is especially useful for enhancing hero sections, backgrounds, or interactive showcases where subtle motion effects can draw user attention and add a premium, immersive feel to the UI.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: three
- Live preview: https://21st.dev/@ruixen.ui/components/ripple-distortion

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/ripple-distortion?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt