Liquid Glass Creations

[Aarav90-cpu]

I will be sharing things I make out of liquid glass here... Others can share their's too...

LiquidMenu.kt

package com.example.aitesting

import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.spring
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.util.lerp
import com.kyant.backdrop.backdrops.layerBackdrop
import com.kyant.backdrop.backdrops.rememberLayerBackdrop
import com.example.aitesting.R
import com.kyant.backdrop.drawBackdrop
import com.kyant.backdrop.effects.blur
import com.kyant.backdrop.effects.lens
import com.kyant.backdrop.effects.vibrancy
import com.kyant.capsule.ContinuousRoundedRectangle

@Preview
@Composable
fun LiquidMorphDemo() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.TopEnd
    ) {
        // 1. Create the Backdrop
        // We use the default behavior now, which records whatever component we attach it to
        val backdrop = rememberLayerBackdrop()

        // 2. The Background Image
        // This replaces the circles. We attach the backdrop recorder here so the glass knows what to refract.
        Image(
            painter = painterResource(id = R.drawable.image),
            contentDescription = "Background",
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .fillMaxSize()
                .layerBackdrop(backdrop) // <--- Important: This captures the image for the glass effect
        )

        // 3. State for our morphing animation
        var isOpen by remember { mutableStateOf(false) }

        // Animate from 0f (Circle) to 1f (Big Box)
        val progress by animateFloatAsState(
            targetValue = if (isOpen) 1f else 0f,
            animationSpec = spring(
                dampingRatio = Spring.DampingRatioLowBouncy,
                stiffness = Spring.StiffnessLow
            ),
            label = "MorphProgress"
        )

        // 4. The Morphing Glass Element
        val density = LocalDensity.current

        // Calculate dynamic size
        val currentWidth = 64.dp + (216.dp * progress)
        val currentHeight = 64.dp + (296.dp * progress)

        // Dynamic Shape Calculation
        val currentShape = remember(progress, currentWidth, currentHeight) {
            val widthPx = with(density) { currentWidth.toPx() }
            val heightPx = with(density) { currentHeight.toPx() }
            val minDim = minOf(widthPx, heightPx)

            val maxRadius = minDim / 2f
            val minRadius = with(density) { 24.dp.toPx() }

            val radiusPx = lerp(maxRadius, minRadius, progress)
            ContinuousRoundedRectangle(radiusPx)
        }

        Box(
            modifier = Modifier
                .padding(24.dp)
                .size(width = currentWidth, height = currentHeight)
                .clickable { isOpen = !isOpen }
                .drawBackdrop(
                    backdrop = backdrop,
                    shape = { currentShape },
                    effects = {
                        vibrancy()
                        blur(12.dp.toPx())
                        lens(
                            refractionHeight = 24.dp.toPx(),
                            refractionAmount = 32.dp.toPx(),
                            chromaticAberration = true
                        )
                    },
                    onDrawSurface = {
                        // Glass tint
                        drawRect(Color.White.copy(alpha = 0.2f))
                        // Glass border
                        drawRect(
                            color = Color.White.copy(alpha = 0.4f),
                            style = androidx.compose.ui.graphics.drawscope.Stroke(width = 1.dp.toPx())
                        )
                    }
                )
        ) {
            // Menu Content
            if (progress > 0.1f) {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(vertical = 24.dp),
                    verticalArrangement = Arrangement.SpaceEvenly,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    val contentAlpha = (progress - 0.2f).coerceAtLeast(0f) / 0.8f

                    val buttonShape = remember {
                        with(density) { ContinuousRoundedRectangle(16.dp.toPx()) }
                    }

                    @Composable
                    fun MenuButton(text: String) {
                        Box(
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(56.dp)
                                .padding(horizontal = 24.dp)
                                .graphicsLayer { alpha = contentAlpha }
                                .background(
                                    color = Color(0xFF007AFF).copy(alpha = 0.8f),
                                    shape = buttonShape
                                )
                                .clickable { isOpen = false },
                            contentAlignment = Alignment.Center
                        ) {
                            Text(
                                text = text,
                                fontSize = 18.sp,
                                fontWeight = FontWeight.Medium,
                                color = Color.White
                            )
                        }
                    }

                    MenuButton("Profile")
                    MenuButton("FAQ")
                    MenuButton("Settings")
                    MenuButton("Profile")
                    MenuButton("FAQ")
                    
                }
            }
        }
    }
}

[Aarav90-cpu]

The image that is to be saved in drawable...

[Aarav90-cpu]

LiquidLockScreen

package com.example.aitesting

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.kyant.backdrop.Backdrop
import com.kyant.backdrop.backdrops.layerBackdrop
import com.kyant.backdrop.backdrops.rememberLayerBackdrop
import com.kyant.backdrop.drawBackdrop
import com.kyant.backdrop.effects.blur
import com.kyant.backdrop.effects.lens
import com.kyant.backdrop.effects.vibrancy
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
import kotlin.math.roundToInt

@Preview
@Composable
fun LiquidMorphDemo() {
    Box(
        modifier = Modifier.fillMaxSize()
    ) {
        // 1. The Global Backdrop
        val backdrop = rememberLayerBackdrop()

        // 2. Wallpaper Layer
        Image(
            painter = painterResource(id = R.drawable.lol),
            contentDescription = "Wallpaper",
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .fillMaxSize()
                .layerBackdrop(backdrop)
        )

        var isUnlocked by remember { mutableStateOf(false) }

        // 3. Fake Status Bar & Dynamic Island
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 16.dp, start = 24.dp, end = 24.dp)
        ) {
            // Dynamic Island
            Box(
                modifier = Modifier
                    .align(Alignment.TopCenter)
                    .size(120.dp, 36.dp)
                    .background(Color.Black, RoundedCornerShape(18.dp)),
                contentAlignment = Alignment.Center
            ) {
                // Mini Time inside Dynamic Island
                Text(
                    text = "9:41",
                    color = Color.White,
                    fontSize = 14.sp,
                    fontWeight = FontWeight.Bold
                )
            }

            // Fake Indicators
            Row(
                modifier = Modifier.align(Alignment.TopEnd),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(6.dp)
            ) {
                Text("5G", color = Color.White, fontSize = 12.sp, fontWeight = FontWeight.Bold)
                // Battery Icon (Simple representation)
                Box(
                    modifier = Modifier
                        .size(24.dp, 12.dp)
                        .background(Color.Transparent, RoundedCornerShape(4.dp))
                        .drawBackdrop(
                            backdrop = backdrop,
                            shape = { RoundedCornerShape(4.dp) },
                            effects = { blur(4.dp.toPx()) },
                            onDrawSurface = {
                                drawRect(Color.White.copy(alpha = 0.4f), style = androidx.compose.ui.graphics.drawscope.Stroke(1.dp.toPx()))
                                drawRect(Color.White, size = size.copy(width = size.width * 0.8f)) // 80% battery
                            }
                        )
                )
            }
        }

        // 4. Passcode UI
        AnimatedVisibility(
            visible = !isUnlocked,
            enter = fadeIn(),
            exit = fadeOut()
        ) {
            PasscodeScreen(
                backdrop = backdrop,
                onUnlock = { isUnlocked = true }
            )
        }

        // 5. Unlocked UI
        if (isUnlocked) {
            Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Column(horizontalAlignment = Alignment.CenterHorizontally) {
                    Text(
                        "🔓",
                        fontSize = 64.sp
                    )
                    Text(
                        "Unlocked",
                        fontSize = 32.sp,
                        fontWeight = FontWeight.Bold,
                        color = Color.White
                    )
                    Text(
                        "Tap to lock",
                        fontSize = 16.sp,
                        color = Color.White.copy(alpha = 0.7f),
                        modifier = Modifier
                            .padding(top = 16.dp)
                            .clickable { isUnlocked = false }
                    )
                }
            }
        }
    }
}

@Composable
fun PasscodeScreen(
    backdrop: Backdrop,
    onUnlock: () -> Unit
) {
    var passcode by remember { mutableStateOf("") }
    var isLockedOut by remember { mutableStateOf(false) }
    var lockoutTime by remember { mutableStateOf(0) }

    // Shake Animation
    val shakeOffset = remember { Animatable(0f) }
    val scope = rememberCoroutineScope()

    fun triggerShake() {
        scope.launch {
            for (i in 0..2) {
                shakeOffset.animateTo(20f, spring(stiffness = Spring.StiffnessHigh))
                shakeOffset.animateTo(-20f, spring(stiffness = Spring.StiffnessHigh))
            }
            shakeOffset.animateTo(0f)
        }
    }

    LaunchedEffect(isLockedOut) {
        if (isLockedOut) {
            lockoutTime = 10
            while (lockoutTime > 0) {
                delay(1000)
                lockoutTime--
            }
            isLockedOut = false
        }
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // Prompt Text
        if (isLockedOut) {
            Text(
                text = "Try again in $lockoutTime seconds",
                fontSize = 18.sp,
                color = Color.White,
                fontWeight = FontWeight.Bold,
                modifier = Modifier.padding(bottom = 24.dp)
            )
        } else {
            Text(
                text = "Enter Passcode",
                fontSize = 22.sp,
                color = Color.White,
                fontWeight = FontWeight.SemiBold,
                modifier = Modifier.padding(bottom = 24.dp)
            )
        }

        // Passcode Dots
        Row(
            horizontalArrangement = Arrangement.spacedBy(24.dp),
            modifier = Modifier
                .padding(bottom = 64.dp)
                .offset { IntOffset(shakeOffset.value.roundToInt(), 0) } // Apply shake
        ) {
            repeat(4) { index ->
                val isFilled = index < passcode.length
                Box(
                    modifier = Modifier
                        .size(16.dp)
                        .background(
                            color = if (isFilled) Color.White else Color.White.copy(alpha = 0.3f),
                            shape = CircleShape
                        )
                        .then(
                            if (!isFilled) Modifier.drawBackdrop(
                                backdrop = backdrop,
                                shape = { CircleShape },
                                effects = { blur(8.dp.toPx()) }
                            ) else Modifier
                        )
                )
            }
        }

        // Glass Keypad
        LazyVerticalGrid(
            columns = GridCells.Fixed(3),
            contentPadding = PaddingValues(horizontal = 48.dp),
            verticalArrangement = Arrangement.spacedBy(24.dp),
            horizontalArrangement = Arrangement.spacedBy(24.dp),
            modifier = Modifier.fillMaxWidth()
        ) {
            items(9) { idx ->
                val number = (idx + 1).toString()
                GlassKey(backdrop, number, enabled = !isLockedOut) {
                    if (passcode.length < 4) {
                        passcode += number
                        if (passcode == "1234") {
                            onUnlock()
                        } else if (passcode.length == 4) {
                            // Wrong Password Logic
                            triggerShake()
                            passcode = ""
                            // Simple logic: lock out immediately on wrong attempt for demo
                            isLockedOut = true
                        }
                    }
                }
            }
            item {} // Empty slot
            item {
                GlassKey(backdrop, "0", enabled = !isLockedOut) {
                    if (passcode.length < 4) {
                        passcode += "0"
                        if (passcode == "1234") {
                            onUnlock()
                        } else if (passcode.length == 4) {
                            triggerShake()
                            passcode = ""
                            isLockedOut = true
                        }
                    }
                }
            }
            item {
                // Delete / Backspace Button
                Box(
                    modifier = Modifier
                        .size(80.dp)
                        .clickable(enabled = !isLockedOut) {
                            if (passcode.isNotEmpty()) {
                                passcode = passcode.dropLast(1)
                            }
                        },
                    contentAlignment = Alignment.Center
                ) {
                    Text("⌫", color = Color.White, fontSize = 24.sp)
                }
            }
        }
    }
}

@Composable
fun GlassKey(
    backdrop: Backdrop,
    number: String,
    enabled: Boolean = true,
    onClick: () -> Unit
) {
    val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()

    // Expand on click animation
    val scale by animateFloatAsState(
        targetValue = if (isPressed) 1.2f else 1f,
        animationSpec = spring(stiffness = Spring.StiffnessMedium)
    )

    Box(
        modifier = Modifier
            .size(80.dp)
            .graphicsLayer {
                scaleX = scale
                scaleY = scale
            }
            .clip(CircleShape)
            .drawBackdrop(
                backdrop = backdrop,
                shape = { CircleShape },
                effects = {
                    vibrancy() // More blur when pressed
                    lens(20.dp.toPx(), 40.dp.toPx())
                },
                onDrawSurface = {
                    drawRect(Color.White.copy(alpha = if (isPressed) 0.3f else 0.15f))
                }
            )
            .clickable(
                interactionSource = interactionSource,
                enabled = enabled,
                onClick = onClick,
            ),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = number,
            fontSize = 32.sp,
            color = Color.White,
            fontWeight = FontWeight.Medium
        )
    }
}

lol image:

[Aarav90-cpu]

Liquid Scroll Wheel:

package com.example.aitesting

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.gestures.snapping.rememberSnapFlingBehavior
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.platform.LocalHapticFeedback
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.kyant.backdrop.Backdrop
import com.kyant.backdrop.backdrops.layerBackdrop
import com.kyant.backdrop.backdrops.rememberCombinedBackdrop
import com.kyant.backdrop.backdrops.rememberLayerBackdrop
import com.kyant.backdrop.drawBackdrop
import com.kyant.backdrop.effects.blur
import com.kyant.backdrop.effects.lens
import com.kyant.capsule.ContinuousRoundedRectangle
import kotlinx.coroutines.flow.distinctUntilChanged
import java.util.Locale
import kotlin.math.abs

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ScrollWheel(
    items: List<Int>,
    initialValue: Int,
    onValueChange: (Int) -> Unit,
    label: String,
    backdrop: Backdrop,
    modifier: Modifier = Modifier,
    visibleItems: Int = 5,
    itemHeight: Dp = 50.dp
) {
    val initialIndex = remember(items, initialValue) {
        items.indexOf(initialValue).coerceAtLeast(0)
    }

    val listState = rememberLazyListState(initialFirstVisibleItemIndex = initialIndex)
    val flingBehavior = rememberSnapFlingBehavior(lazyListState = listState)
    val haptic = LocalHapticFeedback.current

    LaunchedEffect(listState) {
        snapshotFlow { listState.firstVisibleItemIndex + (visibleItems / 2) }
            .distinctUntilChanged()
            .collect { centerIndex ->
                val actualIndex = centerIndex.coerceIn(0, items.lastIndex)
                onValueChange(items[actualIndex])
                haptic.performHapticFeedback(HapticFeedbackType.TextHandleMove)
            }
    }

    val textBackdrop = rememberLayerBackdrop()

    // Combine the main background (gradient) with the text layer
    // This ensures the glass refracts EVERYTHING behind it
    val combinedBackdrop = rememberCombinedBackdrop(backdrop, textBackdrop)

    // CHANGED: Row -> Column to stack label on top
    Column(
        modifier = modifier,
        horizontalAlignment = Alignment.CenterHorizontally // Center label and wheel
    ) {
        // Label on top
        Text(
            text = label,
            color = Color.White.copy(alpha = 0.5f),
            fontSize = 14.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.padding(bottom = 8.dp) // Space between label and wheel
        )

        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier.height(itemHeight * visibleItems)
        ) {
            LazyColumn(
                state = listState,
                flingBehavior = flingBehavior,
                contentPadding = PaddingValues(vertical = itemHeight * (visibleItems / 2)),
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier
                    .height(itemHeight * visibleItems)
                    .width(60.dp)
                    .layerBackdrop(textBackdrop)
            ) {
                items(items.size) { index ->
                    val item = items[index]

                    val isSelected by remember {
                        derivedStateOf {
                            val centerIndex = listState.firstVisibleItemIndex + (visibleItems / 6)
                            index == centerIndex
                        }
                    }

                    // --- Updated Scaling Logic ---
                    // Selected (Center): Scale = 1f (Biggest)
                    // Others: Scale = 0.5f
                    val scale = if (isSelected) 1f else 0.5f
                    val alpha = if (isSelected) 1f else 0.3f

                    Box(
                        contentAlignment = Alignment.TopStart,
                        modifier = Modifier
                            .height(itemHeight)
                            .scale(scale)
                            .alpha(alpha)
                    ) {
                        Text(
                            text = String.format(Locale.ROOT, "%02d", item),
                            color = Color.White,
                            fontSize = 32.sp,
                            fontWeight = FontWeight.Bold
                        )
                    }
                }
            }

            Box(
                modifier = Modifier
                    .width(80.dp)
                    .height(itemHeight + 10.dp)
                    .drawBackdrop(
                        backdrop = combinedBackdrop, // Use the combined backdrop here!
                        shape = { ContinuousRoundedRectangle(16.dp) },
                        effects = {
                            blur(4.dp.toPx())
                            lens(
                                refractionHeight = 12.dp.toPx(),
                                refractionAmount = 16.dp.toPx(),
                                chromaticAberration = true
                            )
                        },
                        onDrawSurface = {
                            drawRect(Color.White.copy(alpha = 0.15f))
                            drawRect(Color.White.copy(alpha = 0.05f))
                        }
                    )
            )
        }
    }
}