← ClaudeAtlas

swiftui-graphicslisted

Advanced SwiftUI visuals - Metal shaders (.colorEffect, .layerEffect, .distortionEffect), .visualEffect, Liquid Glass (iOS 26), Canvas, holographic and CRT effects.
AThevon/genjutsu · ★ 334 · Web & Frontend · score 79
Install: claude install-skill AThevon/genjutsu
> **Version-sensitive.** Every API name, SDK gate and browser-support claim below was > verified on **2026-09-08** against primary sources. What against, and when, is in > `_jutsu/VERSIONS.md`. If that date is old, re-verify before acting on a version number. # SwiftUI Graphics > Advanced SwiftUI visuals: Metal shaders, visual effects, Liquid Glass, Canvas. > Loaded for advanced thesis (shaders, holographic, liquid-glass, distortion). > Foundation: `../swiftui-motion/SKILL.md` covers the basics. > Concise rules here. Deep-dives in `references/`. --- ## Decision Tree: Which API? | Need | API | |---|---| | Pixel-level color manipulation | `.colorEffect(ShaderLibrary....)` | | Pixel position / distortion | `.distortionEffect(ShaderLibrary....)` | | Full layer with overlay (mix shader + bg) | `.layerEffect(ShaderLibrary....)` | | View modifier with geometry context | `.visualEffect { content, geometry in }` | | Custom drawing (paths, gradients) | `Canvas { context, size in }` | | iOS 26+ glassmorphism | `.glassEffect()` / `GlassEffectContainer` | | Performance dump | `Canvas` with `.opaque(true)` then export | > **Default order of escalation:** built-in modifiers -> `.visualEffect` -> `Canvas` -> Metal shader. Reach for shaders only when the effect is per-pixel and animated. --- ## Metal Shaders Intro SwiftUI binds to Metal Shading Language (MSL) via three modifiers shipped in iOS 17: `.colorEffect`, `.distortionEffect`, `.layerEffect`. You author a `.metal` file in your