distortion

@frontend_mono/ripple-shader

Interactive ripple shader effect powered by React Three Fiber

Version: 1.0.0

Slug: ripple-shader

Live preview enabled

Install

npm i @frontend_mono/ripple-shader

Usage

import rippleShader from '@frontend_mono/ripple-shader'<rippleShader />

Demo props

const props = {
  className: 'h-[320px] w-full',
  brushSrc: '/images/overlay.png',
  imageSources: ['/images/1.jpg', '/images/2.jpg', '/images/3.jpg'],
  waveCount: 100
}

<rippleShader imageSources={['/images/1.jpg', '/images/2.jpg', '/images/3.jpg']} />

How it looks when used

Move your pointer over the preview