Flip Card with Jetpack Compose

FlipCard.kt

@Composable
fun FlipActionScreen() {
    var flippedState by remember { mutableStateOf(false) }
    val rotationY by animateFloatAsState(
        targetValue = if (flippedState) 180f else 0f,
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioHighBouncy,
            stiffness = Spring.StiffnessVeryLow
        )
    )
    val animatedColorAnim by animateColorAsState(
        targetValue = if (flippedState) Color(0xff4C3B4D) else Color(0XFFA53860),
        animationSpec = spring(Spring.DampingRatioMediumBouncy), label = "animatedColorAnim"
    )

    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        Box(
            modifier = Modifier
                .size(250.dp, 400.dp)
                .clip(RoundedCornerShape(20.dp))
                .padding(20.dp)
                .graphicsLayer {
                    this.rotationY = rotationY
                    this.cameraDistance = 12f * density
                }
                .shadow(4.dp, RoundedCornerShape(20.dp))
                .background(
                    brush = Brush.verticalGradient(
                        colors = listOf(animatedColorAnim, animatedColorAnim)
                    )
                )
        ) {
            Text(
                text = if (flippedState) "AC" else "TION",
                fontSize = 24.sp,
                color = Color.White,
                modifier = Modifier
                    .align(Alignment.Center)
                    .graphicsLayer {
                        this.rotationY = if (rotationY > 90f && rotationY < 270f) 180f else 0f
                    }
            )
        }

        Button(
            onClick = { flippedState = !flippedState },
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .padding(bottom = 30.dp)
        ) {
            Text("Flip")
        }
    }
}