victorbrndls

Marquee {
    Row {
        Text(text = "This is my 1st text")
        Icon(Icons.Default.KeyboardArrowRight, contentDescription = "")
        Text(text = "This is my 2nd text")
        Box(modifier = Modifier.size(16.dp).background(Color.Black))
        Text(text = "This is my 3rd text")
    }
}

victorbrndls

@Composable
fun Marquee(
    modifier: Modifier = Modifier,
    gradientEdgeColor: Color = Color.White,
    content: @Composable (Modifier) -> Unit
)

victorbrndls

layout(
      width = constraints.maxWidth,
      height = mainText.height
  ) {
      mainText.place(offset, 0)
      secondPlaceableWithOffset?.let {
          it.first.place(it.second, 0)
      }
      gradient?.place(0, 0)
  }

victorbrndls

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
    )

victorbrndls

if (mainText.width <= constraints.maxWidth) {
    mainText = subcompose(MarqueeLayers.SecondaryText) {
        createText(Modifier.fillMaxWidth())
    }.first().measure(constraints)
    textLayoutInfoState.value = null
}

victorbrndls

var gradient: Placeable? = null
var secondPlaceableWithOffset: Pair<Placeable, Int>? = null

victorbrndls

val infiniteWidthConstraints = constraints.copy(maxWidth = Int.MAX_VALUE)
var mainText =  subcompose(MarqueeLayers.MainText) {
    createText(Modifier)
}.first().measure(infiniteWidthConstraints)

victorbrndls

LaunchedEffect(textLayoutInfoState.value) {
    // textLayoutInfoState is only calculated if the text overflows
    // its parent, if it doesn't, there's no need for the animation
    val textLayoutInfo = textLayoutInfoState.value ?: return@LaunchedEffect
    if (textLayoutInfo.textWidth <= textLayoutInfo.containerWidth) return@LaunchedEffect

    // 7500 * 200 / 100 = 15s -- 2x container width
    // 7500 * 500 / 250 = 15s -- 2x container width
    // 7500 * 300 / 100 = 22.5s -- 3x container width
    // 7500 * 110 / 100 = 8.25s -- 1.1x container width

victorbrndls

var offset by remember { mutableStateOf(0) }
val textLayoutInfoState = remember { mutableStateOf<TextLayoutInfo?>(null) }

victorbrndls

val createText = @Composable { localModifier: Modifier ->
    Text(
        text = text,
        textAlign = textAlign,
        modifier = localModifier,
        color = color,
        fontSize = fontSize,
        fontStyle = fontStyle,
        fontWeight = fontWeight,
        fontFamily = fontFamily,