rememberTransformationSpec

ResponsiveTransformationSpecButtonSample

@Composable
@Preview
fun ResponsiveTransformationSpecButtonSample() {
    val transformationSpec =
        rememberTransformationSpec(
            ResponsiveTransformationSpec.smallScreen(
                // Makes the content disappear on the edges.
                contentAlpha = TransformationVariableSpec(0f)
            ),
            ResponsiveTransformationSpec.largeScreen(
                // Makes the content disappear on the edges, but a bit more aggressively.
                contentAlpha =
                    TransformationVariableSpec(0f, transformationZoneEnterFraction = 0.2f)
            ),
        )
    TransformingLazyColumn(
        contentPadding = PaddingValues(20.dp),
        modifier = Modifier.background(Color.Black),
    ) {
        items(count = 100) { index ->
            Button(
                onClick = {},
                modifier =
                    Modifier.fillMaxWidth().transformedHeight(this@items, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec),
            ) {
                Text("Item $index")
            }
        }
    }
}

TransformingLazyColumnNotificationsSample

@Preview
@Composable
fun TransformingLazyColumnNotificationsSample() {
    val state = rememberTransformingLazyColumnState()
    val transformationSpec = rememberTransformationSpec()
    data class NotificationItem(val title: String, val body: String)
    val notifications =
        listOf(
            NotificationItem(
                "☕ Coffee Break?",
                "Step away from the screen and grab a pick-me-up. Step away from the screen and grab a pick-me-up.",
            ),
            NotificationItem("🌟 You're Awesome!", "Just a little reminder in case you forgot 😊"),
            NotificationItem("👀 Did you know?", "Check out [app name]'s latest feature update."),
            NotificationItem("📅 Appointment Time", "Your meeting with [name] is in 15 minutes."),
        )
    AppScaffold {
        ScreenScaffold(state) { contentPadding ->
            TransformingLazyColumn(state = state, contentPadding = contentPadding) {
                item {
                    ListHeader(
                        transformation = SurfaceTransformation(transformationSpec),
                        modifier =
                            Modifier.transformedHeight(this, transformationSpec).animateItem(),
                    ) {
                        Text("Notifications")
                    }
                }
                items(notifications) { notification ->
                    TitleCard(
                        onClick = {},
                        title = {
                            Text(
                                notification.title,
                                fontWeight = FontWeight.Bold,
                                style = MaterialTheme.typography.labelLarge,
                                maxLines = 1,
                            )
                        },
                        subtitle = { Text(notification.body) },
                        transformation = SurfaceTransformation(transformationSpec),
                        modifier =
                            Modifier.transformedHeight(this, transformationSpec).animateItem(),
                    )
                }
            }
        }
    }
}