Playground · Lists & collections

Masked Hero Carousel

  • motion component
  • iOS
  • Android
  • Flutter 3.47.0+

A Material 3 hero carousel: the focused item is large and the ones after it get narrower, each revealing its full-size content through a rounded mask with a touch of parallax, growing and shrinking smoothly as it scrolls and snapping to items.

Version 1.1.0 · What changed
  • 1.1.0 2026-10-06 New itemLabel argument translates the "Item 2 of 6" a screen reader hears for an item with no caption. Items can now be focused with a keyboard (Tab), are outlined while focused, scroll into the large slot as they gain focus, and activate with Enter or Space.
  • 1.0.0 2026-10-03 First release.

Parameters

How many built-in gradient tiles show when you pass no children of your own. With children, there is one item per child.

How wide the focused item is, as a fraction of the carousel's width. The narrower items share the rest.

How wide the narrowest items are, in logical pixels. Items between them and the large one are sized to fill the width.

The gap between items, in logical pixels.

The radius of each item's corners. Narrow items round off into pills.

How far an item's content drifts inside its mask as it moves: 0 keeps it centred, 1 holds it against the edge nearer the large item. Off for people who ask for reduced motion.

How tall the carousel is, in logical pixels. It sits centred vertically in the space it is given.

Show each item's caption on the large item, fading in as an item grows into place. Captions label the items for screen readers either way.

A released scroll settles on an item with a spring; a quick fling can carry it several. Off, it coasts and stops anywhere.

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 Masked Hero Carousel Component to this Flutter app. Call get_export with componentId "masked-hero-carousel" and parameters {"itemCount":6,"largeFraction":0.62,"smallWidth":56,"spacing":8,"cornerRadius":28,"parallax":0.5,"height":240,"showCaptions":true,"snap":true}, then follow the install steps it returns. (Tuned in the Sheen Playground: https://sheen.ciroapps.com/c/masked-hero-carousel?itemCount=6&largeFraction=0.62&smallWidth=56&spacing=8&cornerRadius=28&parallax=0.5&height=240&showCaptions=true&snap=true)