Metal Ripple

A beautiful ripple effect using Metal shaders with SwiftUI integration

Credits

This ripple effect implementation is based on the original code from DesignCode. Please visit their website to see more awesome tutorials and courses!

Visit DesignCode Tutorial

Preview

Code

1import SwiftUI
2
3struct MetalRippleImageView: View {
4    @State var counter: Int = 0
5    @State var origin: CGPoint = .init(x: 0.5, y: 0.5)
6    
7    var body: some View {
8        Image("ripple")
9            .resizable()
10            .aspectRatio(contentMode: .fit)
11            .clipShape(RoundedRectangle(cornerRadius: 25, style: .continuous))
12            .onPressingChanged { point in
13                if let point {
14                    origin = point
15                    counter += 1
16                }
17            }
18            .modifier(RippleEffect(at: origin, trigger: counter))
19            .padding(40)
20            .frame(maxWidth: .infinity, maxHeight: .infinity)
21    }
22}
23
24#Preview {
25    MetalRippleImageView()
26}