Playground · Surfaces & cards

Parallax Header

  • motion component
  • iOS
  • Android
  • Flutter 3.47.0+

A collapsing hero header for a scroll view: the background drifts at a fraction of the scroll speed, the large title shrinks into a frosted bar pinned at the top, and pulling down stretches the hero.

Version 1.0.1 · What changed
  • 1.0.1 2026-10-06 The title and subtitle now follow the user's text size up to 200% instead of stopping at 140%, and still fit the hero and the compact bar.
  • 1.0.0 2026-10-02 First release.

Parameters

The large title in the hero, which shrinks into the compact bar's title.

A line under the large title that fades out as the header collapses. Leave empty for none.

How tall the hero is at rest, in logical pixels, not counting the status bar.

How tall the compact bar is once collapsed, in logical pixels, not counting the status bar.

How fast the background moves as the content scrolls, as a fraction of the scroll speed: 0 holds it still, 1 moves it with the content.

How much the collapsed bar frosts the content passing under it.

The colour the collapsed bar is tinted with.

The colour of the title and, a little softer, the subtitle.

The first colour of the built-in background, shown when you pass no background of your own.

The second colour of the built-in background.

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 Parallax Header Component to this Flutter app. Call get_export with componentId "parallax-header" and parameters {"title":"Weekend in Lisbon","subtitle":"Three days of tiles, trams and sunsets","expandedHeight":280,"collapsedHeight":52,"parallax":0.5,"blur":20,"barTint":"12101C","titleColor":"FFFFFF","gradientA":"6D4AFF","gradientB":"FF6B9E"}, then follow the install steps it returns. (Tuned in the Sheen Playground: https://sheen.ciroapps.com/c/parallax-header?title=Weekend+in+Lisbon&subtitle=Three+days+of+tiles%2C+trams+and+sunsets&expandedHeight=280&collapsedHeight=52&parallax=0.5&blur=20&barTint=12101C&titleColor=FFFFFF&gradientA=6D4AFF&gradientB=FF6B9E)