# Swiftui Graphics

Advanced SwiftUI visuals - Metal shaders (.colorEffect, .layerEffect...

- Repository: https://github.com/AThevon/genjutsu (721 stars)
- Category: Mobile
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add AThevon/genjutsu --skill swiftui-graphics -g -a claude-code -y`
Codex: `npx skills add AThevon/genjutsu --skill swiftui-graphics -g -a codex -y`
Cursor: `npx skills add AThevon/genjutsu --skill swiftui-graphics -g -a cursor -y`
Gemini CLI: `npx skills add AThevon/genjutsu --skill swiftui-graphics -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add AThevon/genjutsu`

## Description

Advanced SwiftUI visuals - Metal shaders (.colorEffect, .layerEffect, .distortionEffect), .visualEffect, Liquid Glass (iOS 26), Canvas, holographic and CRT effects.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

> **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 app target, mark functions with the `[[ stitchable ]]` attribute, and SwiftUI auto-generates the Swift binding via `ShaderLibrary.<functionName>(...)`. One library per app target. Shaders run on the GPU at native resolution; arguments are passed as `.float`, `.float2`, `.color`, `.image` from Swift. Availability: **iOS 17.0+, iPadOS 17.0+, Mac Catalyst 17.0+, macOS 14.0+, tvOS 17.0+, visionOS 1.0+ - not watchOS**. Below those, fall back to gradients, blur, or `Canvas`.

The rest: https://github.com/AThevon/genjutsu/blob/HEAD/skills/_jutsu/swiftui-graphics/SKILL.md