A wave animation built with shaders in SwiftUI.

Shader.metal

#include <metal_stdlib>
#include <SwiftUI/SwiftUI_Metal.h>
using namespace metal;

// Create a horizontal bar
float bar(vector_float2 uv, float start, float height) {
	return step(uv.y, height + start) - step(uv.y, start);
}

// Create waves animation using GLSL
// Inspired by https://www.shadertoy.com/view/NtSBR3
[[ stitchable ]] half4 wavesAnimation(
		float2 position,
		half4 color,
		float4 bounds,
		float secs
) {
		// Amount of animated rows
		float rows = 12;
	
		// Normalized pixel coordinates (from 0 to 1)
		vector_float2 uv = position/bounds.zw;
	
		// Set 'default' color
		vector_float3 col = vector_float3(0.8, 1, 1);
		
		// Generate all rows
		for (float i = 0; i < 1; i += 1 / rows) {
			float wave = sin((i * 14 + secs * 2 + uv.x * 5) * .4) * .08 * (1 - i);
			uv.y += wave;
			col += vector_float3(-.08 + i * .005, i * -.08, 0.004) * bar(uv, i + 1 / rows, i + 1);
		}
	
		// Return animation
		vector_float4 fragColor = vector_float4(col + vector_float3(0., 0., col.r * .3), 1.0);
		return half4(fragColor.x, fragColor.y, fragColor.z, fragColor.w);
}

WavesAnimationView.swift

import SwiftUI

struct WavesAnimationView: View {
	let start = Date()

	var body: some View {
			VStack {
				TimelineView(.animation) { context in
					RoundedRectangle(cornerRadius: 12)
						.wavesAnimation(
								seconds: context.date.timeIntervalSince1970 - self.start.timeIntervalSince1970
						)
						.clipShape(RoundedRectangle(cornerRadius: 12))
				}
			}
			.ignoresSafeArea()
	}
}

extension View {
	func wavesAnimation(seconds: Double) -> some View {
		self.colorEffect(
			ShaderLibrary.default.wavesAnimation(.boundingRect, .float(seconds))
		)
	}
}

#Preview {
	WavesAnimationView()
}

Oh I'm guessing I need to have the Xcode 15 beta for this to work?

Oh I'm guessing I need to have the Xcode 15 beta for this to work?

Yeah this is Xcode 15 & iOS 17 only for now.