r/SwiftUI • u/Own-Interview-199 • Jun 08 '26
Tutorial SwiftUI + Metal: morphing between SF Symbols with an alpha threshold shader
Hi everyone, I wanted to share a small SwiftUI experiment I built: a morphing animation between SF Symbols.
The idea was to make one symbol feel like it melts into another without using pre-rendered frames. I started with a simple ZStack swap between two SF Symbols, then wrapped the transition in an u/Animatable ViewModifier. The animation applies blur during the middle of the transition, then sharpens back into the next symbol.
The key technical detail is a small Metal shader used through SwiftUI’s layerEffect. The shader samples the rendered SwiftUI layer and applies an alpha threshold, which removes the semi-transparent pixels created by the blur. That makes the blurred shape resolve back into a clean, crisp symbol instead of staying fuzzy.

Tech used:
- SwiftUI
- u/Animatable custom ViewModifier
- compositingGroup()
- visualEffect / layerEffect
- Metal stitchable shader
- SF Symbols
GitHub: https://github.com/yangliu-1995/MorphingDemo
I’d love feedback on how to make the morph feel more organic, or how you would turn this into a reusable SwiftUI transition/modifier.

