### Basic Collapsing Top Bar Example in Kotlin

Source: https://context7.com/flaringapp/composecollapsingtopbar/llms.txt

Demonstrates the fundamental usage of CollapsingTopBarScaffold to create a collapsible top bar with a LazyColumn. It utilizes `collapse` scroll mode and a snapping behavior with a 0.5f threshold. This example requires the Compose Material 3 library and the ComposeCollapsingTopBar library.

```kotlin
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.flaringapp.compose.topbar.scaffold.CollapsingTopBarScaffold
import com.flaringapp.compose.topbar.scaffold.CollapsingTopBarScaffoldScrollMode
import com.flaringapp.compose.topbar.snap.rememberCollapsingTopBarSnapBehavior

@Composable
fun BasicCollapsingExample() {
    CollapsingTopBarScaffold(
        modifier = Modifier.fillMaxSize(),
        scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
        snapBehavior = rememberCollapsingTopBarSnapBehavior(threshold = 0.5f),
        topBar = { topBarState ->
            // Top bar content - can contain multiple elements
            TopAppBar(
                title = { Text("My App") },
                // Add navigation icons, actions, etc.
            )
        },
        body = { 
            // Scrollable content
            LazyColumn {
                items(50) {
                    Text("Item $index")
                }
            }
        }
    )
}
```

--------------------------------

### Reacting to State Changes with Animations

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

Shows how to observe `CollapsingTopBarScaffoldState` and its nested states to trigger animations. This example animates the shadow elevation of the top bar based on its collapsed state.

```kotlin
val state = rememberCollapsingTopBarScaffoldState()
val topBarShadowElevation by animateDpAsState(
    label = "ShadowAnimation",
    targetValue = if (state.topBarState.isCollapsed) 12.dp else 0.dp,
)
CollapsingTopBarScaffold(
    state = state,
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
    topBarModifier = Modifier.graphicsLayer {
        shadowElevation = topBarShadowElevation.toPx()
    },
    topBar = {
        SampleTopBarImage()
        SampleTopAppBar()
    },
    body = {
        SampleContent()
    },
)
```

--------------------------------

### Snap Behavior for Collapsing Top Bar (Kotlin)

Source: https://context7.com/flaringapp/composecollapsingtopbar/llms.txt

Implements snapping animations for a collapsing top bar when scrolling stops. This example uses a custom spring animation and a threshold to determine whether to snap to fully expanded or collapsed. Dependencies include Compose UI, Material 3, and the collapsing top bar snap behavior library.

```kotlin
import androidx.compose.animation.core.spring
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.flaringapp.compose.topbar.scaffold.CollapsingTopBarScaffold
import com.flaringapp.compose.topbar.scaffold.CollapsingTopBarScaffoldScrollMode
import com.flaringapp.compose.topbar.snap.rememberCollapsingTopBarSnapBehavior

@Composable
fun SnapBehaviorExample() {
    CollapsingTopBarScaffold(
        scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
        // Snap behavior with custom threshold and animation
        snapBehavior = rememberCollapsingTopBarSnapBehavior(
            threshold = 0.75f, // If >75% expanded, snap to fully expanded
            animationSpec = spring(
                dampingRatio = 0.8f,
                stiffness = 300f
            )
        ),
        topBar = {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
                    .background(Color.Magenta)
            )
            TopAppBar(
                title = { Text("Snap on Release") }
            )
        },
        body = {
            LazyColumn {
                items(50) { Text("Item $it") }
            }
        }
    )
}
```

--------------------------------

### CollapsingTopBarState Usage

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

Describes the `CollapsingTopBarState`, which contains information about the collapsing state before the top bar starts exiting. It offers similar state data (`isExpanded`, `isCollapsed`) and controls (`expand()`, `collapse()`) as the scaffold state, plus detailed layout information via `layoutInfo`.

```kotlin
val scaffoldState = rememberCollapsingTopBarScaffoldState()
val topBarState = scaffoldState.topBarState

// Accessing layout info
val collapseProgress = topBarState.layoutInfo.collapseProgress
```

--------------------------------

### Example: Fading Text with Column Progress

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

Demonstrates how to use the `columnProgress` modifier on a Text element to make it fade out as the top bar collapses. It utilizes `mutableFloatStateOf` to store the progress and `graphicsLayer` to apply alpha changes.

```kotlin
CollapsingTopBarScaffold(
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
    topBar = {
        CollapsingTopBarColumn(topBarState) {
            SampleTopAppBar(
                modifier = Modifier.notCollapsible(),
                title = "Column Moving Element",
                onBack = onBack,
            )

            var textCollapseProgress by remember {
                mutableFloatStateOf(1f)
            }
            Text(
                modifier = Modifier
                    .columnProgress { _, itemProgress -> textCollapseProgress = itemProgress }
                    .graphicsLayer {
                        alpha = textCollapseProgress
                    },
                text = "Collapsible element",
            )
        }
    },
    body = {
        SampleContent()
    },
)
```

--------------------------------

### Track Column Element Collapse Progress in Kotlin

Source: https://context7.com/flaringapp/composecollapsingtopbar/llms.txt

This Kotlin code demonstrates tracking the collapse progress of an individual element within a `CollapsingTopBarColumn`. It uses the `columnProgress` modifier to get `totalProgress` and `itemProgress`, allowing for effects like text fading and scaling. This is useful for creating dynamic UI elements that react to scroll events.

```kotlin
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.dp
import com.flaringapp.compose.topbar.nestedcollapse.CollapsingTopBarColumn
import com.flaringapp.compose.topbar.scaffold.CollapsingTopBarScaffold
import com.flaringapp.compose.topbar.scaffold.CollapsingTopBarScaffoldScrollMode

@Composable
fun ColumnProgressExample() {
    CollapsingTopBarScaffold(
        scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
        topBar = { topBarState ->
            CollapsingTopBarColumn(state = topBarState) {
                // Non-collapsible header
                TopAppBar(
                    title = { Text("Column Progress") },
                    modifier = Modifier.notCollapsible()
                )

                // Text that fades out as it collapses
                var textProgress by remember { mutableFloatStateOf(1f) }
                Text(
                    text = "I fade as I collapse",
                    modifier = Modifier
                        .padding(16.dp)
                        .columnProgress { totalProgress, itemProgress ->
                            // totalProgress: overall column collapse (0f to 1f)
                            // itemProgress: this element's collapse (0f to 1f)
                            textProgress = itemProgress
                        }
                        .graphicsLayer {
                            alpha = textProgress // Fade effect
                            scaleX = 0.8f + (0.2f * textProgress) // Scale effect
                            scaleY = 0.8f + (0.2f * textProgress)
                        }
                )

                // Another collapsible element
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(100.dp)
                        .background(Color.Yellow)
                )
            }
        },
        body = {
            LazyColumn {
                items(50) { Text("Item $it") }
            }
        }
    )
}
```

--------------------------------

### State Management for Collapsing Top Bar (Kotlin)

Source: https://context7.com/flaringapp/composecollapsingtopbar/llms.txt

Demonstrates how to control and observe the collapsing state of a top bar programmatically using Compose. It includes manual expansion/collapse buttons and animates shadow elevation based on the collapse state. Dependencies include Compose UI, Material 3, and the collapsing top bar library.

```kotlin
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.dp
import com.flaringapp.compose.topbar.scaffold.CollapsingTopBarScaffold
import com.flaringapp.compose.topbar.scaffold.CollapsingTopBarScaffoldScrollMode
import com.flaringapp.compose.topbar.scaffold.rememberCollapsingTopBarScaffoldState
import kotlinx.coroutines.launch

@Composable
fun StateManagementExample() {
    val scaffoldState = rememberCollapsingTopBarScaffoldState(isExpanded = true)
    val scope = rememberCoroutineScope()

    // Animate shadow based on collapse state
    val shadowElevation by animateDpAsState(
        targetValue = if (scaffoldState.isCollapsed) 12.dp else 0.dp,
        label = "ShadowAnimation"
    )

    Column {
        // Manual controls
        Row(
            modifier = Modifier.padding(16.dp),
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            Button(onClick = {
                scope.launch { scaffoldState.expand() }
            }) {
                Text("Expand")
            }

            Button(onClick = {
                scope.launch { scaffoldState.collapse() }
            }) {
                Text("Collapse")
            }
        }

        CollapsingTopBarScaffold(
            state = scaffoldState,
            scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
            topBarModifier = Modifier.graphicsLayer {
                shadowElevation = shadowElevation.toPx()
            },
            topBar = { topBarState ->
                // Access detailed state information
                val progress = topBarState.layoutInfo.collapseProgress
                val height = topBarState.layoutInfo.height
                val isExpanded = topBarState.isExpanded
                val isCollapsed = topBarState.isCollapsed

                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(200.dp)
                        .background(Color.Cyan)
                )

                TopAppBar(
                    title = {
                        Text("Progress: ${(progress * 100).toInt()}%")
                    }
                )
            },
            body = {
                LazyColumn {
                    items(50) { Text("Item $it") }
                }
            }
        )
    }
}
```

--------------------------------

### Column Collapse Effects with Nested Collapsing (Kotlin)

Source: https://context7.com/flaringapp/composecollapsingtopbar/llms.txt

Illustrates how to create stacking collapse effects using `CollapsingTopBarColumn` for column-based nested collapsing within a `CollapsingTopBarScaffold`. This allows for elements like banners, app bars, filter chips, and pinned elements to have distinct collapsing behaviors (e.g., slide under, not collapsible, clip to bounds, pin when collapsed). Dependencies include Compose Material 3 and the compose-collapsing-topbar library.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.flaringapp.compose.topbar.nestedcollapse.CollapsingTopBarColumn
import com.flaringapp.compose.topbar.nestedcollapse.CollapsingTopBarColumnDirection
import com.flaringapp.compose.topbar.scaffold.CollapsingTopBarScaffold
import com.flaringapp.compose.topbar.scaffold.CollapsingTopBarScaffoldScrollMode

@Composable
fun ColumnCollapseExample() {
    CollapsingTopBarScaffold(
        scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
        topBar = { topBarState ->
            CollapsingTopBarColumn(
                state = topBarState,
                collapseDirection = CollapsingTopBarColumnDirection.BottomUp
            ) {
                // Banner that collapses (slides under next element)
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(100.dp)
                        .background(Color.Blue)
                )

                // Top app bar that never collapses (always visible)
                TopAppBar(
                    title = { Text("Always Visible") },
                    modifier = Modifier.notCollapsible()
                )

                // Filter chips that collapse and clip to bounds
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .clipToCollapse(), // Clips as it collapses
                    horizontalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    FilterChip(
                        selected = false,
                        onClick = { },
                        label = { Text("Filter 1") }
                    )
                    FilterChip(
                        selected = true,
                        onClick = { },
                        label = { Text("Filter 2") }
                    )
                }

                // Element that pins when collapsed (continues sliding up)
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(80.dp)
                        .background(Color.Green)
                        .pinWhenCollapsed() // Slides all the way under transparent elements
                )
            }
        },
        body = {
            LazyColumn {
                items(50) { Text("Item $it") }
            }
        }
    )
}
```

--------------------------------

### Basic Usage of CollapsingTopBarScaffold

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

Demonstrates the fundamental usage of CollapsingTopBarScaffold, a Scaffold-like wrapper required for the collapsing header to function correctly. It includes essential parameters like scrollMode, snapBehavior, topBar, and body.

```kotlin
CollapsingTopBarScaffold(
    scrollMode = CollapsingTopBarScaffoldScrollMode.enterAlwaysCollapsed(),
    snapBehavior = rememberCollapsingTopBarSnapBehavior(),
    topBar = {
        TopBarImage()
        TopAppBar()
    },
    body = {
        ContentUnderTopBar()
    },
)
```

--------------------------------

### Configure Snap Behavior for CollapsingTopBarScaffold

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

This snippet shows how to enable and configure the snap behavior for CollapsingTopBarScaffold using the 'snapBehavior' parameter and the 'rememberCollapsingTopBarSnapBehavior' function.

```kotlin
CollapsingTopBarScaffold(
    // ...
    snapBehavior = rememberCollapsingTopBarSnapBehavior(),
    // ...
)
```

--------------------------------

### Add ComposeCollapsingTopBar Dependency

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

This snippet shows how to add the ComposeCollapsingTopBar library to your project's build.gradle.kts file. Ensure your repositories are configured correctly in settings.gradle.kts.

```kotlin
dependencies {
    implementation("io.github.flaringapp:ComposeCollapsingTopBar:1.2.0")
}

repositories {
    mavenCentral()
}
```

--------------------------------

### Configure Snap Threshold for CollapsingTopBarScaffold

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

Shows how to specify a 'threshold' fraction when using 'rememberCollapsingTopBarSnapBehavior' to control the snapping direction's bound.

```kotlin
rememberCollapsingTopBarSnapBehavior(threshold = 0.75f)
```

--------------------------------

### Track Collapse Progress for Dynamic UI Effects

Source: https://context7.com/flaringapp/composecollapsingtopbar/llms.txt

This code demonstrates how to track the collapse progress of the top app bar to apply dynamic effects to UI elements. The `.progress()` modifier provides `totalProgress` and `itemProgress` values, allowing for real-time adjustments to properties like color or opacity. This is useful for creating animated transitions based on scroll state. Ensure the Compose Material 3 and Collapsing Top Bar dependencies are included.

```kotlin
import androidx.compose.foundation.layout.*
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.lerp
import androidx.compose.ui.unit.dp
import com.flaringapp.compose.topbar.scaffold.CollapsingTopBarScaffold
import com.flaringapp.compose.topbar.scaffold.CollapsingTopBarScaffoldScrollMode

@Composable
fun ProgressTrackingExample() {
    CollapsingTopBarScaffold(
        scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
        topBar = {
            var topBarColorProgress by remember { mutableFloatStateOf(1f) }

            // Track progress on a background image
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
                    .background(Color.Blue)
                    .progress { totalProgress, itemProgress ->
                        // totalProgress: 0f (collapsed) to 1f (expanded)
                        // itemProgress: progress of this specific element
                        topBarColorProgress = itemProgress
                    }
            )

            // App bar that changes opacity based on collapse progress
            TopAppBar(
                title = { Text("Dynamic Color") },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.surface.copy(
                        alpha = lerp(1f, 0f, topBarColorProgress)
                    )
                )
            )
        },
        body = {
            LazyColumn {
                items(50) { Text("Item $it") }
            }
        }
    )
}
```

--------------------------------

### Collapse and Exit Scroll Mode Configuration

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

Demonstrates the configuration for the 'collapseAndExit' scroll mode. Similar to 'collapse', it allows for the 'expandAlways' parameter to be set to false.

```kotlin
CollapsingTopBarScaffoldScrollMode.collapseAndExit(expandAlways = false)
```

--------------------------------

### CollapsingTopBarScaffoldState Usage

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

Explains the `CollapsingTopBarScaffoldState`, a state holder for top bar layout data that also allows manual control. It provides access to `isExpanded`, `isCollapsed`, and methods like `expand()` and `collapse()`, along with detailed layout information via `topBarState`, `exitState`.

```kotlin
val state = rememberCollapsingTopBarScaffoldState()

// Accessing state
val isCollapsed = state.isCollapsed

// Programmatic control
LaunchedEffect(Unit) {
    state.collapse()
}
```

--------------------------------

### Collapse Scroll Mode Configuration

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

Shows the configuration for the 'collapse' scroll mode in CollapsingTopBarScaffold. The 'expandAlways' parameter can be set to false to control whether the top bar expands anywhere in the list.

```kotlin
CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false)
```

--------------------------------

### CollapsingTopBarExitState Usage

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

Details the `CollapsingTopBarExitState`, which is relevant only when using scroll modes that support exiting (e.g., `collapseAndExit()`, `enterAlwaysCollapsed()`). It provides state data (`isFullyEntered`, `isFullyExited`), manual controls (`expand()`, `collapse()`), and the current exit offset via `exitHeight`.

```kotlin
val scaffoldState = rememberCollapsingTopBarScaffoldState()
val exitState = scaffoldState.exitState

// Accessing exit offset
val currentExitHeight = exitState.exitHeight
```

--------------------------------

### Configure Scroll Mode for CollapsingTopBarScaffold

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

Illustrates how to configure different scroll modes for the CollapsingTopBarScaffold. The 'enterAlwaysCollapsed' mode is shown, which collapses the top bar and allows it to enter collapsed anywhere in the list.

```kotlin
CollapsingTopBarScaffold(
    // ...
    scrollMode = CollapsingTopBarScaffoldScrollMode.enterAlwaysCollapsed(),
    // ...
)
```

--------------------------------

### ComposeCollapsingTopBar Scroll Mode Variations in Kotlin

Source: https://context7.com/flaringapp/composecollapsingtopbar/llms.txt

Illustrates different scroll modes available for CollapsingTopBarScaffold: 'collapse' (regular collapsing), 'collapseAndExit' (collapses and exits the screen), and 'enterAlwaysCollapsed' (enters collapsed, expands only at the top). These modes control the behavior of the top bar during scrolling interactions.

```kotlin
import com.flaringapp.compose.topbar.scaffold.CollapsingTopBarScaffold
import com.flaringapp.compose.topbar.scaffold.CollapsingTopBarScaffoldScrollMode

@Composable
fun ScrollModeExamples() {
    // Mode 1: Regular collapse - collapses to smallest child height
    CollapsingTopBarScaffold(
        scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(
            expandAlways = false // Only expand when at top
        ),
        topBar = { /* ... */ },
        body = { /* ... */ }
    )

    // Mode 2: Collapse and exit - collapses then exits screen
    CollapsingTopBarScaffold(
        scrollMode = CollapsingTopBarScaffoldScrollMode.collapseAndExit(
            expandAlways = true // Expand anywhere in list
        ),
        topBar = { /* ... */ },
        body = { /* ... */ }
    )

    // Mode 3: Enter always collapsed - exits on scroll down,
    // enters collapsed on scroll up, expands only at top
    CollapsingTopBarScaffold(
        scrollMode = CollapsingTopBarScaffoldScrollMode.enterAlwaysCollapsed(),
        topBar = { /* ... */ },
        body = { /* ... */ }
    )
}
```

--------------------------------

### Floating Button with Custom Positioning in CollapsingTopBarScaffold (Kotlin)

Source: https://context7.com/flaringapp/composecollapsingtopbar/llms.txt

Demonstrates how to position a FloatingActionButton outside the normal collapse calculation using the `.floating()` modifier. This allows for custom placement relative to the collapsing top bar's layout information, ensuring it remains visible or positioned as intended during scroll events. Dependencies include Compose Material 3 and the compose-collapsing-topbar library.

```kotlin
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.flaringapp.compose.topbar.scaffold.CollapsingTopBarScaffold
import com.flaringapp.compose.topbar.scaffold.CollapsingTopBarScaffoldScrollMode

@Composable
fun FloatingButtonExample() {
    CollapsingTopBarScaffold(
        scrollMode = CollapsingTopBarScaffoldScrollMode.collapseAndExit(expandAlways = false),
        topBar = { topBarState ->
            // Background image
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
                    .background(Color.LightGray)
            )

            // Regular top app bar
            TopAppBar(
                title = { Text("Floating Button") },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = Color.Transparent
                )
            )

            // Floating action button with custom positioning logic
            FloatingActionButton(
                onClick = { /* action */ },
                modifier = Modifier
                    .floating() // Excluded from collapse calculation
                    .offset(
                        y = (topBarState.layoutInfo.height - 28.dp.toPx()).dp
                    )
                    .padding(end = 16.dp)
            ) { 
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        },
        body = {
            LazyColumn {
                items(50) { Text("Item $it") }
            }
        }
    )
}
```

--------------------------------

### Track and Utilize Top Bar Collapse Progress

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

The `progress` modifier allows you to monitor the collapse progress of both the top bar and the element it's applied to. It provides `totalProgress` and `itemProgress` lambda parameters, enabling custom transformations based on the collapse state. This is useful for dynamic visual changes like color transitions.

```kotlin
Modifier.progress { totalProgress, itemProgress -> }

CollapsingTopBarScaffold(
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
    topBar = {
        var topBarColorProgress by remember { mutableFloatStateOf(1f) }
        SampleTopBarImage(
            modifier = Modifier.progress {
                topBarColorProgress =
                    itemProgress.coerceAtMost(SCRIM_START_FRACTION) / SCRIM_START_FRACTION
            },
        )
        SampleTopAppBar(
            containerColor = MaterialTheme.colorScheme.surface.copy(
                alpha = lerp(1f, 0f, topBarColorProgress),
            ),
        )
    },
    body = {
        SampleContent()
    },
)
```

--------------------------------

### Set CollapsingTopBarColumn Collapse Direction

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

Configure the direction in which the CollapsingTopBarColumn collapses. Supports BottomUp (default) and TopToBottom.

```kotlin
CollapsingTopBarColumn(
    state = topBarState,
    collapseDirection = CollapsingTopBarColumnDirection.TopToBottom,
) { /* ... */ }

```

--------------------------------

### Clip Element to Bounds during Collapse with Modifier.clipToCollapse()

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

Employ Modifier.clipToCollapse() to clip an element within its bounds as it collapses, preventing it from being visible under subsequent transparent elements.

```kotlin
Modifier.clipToCollapse()

```

```kotlin
CollapsingTopBarScaffold(
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = true),
    topBar = {
        CollapsingTopBarColumn(
            state = topBarState,
        ) {
            SampleFilterChips(
                modifier = Modifier.clipToCollapse(),
            )
            SampleTopAppBar(
                modifier = Modifier.notCollapsible(),
                containerColor = Color.Transparent,
            )
            SampleFilterChips(
                modifier = Modifier.clipToCollapse(),
            )
        }
    },
    body = {
        SampleContent()
    },
)

```

--------------------------------

### Track Column Progress with Modifier

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

This modifier allows tracking the progress of a collapsing top bar column and any applied element. It enables custom transformations based on the progress, useful for animations like fading out elements.

```kotlin
Modifier.columnProgress()
```

--------------------------------

### Implement Parallax Scrolling Effect with Compose

Source: https://context7.com/flaringapp/composecollapsingtopbar/llms.txt

This snippet shows how to create a parallax scrolling effect for background images within a collapsing top app bar. It utilizes the `.parallax()` modifier to control the scrolling speed of the background relative to the top bar's collapse state. Ensure you have an image resource (e.g., R.drawable.header_image) and the necessary Compose dependencies.

```kotlin
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.flaringapp.compose.topbar.scaffold.CollapsingTopBarScaffold
import com.flaringapp.compose.topbar.scaffold.CollapsingTopBarScaffoldScrollMode

@Composable
fun ParallaxExample() {
    CollapsingTopBarScaffold(
        scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
        topBar = {
            // Background image with 25% parallax effect
            Image(
                painter = painterResource(id = R.drawable.header_image),
                contentDescription = null,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
                    .parallax(0.25f), // Moves at 25% speed of collapse
                contentScale = ContentScale.Crop
            )

            // Transparent top app bar over the image
            TopAppBar(
                title = { Text("Parallax Header") },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = Color.Transparent
                )
            )
        },
        body = {
            // Scrollable content
            LazyColumn {
                items(50) { Text("Item $it") }
            }
        }
    )
}
```

--------------------------------

### Pin Element when Collapsed with Modifier.pinWhenCollapsed()

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

Utilize Modifier.pinWhenCollapsed() to make an element continue its movement even when fully collapsed, allowing it to slide off-screen.

```kotlin
Modifier.pinWhenCollapsed()

```

```kotlin
CollapsingTopBarScaffold(
    modifier = modifier,
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
    topBar = {
        CollapsingTopBarColumn(
            state = topBarState,
            collapseDirection = CollapsingTopBarColumnDirection.TopToBottom,
        ) {
            SampleTopAppBar(
                modifier = Modifier.notCollapsible(),
            )
            InfoBlock(
                modifier = Modifier.pinWhenCollapsed(),
            )
            SearchBar(
                modifier = Modifier.zIndex(1f),
            )
        }
    },
    body = {
        SampleContent()
    },
)

```

--------------------------------

### Implement Floating Elements in Top Bar

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

The `floating()` modifier excludes an element from the collapsed height calculation, allowing it to float freely within the top bar. This is ideal for elements like floating action buttons or indicators that need independent positioning. Use it when other non-floating elements are present.

```kotlin
Modifier.floating()

CollapsingTopBarScaffold(
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapseAndExit(expandAlways = false),
    topBar = { topBarState ->
        SampleTopBarImage()
        SampleTopAppBar(
            containerColor = Color.Transparent,
        )
        FloatingButton(
            modifier = Modifier.floating(),
            state = topBarState,
        )
    },
    body = {
        SampleContent()
    },
)
```

--------------------------------

### Exclude Element from Collapsing with Modifier.notCollapsible()

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

Use Modifier.notCollapsible() to prevent an element from participating in the collapsing process, ensuring it always remains visible.

```kotlin
Modifier.notCollapsible()

```

```kotlin
CollapsingTopBarScaffold(
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
    topBar = {
        CollapsingTopBarColumn(topBarState) {
            SampleTopBarBanner()
            SampleTopAppBar(
                modifier = Modifier.notCollapsible(),
            )
            SampleVerticalFadingEdge()
            SampleFilterChips()
        }
    },
    body = {
        SampleContent()
    },
)

```

--------------------------------

### Enable Nested Collapse Behavior for Complex Elements

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

The `nestedCollapse()` modifier establishes a link between an element with a custom nested collapsing mechanism and the main top bar. This is intended for creating intricate collapsing components, such as a `CollapsingTopBarColumn`, allowing for complex hierarchical collapse effects.

```kotlin
Modifier.nestedCollapse()
```

--------------------------------

### Apply Parallax Effect to Top Bar Elements

Source: https://github.com/flaringapp/composecollapsingtopbar/blob/main/README.md

The `parallax()` modifier creates a parallax scrolling effect by offsetting an element upward as the top bar collapses. It takes a `ratio` parameter (a fraction of the collapsible height) to control the intensity of the effect. This is useful for background images or decorative elements.

```kotlin
Modifier.parallax()

CollapsingTopBarScaffold(
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
    topBar = {
        SampleTopBarImage(
            modifier = Modifier.parallax(0.25f),
        )
        SampleTopAppBar(
            containerColor = Color.Transparent,
        )
    },
    body = {
        SampleContent()
    },
)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.