Components
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.
import RippleDistortion from "@/components/ui/ripple-distortion";
const settings = {
frequency: 30,
amplitude: 0.02,
speed: 5,
antialias: true,
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen">
<RippleDistortion
imageSrc="https://cdn.21st.dev/assets/stock/photo/1015.jpg"
frequency={s.frequency}
amplitude={s.amplitude}
speed={s.speed}
antialias={s.antialias}
/>
</div>
);
}
Dependencies
Published
Similar components
Explore more
Part of Ruixen UI — browse the full library on 21st.dev.