ProgressiveBlurHeader

repository·main·Indexed 19 days ago

https://github.com/dominikmartn/progressiveblurheader

A SwiftUI component that implements sticky headers with a progressive blur effect, similar to Apple Music and the App Store. It features the StickyBlurHeader component, which allows content to scroll underneath a header while becoming increasingly blurred and tinted.

Tokens: 1.1K
Snippets: 4
Records: 4
Agent score: 16%

What's inside ProgressiveBlurHeader

Install ProgressiveBlurHeader via Swift Package Manager
main
To use ProgressiveBlurHeader in your project, add it as a dependency using Swift Package Manager. You can do this by adding the URL to your Package.swift or by using the Xcode menu: File → Add Package Dependencies and pasting the repository URL.
```
dependencies: [
    .package(url: "https://github.com/dominikmartn/ProgressiveBlurHeader", branch: "main"),
]
```
https://github.com/dominikmartn/progressiveblurheader/blob/main/README.md
Use StickyBlurHeader for progressive blur headers
main
The StickyBlurHeader component provides a sticky header with a progressive blur effect. It uses a three-layer ZStack architecture: a ScrollView in the back, a VariableBlurView with a gradient in the middle, and your custom header in the front.
Crucial Implementation Rules:
1. No Opaque Backgrounds: Your header view must NOT have an opaque background (e.g., do not use .background(Color.xxx)). The VariableBlurView acts as the background; adding an opaque color will hide the blur effect.
2. No Clipping: Do not use .clipped() anywhere in the hierarchy. The content should scroll freely underneath the header and become blurred, never clipped.
3. Automatic Height: The header height is automatically measured and adapts dynamically to your content.
```
import ProgressiveBlurHeader

struct MyView: View {
    var body: some View {
        StickyBlurHeader {
            // Your header — NO opaque background!
            HStack {
                Button("Back") { }
                Spacer()
                Text("Title").font(.headline)
                Spacer()
                Button("Settings") { }
            }
            .padding()
        } content: {
            // Your scrollable content
            ForEach(items) { item in
                ItemRow(item: item)
            }
        }
        .background(Color(.systemBackground))
    }
}
```
https://github.com/dominikmartn/progressiveblurheader/blob/main/README.md

Customize StickyBlurHeader parameters

main

You can adjust the blur intensity, the fade length, and the tinting behavior of the header using the following parameters. The tint automatically adapts to light and dark modes (white in light mode, black in dark mode).

StickyBlurHeader(
    maxBlurRadius: 5,       // Blur intensity: 5 = subtle, 10 = moderate, 20 = strong
    fadeExtension: 64,      // How far (pt) blur extends below header
    tintOpacityTop: 0.7,    // Tint at screen top (behind Dynamic Island)
    tintOpacityMiddle: 0.5  // Tint at header center
) {
    headerView
} content: {
    contentView
}

Reference: StickyBlurHeader parameters

main

The following parameters are available for configuring the StickyBlurHeader component:

| Parameter | Default | Effect |
|-----------|---------|--------|
| `maxBlurRadius` | `5` | Maximum blur at the top edge |
| `fadeExtension` | `64` | How far blur reaches below the header (pt) |
| `tintOpacityTop` | `0.7` | Darkening behind Dynamic Island / status bar |
| `tintOpacityMiddle` | `0.5` | Darkening at the header's vertical center |