DOCSEARCHbyAlgolia
Submit Docs

VariableBlur Documentation

repository·main·Indexed 20 days ago

https://github.com/nikstar/variableblur

A SwiftUI library for creating progressive blur effects and standard background blurring. It provides VariableBlurView for smooth transitions from clear to blurred areas with adjustable intensity and direction, as well as a BackgroundBlur component for simple background blurring.

Tokens
784
Snippets
3
Records
4
Agent score
22%

What's inside VariableBlur

  1. Install VariableBlur

    main

    You can integrate VariableBlur into your SwiftUI project using two methods:

    Recommended: Manual Copy

    Copy the VariableBlur.swift file directly into your project source files. This is the preferred method for simplicity.

    Swift Package Manager (SPM)

    1. In Xcode, select File > Add Package...
    2. Enter the repository URL: https://github.com/nikstar/VariableBlur

  2. Match blur to status bar or safe area insets

    main

    To create a blur effect that perfectly matches the height of the status bar or the device cutout, use a GeometryReader to capture the safeAreaInsets.top and apply it to the VariableBlurView frame.

    ContentView()
    .overlay(alignment: .top) {
        GeometryReader { geom in
            VariableBlurView(maxBlurRadius: 10)
                .frame(height: geom.safeAreaInsets.top)
                .ignoresSafeArea()
        }
    }

  3. Use VariableBlurView for progressive blur effects

    main

    Use VariableBlurView to create a progressive blur effect (variable blur) over your content. You can control the intensity via maxBlurRadius and the direction of the blur using the direction parameter.

    Common directions include standard top-to-bottom blurs and upside-down blurs (clear at the top, blurred at the bottom) using .blurredTopClearBottom.

    // Example: Creating a top-aligned progressive blur
ZStack(alignment: .top) {
    Color.white
    Color.blue.opacity(0.3)
    Image("im")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .padding(.horizontal, 50)
    Text("VariableBlur")
        .font(.largeTitle.monospaced().weight(.bold))
        .padding(.top, 230)
        .foregroundStyle(.white.opacity(0.9))
}
.overlay(alignment: .top) {
    VariableBlurView(maxBlurRadius: 20, direction: .blurredTopClearBottom)
        .frame(height: 200)
}
.ignoresSafeArea()

  4. Use BackgroundBlur for simple background blurring

    main

    If you need a standard background blur without progressive directionality, use the BackgroundBlur component. It accepts a radius parameter to define the blur intensity.

    HStack(spacing: 0) {
    Color.blue
    Color.blue.opacity(0.2)
}
.overlay {
    BackgroundBlur(radius: 20)
        .frame(width: 200, height: 100)
        .clipShape(.capsule)
}
.ignoresSafeArea()