Wall of Text Animation

WallOfTextAnimation.kt

import androidx.compose.animation.Animatable
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.CompositingStrategy
import androidx.compose.ui.graphics.graphicsLayer


@Composable
fun WallOfTextAnimation(modifier: Modifier = Modifier) {
    val hFloat = remember { Animatable(0f) }
    val alpha = remember { Animatable(0f) }
    LaunchedEffect(Unit) {
        hFloat.animateTo(1f, tween(5000, easing = LinearEasing))
        alpha.animateTo(1f, tween(3000, easing = LinearEasing))
        hFloat.animateTo(0f, tween(1000, easing = LinearEasing))
        alpha.animateTo(0f, tween(2000, easing = LinearEasing))
    }
    Box(
        modifier = modifier
            .fillMaxSize()
            .background(Color.Black)
            .graphicsLayer { CompositingStrategy.Offscreen }
            .drawWithCache {
                val brush = Brush.verticalGradient(
                    0f to Color.Black,
                    hFloat.value to Color.Black.copy(alpha = alpha.value),
                    1f to Color.Black.copy(alpha = alpha.value),
                )
                onDrawWithContent {
                    drawContent()
                    drawRect(brush = brush, blendMode = BlendMode.DstIn)
                }
            },
        contentAlignment = Alignment.Center,
    ) {
        Column {
            AppText("Hello everyone \uD83D\uDC4B\uD83C\uDFFB")
            AppText("My name is Cavin Macwan")
            AppText("And this is an example of a wall of text animation")
            AppText("I hope you like it")
            AppText("Occaecat anim cillum voluptate mollit magna nostrud et.")
            AppText("Dolor elit amet dolor esse anim anim Lorem consequat nisi pariatur cupidatat proident quis adipisicing exercitation.")
            AppText("Mollit consectetur aliquip dolor non Lorem sunt et eu.")
            AppText("Occaecat Lorem sunt nulla quis commodo veniam.")
            AppText("Ea incididunt reprehenderit reprehenderit eu magna ad.")
            AppText("Officia cillum qui amet aliquip dolor labore voluptate culpa cupidatat ea nisi id.")
            AppText("Quis magna sunt culpa labore cupidatat excepteur irure.")
            AppText("Consequat minim ad dolore minim sint qui aute incididunt veniam sint eu dolore dolor.")
        }
    }
}

@Composable
fun AppText(text: String) {
    Text(
        text,
        style = MaterialTheme.typography.bodyLarge,
        color = Color.White,
    )
}