Marquee8.kt

if (mainText.width <= constraints.maxWidth) {
    ..
} else {
    // horizontal spacing between the main and second text components
    val spacing = constraints.maxWidth * 2 / 3

    textLayoutInfoState.value = TextLayoutInfo(
        textWidth = mainText.width + spacing,
        containerWidth = constraints.maxWidth
    )

    // this `offset` variable is the same as the one used by the main component
    val secondTextOffset = mainText.width + offset + spacing
    val secondTextSpace = constraints.maxWidth - secondTextOffset

    // `secondTextSpace` is only positive if the second text component is
    // inside bounds
    // Notice this returns a Pair - Component to Offset
    if (secondTextSpace > 0) {
        secondPlaceableWithOffset = subcompose(MarqueeLayers.SecondaryText) {
            createText(Modifier)
        }.first().measure(infiniteWidthConstraints) to secondTextOffset
    }

    gradient = subcompose(MarqueeLayers.EdgesGradient) {
        Row {
	    // GradientEdge code can be found below
            GradientEdge(startColor = gradientEdgeColor, endColor = Color.Transparent)
            Spacer(modifier = Modifier.weight(1f)) // space gradients apart
            GradientEdge(startColor = Color.Transparent, endColor = gradientEdgeColor)
        }
    }.first()
	// make grandient height the same as the main text height
	.measure(constraints = constraints.copy(maxHeight = mainText.height))
}

@Composable
private fun GradientEdge(
    startColor: Color,
    endColor: Color
) {
    Box(
        modifier = Modifier
            .width(10.dp)
            .fillMaxHeight()
            .background(
                brush = Brush.horizontalGradient(
                    0f to startColor,
                    1f to endColor
                )
            )
    )
}