Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/ripple-distortionimport RippleDistortion from "@/components/ui/ripple-distortion";
export default function DemoOne() {
return (
<div className= "w-screen h-screen flex items-center justify-center bg-background" >
<div className="w-[600px] h-[400px] rounded-2xl overflow-hidden shadow-lg" >
<RippleDistortion
imageSrc="https://images.unsplash.com/photo-1507525428034-b723cf961d3e"
frequency = { 25.0}
amplitude = { 0.03}
speed = { 6.0}
className = "w-full h-full"
/>
</div>
< /div>
);
}