---
title: "rememberTransformationSpec"
description: "Computes and remembers the appropriate [TransformationSpec] for the current screen size, given
one or more [ResponsiveTransformationSpec]s for different screen sizes.

It would return special NoOp version of [TransformationSpec] when ReducedMotion is on.

Example usage for [ResponsiveTransformationSpec], the recommended [TransformationSpec] for
large-screen aware Wear apps:"
type: "composable"
---

<div class='type'>Composable Function</div>


<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun rememberTransformationSpec(
    vararg specs: ResponsiveTransformationSpec
): TransformationSpec
```


Computes and remembers the appropriate `TransformationSpec` for the current screen size, given
one or more `ResponsiveTransformationSpec`s for different screen sizes.

It would return special NoOp version of `TransformationSpec` when ReducedMotion is on.

Example usage for `ResponsiveTransformationSpec`, the recommended `TransformationSpec` for
large-screen aware Wear apps:

#### Parameters

| | |
| --- | --- |
| specs | The `ResponsiveTransformationSpec`s that should be used for different screen sizes. |




<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun rememberTransformationSpec(): TransformationSpec
```


Computes and remembers the appropriate `TransformationSpec` for the current screen size.

It would return special NoOp version of `TransformationSpec` when ReducedMotion is on.




## Code Examples
### ResponsiveTransformationSpecButtonSample
```kotlin
@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
```kotlin
@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(),
                    )
                }
            }
        }
    }
}
```