Parameters
Whether the skeleton is shown. Switch it off to play the reveal into the content, and on again to return to the skeleton.
The colour of the skeleton's blocks.
The colour of the travelling sheen at its brightest. The last sweep is brighter still.
How fast the sheen travels while loading: one sweep every 1.5 seconds at 1. 0 holds it still.
Seconds from the last sweep starting to the content at rest.
How blurred the content is as it starts to appear; it sharpens as it fades in. 0 fades it in sharp.
How round the built-in skeleton's lines of text are. Its avatar is always a circle.
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 Skeleton Crossfade Component to this Flutter app. Call get_export with componentId "skeleton-crossfade" and parameters {"loading":false,"baseColor":"27272A","highlightColor":"3F3F46","sheenSpeed":1,"duration":0.9,"blur":6,"cornerRadius":8}, then follow the install steps it returns. (Tuned in the Sheen Playground: https://sheen.ciroapps.com/c/skeleton-crossfade?loading=false&baseColor=27272A&highlightColor=3F3F46&sheenSpeed=1&duration=0.9&blur=6&cornerRadius=8)