Playground · Surfaces & cards

Progressive Blur Header

  • shader component
  • iOS
  • Android
  • Flutter 3.47.0+

An iOS 26-style scroll edge: a floating title bar with no divider, where the content scrolling under it blurs progressively, strongest at the top edge and easing back to sharp, under a soft tint.

Version 1.0.2 · What changed
  • 1.0.2 2026-10-03 In debug builds, a badge now names the shader when it fails to load and how to fix it.
  • 1.0.1 2026-10-03 A bar showing a title or actions now absorbs taps across its whole area, beside the title too, instead of letting them reach the content scrolled under it; the band below the bar, and a bare scroll edge with neither, still let taps through.
  • 1.0.0 2026-10-03 First release.

Parameters

The title centred in the bar, announced to screen readers as a heading.

How far the blur reaches below the status bar, in logical pixels: content is blurred most at the top edge and sharp again at this depth. Never shorter than the bar.

How much the content is blurred at the very top edge, as a blur radius in logical pixels. 0 leaves only the tint.

The colour the band is tinted with, strongest at the top and fading out with the blur. A dark tint keeps a light title readable.

How much of the tint shows at the top edge.

Turn off for a bare scroll edge that only blurs the content passing under the status bar.

Loading Preview…

Send to your coding agent

Add Sheen's MCP server once, then paste the prompt. No key or account needed.

Run in your project (Claude Code)
claude mcp add --transport http sheen https://sheen.ciroapps.com/api/mcp
Then ask your agent
Use the Sheen MCP server to add the Progressive Blur Header Component to this Flutter app. Call get_export with componentId "progressive-blur-header" and parameters {"title":"Library","height":140,"maxBlur":28,"tint":"07060D","tintStrength":0.5,"titleColor":"FFFFFF","showTitle":true}, then follow the install steps it returns. (Tuned in the Sheen Playground: https://sheen.ciroapps.com/c/progressive-blur-header?title=Library&height=140&maxBlur=28&tint=07060D&tintStrength=0.5&titleColor=FFFFFF&showTitle=true)