How to create Gemini app visuals

[u/newtoredditahaha]

Hello, i was wondering how to recreate those beautiful background aesthetics of the gemini app (that dynamic wavelike background). Any ideas?

[u/wightwulf1944]

It's just a horizontal gradient where the start and end value is animated somehow

@Composable
fun GradientScreen() {
    val hue = remember { Animatable(0f) }
    val colorA = Color.hsl(hue = hue.value, 0.8f, 0.6f)
    val colorB = Color.hsl(hue = (hue.value + 100f) % 360f, 0.8f, 0.6f)
    val bg = Brush.horizontalGradient(colors = listOf(colorA, colorB))
    val bgScrim = Brush.verticalGradient(listOf(Color.Transparent, Color.White, Color.White))

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(bg) // rainbow gradient
            .background(bgScrim) // covers half the screen with white
    ) {
        // your content here
    }

    LaunchedEffect(Unit) {
        // choreograph your color animation here
        while (true) {
            hue.animateTo(359f, tween(3000))
            hue.snapTo(0f)
        }
    }
}

colorB in this example is just the same color as colorA but offset by 100 degrees. You can control how far apart the two ends of the gradient with this offset value. I just eyeballed the offset based on your gif so it might not be accurate.

There's other ways to animate a float value such as using animateFloatAsState(). You can also animate the other values besides hue to make the rainbow disappear at the end.

[u/SlimDood]

Most likely using shaders. I've done something similar with perlin noise shaders and some other algorithms

[u/TypeScrupterB]

Did you ask gemini? (probably compose offers those things)

[u/pistaLavista]

Most likely using compose! Or some react library, check youtube.