Fluid Gradient Documentation

Fluid Gradient creates an animated, seamless gradient effect by stacking multiple 'blobs' in a coordinate space and applying a blur.

Technically, it uses CAGradientLayer instances added to two distinct CALayer layers:

1. Base layer: Contains the primary color blobs.
2. Highlight layer: Contains highlight color blobs using an overlay blend mode to create unique, fluid patterns.

You can customize the colors for both the base and highlight layers to control the visual output.

While fluid shapes can be created directly in SwiftUI, SwiftUI animations are typically performed on the CPU, which can lead to high energy consumption and significant CPU usage.

Fluid Gradient uses CALayer (CoreAnimation) to offload animation work to the WindowServer. This allows the gradient to run at the full screen refresh rate with near-zero performance impact on your app's CPU usage.

Fluid Gradient is available as a Swift Package. To use it, import FluidGradient and use the FluidGradient view within your SwiftUI hierarchy.

Supported platforms:

• macOS 11.0+
• iOS 14.0+

import SwiftUI
import FluidGradient

struct ContentView: View {
    var body: some View {
        FluidGradient(blobs: [.red, .green, .blue],
                      highlights: [.yellow, .orange, .purple],
                      speed: 1.0,
                      blur: 0.75)
          .background(.quaternary)
    }
}

The FluidGradient view accepts the following parameters to customize the animation:

• blobs: An array of colors used for the base layer.
• highlights: An array of colors used for the highlight layer (applied via overlay blend mode).
• speed: A value controlling the animation speed.
• blur: A value controlling the blur intensity applied to the blobs to create the seamless effect.

FluidGradient(blobs: [.red, .green, .blue],
              highlights: [.yellow, .orange, .purple],
              speed: 1.0,
              blur: 0.75)