Ticker - Basic Layout

ticker_basic_layout.kt

@Composable
fun Ticker(
    letter: Char,
    modifier: Modifier = Modifier,
    textColor: Color = Color.White,
    backgroundColor: Color = Color.Black,
    fontSize: TextUnit = 96.sp,
) {
    // 1
    val currentLetter = /* TODO */
    val nextLetter = /* TODO */
    // 2
    Box(
        modifier = modifier
    ) {
        // 3
        CenteredText(
            letter = nextLetter,
            textColor = textColor,
            backgroundColor = backgroundColor,
            fontSize = fontSize,
        )
        // 4
        Column {
            // 5
            Box(
                // 6
                modifier = Modifier.zIndex(1f)
            ) {
                // 7
                if (/* 1/2 half of animation */ ) {
                    TopHalf {
                        CenteredText(
                            letter = currentLetter,
                            textColor = textColor,
                            backgroundColor = backgroundColor,
                            fontSize = fontSize,
                        )
                    }
                } else {
                    BottomHalf(
                        modifier = Modifier.graphicsLayer {
                            rotationX = 180f
                        }
                    ) {
                        CenteredText(
                            letter = nextLetter,
                            textColor = textColor,
                            backgroundColor = backgroundColor,
                            fontSize = fontSize,
                        )
                    }
                }
            }
            // 8
            BottomHalf {
                CenteredText(
                    letter = currentLetter,
                    textColor = textColor,
                    backgroundColor = backgroundColor,
                    fontSize = fontSize,
                )
            }
        }
    }
}