About this Component
Bring your images to life with a stunning ripple distortion effect. Shader Ripple Card creates smooth, shader-powered reveal animations that transition from grayscale to color—or seamlessly blend between two images—using click, hover, or scroll interactions.
How to use
Drop the component onto your page, upload your primary image, and optionally add a second image for a transition effect. Choose your preferred trigger, customize the ripple intensity and animation timing, then you're ready to go—all from the properties panel, with no code required.
Features
Beautiful shader-powered ripple distortion
Reveal from grayscale to full color
Optional Image A → Image B transition
Trigger on Click, Hover, or Scroll
Configurable default state (Rest or Active)
Adjustable ripple intensity
Custom animation duration
Adjustable border radius
Smooth GPU-accelerated rendering for high performance
Lightweight single code component
Perfect for portfolios, case studies, product cards, galleries, creative landing pages, and interactive image showcases that deserve a premium, memorable interaction.
