Skip to content
Kapow
Esc
↑↓navigate↵open⌘Jpreview
On this page

Progress: shine

A band of light whose position follows a progress value.

Progress shine puts the band at a place you choose instead of sweeping it on a timer. Use it to tie the light to a scroll position, a slider or the hinge angle of a foldable.

Usage

The sample moves the band across a card as progress goes from 0 to 1. Pass a function that reads state, such as a scroll offset, so the card does not recompose.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.jantursky.kapow.ProgressEffect
import com.jantursky.kapow.progressEffect

@Composable
fun ShineCard(progress: () -> Float) {
    Box(
        Modifier
            .size(240.dp, 120.dp)
            .background(Color.DarkGray)
            .progressEffect(ProgressEffect.shine(angle = 30f), progress),
    )
}

Parameters

Parameter Default Description
angle 45f Direction the band travels, in degrees clockwise from pointing right.
color Color.White Color of the band.
bandWidth 0.6f How wide a band is, as a share of the element’s length along the sweep. Above 0, at most 1.5.
softness 1f How soft the band’s edges are. 1 is the usual falloff; more spreads the glow wider, less pulls it into a tighter core. Must be positive.
bands 1 How many bands cross together. Must be positive.
bandSpacing 0.3f How far apart the bands are, as a share of the element’s length along the sweep. Must not be negative.
blendMode BlendMode.SrcAtop How the bands blend with the element. The default keeps them on its own pixels.

Reduced motion

Progress effects do not animate on their own. The band is drawn wherever the progress puts it. Slow or limit the progress yourself if it moves a lot.

Notes

  • At progress 0 and at progress 1 the band is not drawn, so the element is unchanged at both ends.
  • The band looks like the change shine band: only over the element’s own pixels, 60 % of its length along the direction.
  • The progress lambda is read while drawing. Read Compose state in it and nothing recomposes.
  • The element is drawn into an offscreen layer all the time, because the band needs the element’s pixels in a buffer.

Live example

Was this page helpful?