Progressive Blur Header Swiftui

reason-machines/trending-skills/skills/progressive-blur-header-swiftui

作者 reason-machines2384a003145a無授權條款83 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫3 個月前更新

Drop-in SwiftUI sticky header component with progressive blur effect matching Apple Music, Photos, and App Store styles.

僅含說明Software Development

AI 產生的概覽

提供在 SwiftUI 應用程式加入漸進式模糊置頂標頭元件的說明。

功能: 此技能說明如何安裝與使用 ProgressiveBlurHeader SwiftUI 套件，其中提供具備可變半徑模糊與自適應色調的 StickyBlurHeader 元件。內容涵蓋元件參數、常見標頭模式、架構與疑難排解。它產出的是指引與程式碼範例，而非檔案或指令碼。
適用情境: 適用於建置需要 Apple Music、Photos 或 App Store 風格漸進式模糊置頂標頭的 SwiftUI 應用程式。也適合調整模糊半徑、色調強度或淡出延伸範圍，以及排查模糊效果或標頭高度問題。
執行需求: 需要 iOS 16+ 與 Swift 5.9+，並透過 Swift Package Manager 加入 ProgressiveBlurHeader Swift 套件。不含指令碼，僅為說明文件。

ProgressiveBlurHeader SwiftUI Skill

Skill by ara.so — Daily 2026 Skills collection.

A drop-in SwiftUI package for sticky headers with progressive (variable-radius) blur — replicating the Apple Music, Photos, and App Store style where content scrolls underneath the header with increasing blur and tint. No clipping, no hard edges.

Installation

Swift Package Manager (Xcode)

File → Add Package Dependencies → paste:

Select branch: main

Package.swift

swift

dependencies: [    .package(url: "https://github.com/dominikmartn/ProgressiveBlurHeader", branch: "main"),]

dependencies: [    .package(url: "https://github.com/dominikmartn/ProgressiveBlurHeader", branch: "main"),]

Then add to your target:

Requirements: iOS 16+, Swift 5.9+

Core API

`StickyBlurHeader`

The primary component. Takes two ViewBuilder closures: header and content.

swift

StickyBlurHeader(    maxBlurRadius: Double,     // Default: 5    fadeExtension: CGFloat,    // Default: 64    tintOpacityTop: Double,    // Default: 0.7    tintOpacityMiddle: Double  // Default: 0.5) {    // header view (NO opaque background)} content: {    // scrollable content}

StickyBlurHeader(    maxBlurRadius: Double,     // Default: 5    fadeExtension: CGFloat,    // Default: 64    tintOpacityTop: Double,    // Default: 0.7    tintOpacityMiddle: Double  // Default: 0.5) {    // header view (NO opaque background)} content: {    // scrollable content}

Parameters

Parameter	Type	Default	Description
`maxBlurRadius`	`Double`	`5`	Max blur at the top edge. 5 = subtle, 10 = moderate, 20 = strong
`fadeExtension`	`CGFloat`	`64`	Points below the header the blur extends
`tintOpacityTop`	`Double`	`0.7`	Tint behind Dynamic Island / status bar
`tintOpacityMiddle`	`Double`	`0.5`	Tint at the header's vertical center

The tint color adapts automatically to light/dark mode.

Basic Usage

swift

import SwiftUIimport ProgressiveBlurHeader
struct ContentView: View {    let items = (1...50).map { "Item \($0)" }
    var body: some View {        StickyBlurHeader {            // Header — NO opaque background            HStack {                Button("Back") { }                Spacer()                Text("Library").font(.headline)                Spacer()                Button("Settings") { }            }            .padding()        } content: {            ForEach(items, id: \.self) { item in                Text(item)                    .frame(maxWidth: .infinity, alignment: .leading)                    .padding()                    .background(Color(.secondarySystemBackground))                    .cornerRadius(8)                    .padding(.horizontal)            }        }        .background(Color(.systemBackground))    }}

import SwiftUIimport ProgressiveBlurHeader
struct ContentView: View {    let items = (1...50).map { "Item \($0)" }
    var body: some View {        StickyBlurHeader {            // Header — NO opaque background            HStack {                Button("Back") { }                Spacer()                Text("Library").font(.headline)                Spacer()                Button("Settings") { }            }            .padding()        } content: {            ForEach(items, id: \.self) { item in                Text(item)                    .frame(maxWidth: .infinity, alignment: .leading)                    .padding()                    .background(Color(.secondarySystemBackground))                    .cornerRadius(8)                    .padding(.horizontal)            }        }        .background(Color(.systemBackground))    }}

Common Patterns

Navigation-Style Header with Back Button

swift

import SwiftUIimport ProgressiveBlurHeader
struct AlbumDetailView: View {    let albumTitle: String    @Environment(\.dismiss) private var dismiss
    var body: some View {        StickyBlurHeader(            maxBlurRadius: 8,            fadeExtension: 80,            tintOpacityTop: 0.75,            tintOpacityMiddle: 0.55        ) {            HStack {                Button {                    dismiss()                } label: {                    Image(systemName: "chevron.left")                        .fontWeight(.semibold)                }                Spacer()                Text(albumTitle)                    .font(.headline)                    .lineLimit(1)                Spacer()                Button {                    // action                } label: {                    Image(systemName: "ellipsis.circle")                }            }            .padding(.horizontal)            .padding(.vertical, 12)        } content: {            LazyVStack(spacing: 0) {                ForEach(0..<30) { index in                    SongRow(index: index)                    Divider().padding(.leading)                }            }        }        .background(Color(.systemBackground))    }}

import SwiftUIimport ProgressiveBlurHeader
struct AlbumDetailView: View {    let albumTitle: String    @Environment(\.dismiss) private var dismiss
    var body: some View {        StickyBlurHeader(            maxBlurRadius: 8,            fadeExtension: 80,            tintOpacityTop: 0.75,            tintOpacityMiddle: 0.55        ) {            HStack {                Button {                    dismiss()                } label: {                    Image(systemName: "chevron.left")                        .fontWeight(.semibold)                }                Spacer()                Text(albumTitle)                    .font(.headline)                    .lineLimit(1)                Spacer()                Button {                    // action                } label: {                    Image(systemName: "ellipsis.circle")                }            }            .padding(.horizontal)            .padding(.vertical, 12)        } content: {            LazyVStack(spacing: 0) {                ForEach(0..<30) { index in                    SongRow(index: index)                    Divider().padding(.leading)                }            }        }        .background(Color(.systemBackground))    }}

Subtle Blur (Apple Photos Style)

swift

StickyBlurHeader(    maxBlurRadius: 5,    fadeExtension: 56,    tintOpacityTop: 0.6,    tintOpacityMiddle: 0.4) {    HStack {        Text("Photos")            .font(.largeTitle)            .fontWeight(.bold)        Spacer()        Button {            // action        } label: {            Image(systemName: "plus")        }    }    .padding(.horizontal)    .padding(.top, 8)    .padding(.bottom, 12)} content: {    LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))], spacing: 2) {        ForEach(photos) { photo in            PhotoThumbnail(photo: photo)        }    }    .padding(2)}.background(Color(.systemBackground))

StickyBlurHeader(    maxBlurRadius: 5,    fadeExtension: 56,    tintOpacityTop: 0.6,    tintOpacityMiddle: 0.4) {    HStack {        Text("Photos")            .font(.largeTitle)            .fontWeight(.bold)        Spacer()        Button {            // action        } label: {            Image(systemName: "plus")        }    }    .padding(.horizontal)    .padding(.top, 8)    .padding(.bottom, 12)} content: {    LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))], spacing: 2) {        ForEach(photos) { photo in            PhotoThumbnail(photo: photo)        }    }    .padding(2)}.background(Color(.systemBackground))

Strong Blur (App Store Style)

swift

StickyBlurHeader(    maxBlurRadius: 12,    fadeExtension: 72,    tintOpacityTop: 0.85,    tintOpacityMiddle: 0.6) {    VStack(spacing: 4) {        HStack {            Text("Today")                .font(.largeTitle)                .fontWeight(.bold)            Spacer()            Button {                // profile action            } label: {                Image(systemName: "person.crop.circle.fill")                    .font(.title2)            }        }        HStack {            Text(Date(), style: .date)                .font(.subheadline)                .foregroundStyle(.secondary)                .textCase(.uppercase)            Spacer()        }    }    .padding(.horizontal)    .padding(.vertical, 12)} content: {    LazyVStack(spacing: 16) {        ForEach(featuredApps) { app in            AppCard(app: app)        }    }    .padding()}.background(Color(.systemBackground))

StickyBlurHeader(    maxBlurRadius: 12,    fadeExtension: 72,    tintOpacityTop: 0.85,    tintOpacityMiddle: 0.6) {    VStack(spacing: 4) {        HStack {            Text("Today")                .font(.largeTitle)                .fontWeight(.bold)            Spacer()            Button {                // profile action            } label: {                Image(systemName: "person.crop.circle.fill")                    .font(.title2)            }        }        HStack {            Text(Date(), style: .date)                .font(.subheadline)                .foregroundStyle(.secondary)                .textCase(.uppercase)            Spacer()        }    }    .padding(.horizontal)    .padding(.vertical, 12)} content: {    LazyVStack(spacing: 16) {        ForEach(featuredApps) { app in            AppCard(app: app)        }    }    .padding()}.background(Color(.systemBackground))

Dynamic Header (Height Changes)

Header height is measured automatically via GeometryReader + PreferenceKey — no manual sizing needed:

swift

StickyBlurHeader {    VStack(alignment: .leading, spacing: 4) {        Text("Title").font(.headline)        if showsSubtitle {            Text("Subtitle").font(.subheadline).foregroundStyle(.secondary)        }    }    .padding()    // Header auto-adjusts when showsSubtitle toggles} content: {    contentList}.background(Color(.systemBackground))

StickyBlurHeader {    VStack(alignment: .leading, spacing: 4) {        Text("Title").font(.headline)        if showsSubtitle {            Text("Subtitle").font(.subheadline).foregroundStyle(.secondary)        }    }    .padding()    // Header auto-adjusts when showsSubtitle toggles} content: {    contentList}.background(Color(.systemBackground))

Architecture

The component uses a three-layer ZStack:

The blur engine is VariableBlur by nikstar, which uses the same private API Apple uses internally. It is App Store approved.

Critical Rules

❌ Never add an opaque background to the header

swift

// WRONG — hides the blur effectStickyBlurHeader {    Text("Header")        .background(Color.white) // ❌ Breaks the blur}
// CORRECT — no background on header viewsStickyBlurHeader {    Text("Header") // ✅ Transparent, blur shows through}

// WRONG — hides the blur effectStickyBlurHeader {    Text("Header")        .background(Color.white) // ❌ Breaks the blur}
// CORRECT — no background on header viewsStickyBlurHeader {    Text("Header") // ✅ Transparent, blur shows through}

❌ Never clip the content hierarchy

swift

// WRONGStickyBlurHeader { ... } content: {    VStack { ... }        .clipped() // ❌ Content becomes invisible under header}
// CORRECT — let content remain visible under blurStickyBlurHeader { ... } content: {    VStack { ... } // ✅ No clipping}

// WRONGStickyBlurHeader { ... } content: {    VStack { ... }        .clipped() // ❌ Content becomes invisible under header}
// CORRECT — let content remain visible under blurStickyBlurHeader { ... } content: {    VStack { ... } // ✅ No clipping}

✅ Always set a background on the outer container

swift

StickyBlurHeader { ... } content: { ... }    .background(Color(.systemBackground)) // ✅ Required for tint to work correctly

StickyBlurHeader { ... } content: { ... }    .background(Color(.systemBackground)) // ✅ Required for tint to work correctly

Troubleshooting

Blur not visible / header looks opaque

Remove any .background(...) modifier from your header view
Ensure no parent view adds a background before StickyBlurHeader

Content disappears under header

Remove any .clipped() from the content or its ancestors
Do not wrap content in a ScrollView — StickyBlurHeader provides its own

Header height is wrong

Do not set explicit heights on the header; let it size naturally
GeometryReader measures the header automatically

Tint color looks wrong in dark mode

The tint adapts automatically; ensure .background(Color(.systemBackground)) is set on the outer view so the adaptive color has a reference

Build error: "No such module 'ProgressiveBlurHeader'"

Confirm the package is added in Xcode under Package Dependencies
Clean build folder: Product → Clean Build Folder (⇧⌘K)
Check the target membership of the package in your app target

iOS version compatibility

Minimum deployment target must be iOS 16.0 or higher
Set in Xcode: Target → General → Minimum Deployments

iOS 26 Comparison

iOS 26 adds .safeAreaBar(edge: .top) — a native one-liner for sticky blur bars. Use ProgressiveBlurHeader when you need:

Custom blur radius
Adjustable tint intensity
Extended fade below the header
iOS 16–25 support

來源與署名

來源：reason-machines/trending-skills位於skills/progressive-blur-header-swiftui提交2384a00

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Layer	Component	Purpose
Back	`ScrollView`	Content scrolls freely, never clipped
Middle	`VariableBlurView` + gradient	Progressive blur + adaptive tint
Front	Your header view	Floats above blur, transparent background

Progressive Blur Header Swiftui

ProgressiveBlurHeader SwiftUI Skill

Installation

Swift Package Manager (Xcode)

Package.swift

Core API

StickyBlurHeader

Parameters

Basic Usage

Common Patterns

Navigation-Style Header with Back Button

Subtle Blur (Apple Photos Style)

Strong Blur (App Store Style)

Dynamic Header (Height Changes)

Architecture

Critical Rules

❌ Never add an opaque background to the header

❌ Never clip the content hierarchy

✅ Always set a background on the outer container

Troubleshooting

Blur not visible / header looks opaque

Content disappears under header

Header height is wrong

Tint color looks wrong in dark mode

Build error: "No such module 'ProgressiveBlurHeader'"

iOS version compatibility

iOS 26 Comparison

來源與署名

更多來自 reason-machines/trending-skills 的技能

Yourvpndead Vpn Detection

X Mentor Skill Nuwa

Wildworld Dataset

Understand Anything Knowledge Graph

Webphysics Avbd Engine

Ui Ux Pro Max Skill

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices

`StickyBlurHeader`