Bouncy Button

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.foundation.Image
import androidx.compose.foundation.LocalIndication
import androidx.compose.foundation.interaction.InteractionSource
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.animate
import androidx.compose.foundation.style.border
import androidx.compose.foundation.style.hovered
import androidx.compose.foundation.style.pressed
import androidx.compose.foundation.style.rememberUpdatedStyleState
import androidx.compose.foundation.style.styleable
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
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.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.PointMode
import androidx.compose.ui.graphics.Shadow
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.StrokeJoin
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.path
import androidx.compose.ui.text.TextStyle
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 com.composeunstyled.UnstyledButton
import kotlin.random.Random

private val PlayButtonStyle = Style {
    shape(RoundedCornerShape(12.dp))
    clip()
    border(
        width = 2.dp,
        brush = Brush.verticalGradient(
            colorStops = arrayOf(
                0f to Color(0xFF383838),
                0.66f to Color(0xFF242424),
                1f to Color(0xFF292929),
            ),
        ),
    )
    background(Color(0xFF1D1D1D))

    hovered {
        animate(tween(durationMillis = 300)) {
            background(Color(0xFF1A1919))
        }
    }
    pressed {
        animate(tween(durationMillis = 300)) {
            background(Color(0xFF1A1919))
        }
    }
}

@Composable
fun PlayButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    style: Style = Style,
) {
    val interactionSource = remember { MutableInteractionSource() }
    val styleState = rememberUpdatedStyleState(interactionSource)

    UnstyledButton(
        onClick = onClick,
        interactionSource = interactionSource,
        indication = LocalIndication.current,
        contentPadding = PaddingValues(
            start = 24.dp,
            top = 16.dp,
            end = 22.dp,
            bottom = 16.dp,
        ),
        modifier = modifier
            .bouncyPress(interactionSource)
            .styleable(styleState, PlayButtonStyle, style)
            .drawWithCache {
                val radius = size.maxDimension * 0.72f
                val lowerRight = Brush.radialGradient(
                    colors = listOf(Color(0xFF0F0F0F), Color.Transparent),
                    center = Offset(size.width * 0.95f, size.height * 0.89f),
                    radius = radius,
                )
                val lowerLeft = Brush.radialGradient(
                    colors = listOf(Color(0xFF111111), Color.Transparent),
                    center = Offset(0f, size.height),
                    radius = radius,
                )
                val upperLeft = Brush.radialGradient(
                    colors = listOf(Color(0xFF1D1D1D), Color.Transparent),
                    center = Offset.Zero,
                    radius = radius,
                )
                val random = Random(0)
                val points = List((size.width * size.height / 18f).toInt()) {
                    Offset(
                        x = random.nextFloat() * size.width,
                        y = random.nextFloat() * size.height,
                    )
                }
                onDrawWithContent {
                    drawRect(lowerRight)
                    drawRect(lowerLeft)
                    drawRect(upperLeft)
                    drawContent()
                    drawPoints(
                        points = points,
                        pointMode = PointMode.Points,
                        color = Color.White.copy(alpha = 0.025f),
                        strokeWidth = 1f,
                    )
                }
            },
    ) {
        Row(
            horizontalArrangement = Arrangement.spacedBy(12.dp),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            BasicText(
                text = "Button",
                style = TextStyle(
                    color = Color(0xFFDADADA),
                    fontSize = 17.sp,
                    fontWeight = FontWeight.Bold,
                    shadow = Shadow(
                        color = Color(0xFF4B4B4B),
                        offset = Offset.Zero,
                        blurRadius = 20f,
                    ),
                ),
            )
            Image(
                imageVector = PlayIcon,
                contentDescription = null,
                modifier = Modifier.size(15.dp),
                colorFilter = ColorFilter.tint(Color(0xFFDADADA)),
            )
        }
    }
}

@Composable
private fun Modifier.bouncyPress(interactionSource: InteractionSource): Modifier {
    val pressed by interactionSource.collectIsPressedAsState()
    val scale by animateFloatAsState(
        targetValue = if (pressed) 0.98f else 1f,
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessMediumLow,
        ),
        label = "BouncyPressScale",
    )

    return this then Modifier.graphicsLayer {
        scaleX = scale
        scaleY = scale
    }
}

/*
 * Icon from Lucide (lucide).
 * License: ISC
 * Copyright (c) 2026 Lucide Icons and Contributors
 *
 * Permission to use, copy, modify, and/or distribute this software for any
 * purpose with or without fee is hereby granted, provided that the above
 * copyright notice and this permission notice appear in all copies.
 *
 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
 * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
 * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
 * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
 * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 */
private val PlayIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "play",
        defaultWidth = 24.dp,
        defaultHeight = 24.dp,
        viewportWidth = 24f,
        viewportHeight = 24f,
    ).apply {
        path(
            fill = SolidColor(Color.Transparent),
            stroke = SolidColor(Color.Black),
            strokeLineWidth = 2f,
            strokeLineCap = StrokeCap.Round,
            strokeLineJoin = StrokeJoin.Round,
        ) {
            moveTo(5f, 5f)
            arcToRelative(2f, 2f, 0f, false, true, 3.008f, -1.728f)
            lineToRelative(11.997f, 6.998f)
            arcToRelative(2f, 2f, 0f, false, true, 0.003f, 3.458f)
            lineToRelative(-12f, 7f)
            arcTo(2f, 2f, 0f, false, true, 5f, 19f)
            close()
        }
    }.build()
}

@Preview
@Composable
fun BouncyButton() {
    PlayButton(onClick = {})
}