Skip to content

Fix for the blur effect when the direction is set to .right and .up (reversed)#21

Open
alpennec wants to merge 1 commit intoTimOliver:mainfrom
alpennec:main
Open

Fix for the blur effect when the direction is set to .right and .up (reversed)#21
alpennec wants to merge 1 commit intoTimOliver:mainfrom
alpennec:main

Conversation

@alpennec
Copy link
Copy Markdown
Contributor

@alpennec alpennec commented Apr 4, 2026

Hello @TimOliver,

When using blurStartingInset for my blurs, I noticed an issue in your library when using the .right and .up directions for the blur.

The blur doesn't seem correct for the .right and .up directions as you can see on this video using the original code:

BlurUIKit_bug_720.mov

Here is another video with the code from this PR that fixes the issue:

BlurUIKit_fix_720.mov

Regards,
Axel

PS: please find below the SwiftUI code I used for the preview (not included in this PR).

CleanShot 2026-04-04 at 09 23 15@2x
//
//  SwiftUIExampleView.swift
//  BlurUIKitExample
//
//  Created by Tim Oliver on 10/2/2026.
//

import SwiftUI

struct SwiftUIExampleView: View {

    private let atlasImageSize = CGSize(width: 0.499, height: 0.249)
    private let fraction: CGFloat = 0.9
    
    var body: some View {
        GeometryReader { geometry in
            ScrollView {
                VStack(spacing: 16) {
                    ForEach(0..<8, id: \.self) { index in
                        atlasImage(index: index, width: geometry.size.width - 32)
                    }
                }
                .padding(.horizontal, 16)
                .padding(.top, geometry.safeAreaInsets.top + 8)
                .padding(.bottom, 16)
            }
            .ignoresSafeArea(edges: .top)
            .overlay(alignment: .top) {
                VariableBlur(direction: .down)
                    .blurStartingInset(.relative(fraction: fraction))
                    .ignoresSafeArea(edges: .top)
                    .frame(height: 100)
                    .border(.red)
            }
            .overlay {
                VStack {
                    VariableBlur(direction: .left)
                        .blurStartingInset(.relative(fraction: fraction))
                    
                    VariableBlur(direction: .right)
                        .blurStartingInset(.relative(fraction: fraction))
                }
                .frame(height: 200)
                .border(.red)
                .padding(.horizontal)
            }
            .overlay(alignment: .bottom) {
                    VariableBlur(direction: .up)
                        .blurStartingInset(.relative(fraction: fraction))
                        .ignoresSafeArea(edges: .bottom)
                        .frame(height: 100)
                        .border(.red)
            }
        }
    }

    @ViewBuilder
    private func atlasImage(index: Int, width: CGFloat) -> some View {
        let height = width / 1.777
        let fullWidth = width / atlasImageSize.width
        let fullHeight = height / atlasImageSize.height
        let originX = CGFloat(index % 2) * 0.5 * fullWidth
        let originY = CGFloat(index / 2) * 0.25 * fullHeight

        Image("AppleParkAtlas")
            .resizable()
            .frame(width: fullWidth, height: fullHeight)
            .offset(x: -originX, y: -originY)
            .frame(width: width, height: height, alignment: .topLeading)
            .clipShape(RoundedRectangle(cornerRadius: width * 0.1, style: .continuous))
    }
}

#Preview {
    SwiftUIExampleView()
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant