AnimatedTextTextField.kt

@Composable
fun AnimatedTextTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    textStyle: TextStyle = TextStyle(fontSize = 50.sp)
) {
    val scope = rememberCoroutineScope()
    val animatables = remember { mutableStateMapOf<Int, Animatable<Float, AnimationVector1D>>() }

    BasicTextField(
        value = value,
        onValueChange = { newValue ->
            val oldLength = value.length
            val newLength = newValue.length
            if (newLength > oldLength) {
                // Character added
                for (i in oldLength until newLength) {
                    animatables[i] = Animatable(0f)
                    scope.launch {
                        animatables[i]?.animateTo(1f, animationSpec = tween(300))
                    }
                }
            } else if (newLength < oldLength) {
                // Character(s) removed
                for (i in newLength until oldLength) {
                    scope.launch {
                        animatables[i]?.animateTo(0f, animationSpec = tween(300))
                        animatables.remove(i)
                    }
                }
            }
            onValueChange(newValue)
        },
        modifier = modifier,
        textStyle = textStyle.copy(color = Color.Transparent),
        decorationBox = { innerTextField ->
            innerTextField()
            value.forEachIndexed { index, char ->
                val scale = animatables[index]?.value ?: 1f
                val alpha = animatables[index]?.value ?: 1f
                Text(
                    text = value,
                    style = textStyle,
                    modifier = Modifier
                        .alpha(alpha)
                        .graphicsLayer {
                            scaleX = scale
                            scaleY = scale
                            transformOrigin = TransformOrigin.Center
                        }
                )
            }
        }
    )
}