Shine Text Effect in Jetpack Compose

Shimmer effects are a great way to enhance the user experience by indicating loading states with a smooth animated placeholder.
I always use it in the call-to-action events, it gave a more premium effect.

In this post, we will implement a shining text based on the shimmering effect in Jetpack Compose using this example from this gist and extend it with a method to update the shimmer color dynamically.

What is a Shimmer Effect?

A shimmer effect is an animated gradient overlay that creates an illusion of content loading. It gives users a visual cue that data is being fetched or processed.

Implementing Shimmer in Jetpack Compose

We will create a shimmer effect using a custom ShaderBrush that animates across the text.

Step 1: Define the ShimmeringText Composable

@Composable
fun ShimmeringText(
    text: String,
    shimmerColor: Color,
    modifier: Modifier = Modifier,
    textStyle: TextStyle = LocalTextStyle.current,
    animationSpec: DurationBasedAnimationSpec<Float> = tween(1000, 500, LinearEasing)
) {
    val infiniteTransition = rememberInfiniteTransition(label = "ShimmeringTextTransition")

    val shimmerProgress by infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(animationSpec),
        label = "ShimmerProgress"
    )

    val brush = remember(shimmerProgress) {
        object : ShaderBrush() {
            override fun createShader(size: Size): Shader {
                val initialXOffset = -size.width
                val totalSweepDistance = size.width * 2
                val currentPosition = initialXOffset + totalSweepDistance * shimmerProgress

                return LinearGradientShader(
                    colors = listOf(Color.Transparent, shimmerColor, Color.Transparent),
                    from = Offset(currentPosition, 0f),
                    to = Offset(currentPosition + size.width, 0f)
                )
            }
        }
    }

    Text(
        text = text,
        modifier = modifier,
        style = textStyle.copy(brush = brush)
    )
}

Step 2: Updating Shimmer Color Dynamically

To enhance the shimmer effect, we will use a utility function to adjust the shimmer color dynamically. The brighter() function blends the color with white, creating a brighter effect:

fun Color.brighter(): Color {
    val blendRatio = 0.3f // Adjust to control brightness
    return Color(
        red = (this.red * (1 - blendRatio) + 1f * blendRatio).coerceIn(0f, 1f),
        green = (this.green * (1 - blendRatio) + 1f * blendRatio).coerceIn(0f, 1f),
        blue = (this.blue * (1 - blendRatio) + 1f * blendRatio).coerceIn(0f, 1f),
        alpha = this.alpha
    )
}

Now, we modify the ShimmeringText function to apply this color transformation:

@Composable
fun DynamicShimmeringText(
    text: String,
    baseColor: Color = Color.Gray,
    modifier: Modifier = Modifier,
    textStyle: TextStyle = LocalTextStyle.current
) {
    val shimmerColor = baseColor.brighter()
    ShimmeringText(
        text = text,
        shimmerColor = shimmerColor,
        modifier = modifier,
        textStyle = textStyle
    )
}

Step 3: Using the Shimmer Effect in a UI

@Composable
fun ShimmerScreen() {
    DynamicShimmeringText(text = "Book a Demo", baseColor = Color.Gray)
}

Final result ✨

this example is the adapted version of the tutorial