Grain Gradient

// Default — warm peach / lilac / rose gradient, full-screen
ZStack {
    SWGrainGradient()
        .ignoresSafeArea()
    // Your content here
}

// Recolor — cool mint
SWGrainGradient(
    color1: .teal,
    color2: .green,
    color3: .mint
)

// As a hero background
heroContent
    .background { SWGrainGradient() }

// Clean gradient (no grain), sharper color zones
SWGrainGradient(grain: 0, contrast: 2.0)

// Demo / debug — gear button opens a live-tuning sheet.
// Requires an enclosing NavigationStack.
NavigationStack {
    SWGrainGradient(showsControls: true)
}

1. Copy SWGrainGradient.swift and SWGrainGradient.metal into your Xcode target; the .metal file is compiled into the default ShaderLibrary automatically.
2. Confirm the deployment target is iOS 18+ / macOS 15+.
3. Use it as a ZStack background with .ignoresSafeArea() for full-bleed, or inside .background { } behind a hero section.
4. Pick three colors close in lightness for the soft poster look; widely different colors read as blotches, so lower contrast if that happens.
5. Keep text legible on top: the field drifts, so test your foreground against every region of the gradient (or add a scrim).

• Grain is in pixel space. The grain hash uses the raw pixel position, not the scaled noise coordinates, so the grain stays film-sized at any scale and on any screen size.
• The per-frame grain shift is wrapped. The hash input adds fmod(time * 60.0, 256.0). An unbounded time * 60 grows past float precision inside the hash within minutes and the grain collapses into flat or banded patterns; keep the wrap if you edit the shader.
• Square cells on any aspect ratio. Positions are normalized by the shorter side of the bounding rect, so color cells don't stretch on wide or tall views.
• The output is opaque. The shader returns alpha 1, and the base layer is color1, so the first frame already matches the gradient tone — no black flash before the shader runs.
• Cheap per pixel. Two value-noise samples plus one hash per pixel — far lighter than the FBM-based backgrounds — so a full-screen instance is fine.
• The argument order in the .colorEffect call must match the Metal swGrainGradient signature exactly: boundingRect, time, speed, scale, grain, contrast, color1, color2, color3.
• When showsControls is true, the gear button is a native ToolbarItem — the call site must be inside a NavigationStack.