Realistic Rain Distortion Effect | SwiftUI + Metal Shaders

RAIN EFFECT FOR SWIFTUI – REALISTIC ANIMATED RAIN, POWERED BY METAL

WHAT IS THIS

This is a drop in SwiftUI + Metal source code package that adds a realistic animated rain effect to your iOS or macOS app. Water droplets fall, wobble, leave trailing streaks, and refract the image or content behind them, just like real rain on glass.

It is built as a single reusable SwiftUI view modifier, so you can attach it to almost anything in your app with one line of code. No external dependencies, no third party frameworks, just SwiftUI and Metal.

See it in action in the video above, where I used this exact effect on the cover art and background of a Music Player app UI.

WHY YOU MIGHT WANT THIS

• Add a premium, tactile feel to album covers, photo memories, weather screens, splash screens, login screens, or any full app background

• Save hours of work. Writing a procedural rain shader from scratch, tuning it to look natural, and wiring it up correctly to SwiftUI (including performance pitfalls around gestures, TimelineView, and system components like Menu) takes real time. This package already solved those problems.

• Fully customizable: control fall speed and drop density with simple parameters, pause the animation during gestures or scrolling, adjust corner radius and sizing

• Two ready to use modes: apply the effect to a single static image (cheap, ideal for cover art), or apply it live to an entire SwiftUI view hierarchy (VStack, ZStack, full screens)

• Clean, documented, commented source code you can read, learn from, and modify freely for your own projects

• Works with SwiftUI’s native Shader and TimelineView APIs, no private APIs

WHAT IS INCLUDED

• RainEffect.metal – the Metal shader source that generates the entire rain simulation (falling drops, static condensation droplets, refraction)

• RainEffect.swift – the SwiftUI view modifier (rainEffect) that connects the shader to your views, with speed, density, pause, frame rate cap, and image or live view modes

• ImageResize.swift – a small UIImage helper for aspect fit resizing images before feeding them into the effect

• ContentView-Example.swift – two working example screens showing both usage modes, ready to copy into your own project

• A plain text guide explaining how the shader and the SwiftUI modifier work internally, so you are never guessing what a parameter does

REQUIREMENTS

• iOS 18 and later (uses SwiftUI’s ShaderLibrary, layerEffect, and TimelineView animation APIs)

• Xcode with Swift 5.9 or later

• No third party packages required

HOW TO USE IT

Apply the effect to any view in one line:

someView.rainEffect(date: date, speed: rainSpeed, density: rainDensity, minimumInterval: 1 / 30)

Or apply it to a single image:

coverImage.rainEffect(date: date, speed: rainSpeed, density: rainDensity, image: image, cornerRadius: cornerRadius, imgWidth: width, imgHeight: height)

Full examples are included in the package.

LICENSE

Personal and commercial use in your own apps is allowed. Reselling or redistributing the source code itself, as is or repackaged, is not permitted. If you are unsure whether your use case is covered, message me before buying.

SUPPORT

If you run into any issue getting this working in your project, message me and I will help you out.

If this effect looks good in your app, I would love to see it, feel free to tag me or send a message.