husi-topbar

Create a hazeState with rememberHazeState, apply Modifier.hazeSource(hazeState) to the Scaffold content slot, and pass hazeState to CapsuleTopBar. The content must scroll under the bar using contentPadding rather than Modifier padding.

Wrap the topbar and tab row in a CapsuleHeader with hazeState and scrollBehavior, and set the tab row's containerColor to Color.Transparent. The header blurs as one block and its tint animates with scroll position.

Blur fails when hazeState is null, no hazeSource with the same state exists in the content slot, or content is placed with Modifier padding so nothing scrolls under the bar. Also verify hazeSource is not on an ancestor of the topbar.

The scrollBehavior was not passed into CapsuleTopBar or CapsuleSearchTopBar. Their internal SetHeightOffsetLimit sets state.heightOffsetLimit, which is required for overlappedFraction to become non-zero and drive the tint animation.

On Android 11 and below Haze draws only the fallback color effect. CapsuleDefaults.blurStyle sets an opaque container color as fallback so text stays readable; never build a custom blur style without a fallbackColorEffect.

Pass null only when nothing can scroll under the bar, such as content placed with Modifier padding or a bar in a plain Column above the content. The capsule then draws a plain surfaceContainer fill at 0.75 alpha with no blur.