# progressive-blur-header-swiftui

This skill adds a SwiftUI sticky header with a gradual blur effect. Use it for interfaces styled after Apple Music, Photos, or the App Store.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 493 installs · ★ 88
- Author: reason-machines
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/progressive-blur-header-swiftui/SKILL.md
- Updated: 2026-10-09
- HTML: https://affpapa.org/en/nevibecode/skills/progressive-blur-header-swiftui

## What it does

The skill helps add the `StickyBlurHeader` SwiftUI component, placing scrolling content beneath the header while the blur changes gradually across its height. It exposes settings for the maximum blur radius, fade distance, and tint opacity at the top and middle of the header.

Header height is measured with `GeometryReader` and `PreferenceKey`, so layouts can react when the header content changes. The package is added through Swift Package Manager from `https://github.com/dominikmartn/ProgressiveBlurHeader`. It requires iOS 16+ and Swift 5.9+.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill progressive-blur-header-swiftui -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/progressive-blur-header-swiftui/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/progressive-blur-header-swiftui/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill progressive-blur-header-swiftui -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/progressive-blur-header-swiftui/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill progressive-blur-header-swiftui -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/progressive-blur-header-swiftui/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install reason-machines/trending-skills progressive-blur-header-swiftui
```

2. **Manually: put the files in place**
- File: `.github/skills/progressive-blur-header-swiftui/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill progressive-blur-header-swiftui -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/reason-machines/trending-skills --path skills/progressive-blur-header-swiftui
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/progressive-blur-header-swiftui/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill progressive-blur-header-swiftui -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/progressive-blur-header-swiftui/SKILL.md

## When to use it
- add a sticky header to a SwiftUI screen
- create a variable blur below a navigation header
- match an Apple Music or App Store style
- handle a header whose height changes

## Example prompts
- Add a SwiftUI sticky header with a gradual blur using `StickyBlurHeader`.
- Connect `ProgressiveBlurHeader` and place a scrolling list under the header.
- Set up a SwiftUI screen with adjustable blur and tint for light and dark mode.

## Similar
- [swiftui-design](https://affpapa.org/en/nevibecode/skills/swiftui-design.md) — skill · 2900 installs
- [swiftui-design-principles](https://affpapa.org/en/nevibecode/skills/swiftui-design-principles.md) — skill · 1300 installs
- [swiftui-design-skill](https://affpapa.org/en/nevibecode/skills/swiftui-design-skill.md) — skill · 1000 installs
- [swiftui-graphics](https://affpapa.org/en/nevibecode/skills/swiftui-graphics.md) — skill · 939 installs
- [swiftui-animation](https://affpapa.org/en/nevibecode/skills/jamesrochabrun-swiftui-animation.md) — skill · 567 installs
- [progressive-blur](https://affpapa.org/en/nevibecode/skills/progressive-blur.md) — skill · 1700 installs

From the same set: [reason-machines/trending-skills](https://affpapa.org/en/nevibecode/by/reason-machines/trending-skills.md) — 199 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md