Thought Bubble in Jetpack Compose

ThoughtBubbleOverlay.kt

@Composable
fun MainScreen() {
    var thoughtText by remember { mutableStateOf("Funny holiday movie for the family? 🍕❤️") }
    var yOffset by remember { mutableFloatStateOf(0f) }

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
    ) {
        ThoughtBubbleOverlay(
            photoResId = R.drawable.photo,
            thoughtText = thoughtText,
            yOffset = yOffset
        )

        Spacer(modifier = Modifier.height(16.dp))

        Slider(
            value = yOffset,
            onValueChange = { yOffset = it },
            valueRange = -150f..150f,
            modifier = Modifier.padding(horizontal = 16.dp)
        )

        Spacer(modifier = Modifier.height(16.dp))

        TextField(
            value = thoughtText,
            onValueChange = { thoughtText = it },
            label = { Text("Enter your thought") },
            modifier = Modifier.padding(horizontal = 16.dp)
        )
    }
}

@Composable
fun ThoughtBubbleOverlay(photoResId: Int, thoughtText: String, yOffset: Float) {
    var isClicked by remember { mutableStateOf(false) }
    val scale by animateFloatAsState(
        targetValue = if (isClicked) 1.1f else 1f,
        animationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy, stiffness = Spring.StiffnessLow)
    )

    Box(modifier = Modifier, contentAlignment = Alignment.Center) {
        Image(
            painter = painterResource(id = photoResId),
            contentDescription = null,
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .size(150.dp)
                .clip(CircleShape)
        )

        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .offset(y = (-100).dp + yOffset.dp)
                .animateContentSize(animationSpec = spring())
                .scale(scale)
                .clickable {
                    isClicked = !isClicked
                }
        ) {
            Box(
                modifier = Modifier
                    .width(200.dp + scale.dp)
                    .clip(RoundedCornerShape(16.dp))
                    .shadow(2.dp, RoundedCornerShape(16.dp))
                    .background(Color.White)
                    .padding(16.dp)
            ) {
                Text(
                    text = thoughtText,
                    fontSize = 18.sp,
                    color = Color.Black,
                    style = TextStyle(fontSize = 18.sp)
                )
            }

            Spacer(modifier = Modifier.height(4.dp))
            Box(
                modifier = Modifier
                    .size(16.dp)
                    .offset(x = (60).dp, y = (-15).dp)
                    .clip(CircleShape)
                    .shadow(2.dp, CircleShape)
                    .background(Color.White)
            )

            Spacer(modifier = Modifier.height(4.dp))
            Box(
                modifier = Modifier
                    .size(8.dp)
                    .offset(x = (40).dp, y = -15.dp)
                    .clip(CircleShape)
                    .shadow(2.dp, CircleShape)
                    .background(Color.White)
            )
        }
    }
}