Image Ripple Effect
A ripple across an image
A WebGL displacement effect built with React Three Fiber. Image textures hosted elsewhere need to permit cross-origin loading.
Preview & install Image Ripple EffectReact image effects
Explore ripples, image trails, particle logos, and interactive grids. Compare the treatment that fits your images, then install and adapt the source.
Choose by what the image needs to do
Use distortion to add texture to a prominent image, a trail to respond to movement, and a grid when visitors need to browse several images. Keep navigation and essential image content usable without hover.
Dithered Logo
A logo made of particles
Convert an image into a dithered canvas field with cursor ripples. Start with a clear image asset and tune the sampling controls.
Preview & install Dithered LogoImage Trail
Images following movement
Use an image trail as an expressive pointer-driven detail. Keep important content available outside the interaction.
Preview & install Image TrailFisheye Infinite Grid
An exploratory image grid
Browse a field of images with a fisheye treatment. Choose a grid when the collection itself is the main attraction.
Preview & install Fisheye Infinite GridWhat image assets should I use?
Use assets you are allowed to publish, sized for their actual display. For canvas and WebGL effects, verify cross-origin access or serve images from your own public directory. Test touch behavior separately from the desktop pointer preview.