Chartsanimated

Contribution heat

A GitHub-style contribution heatmap whose cells fade in column by column.

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

@Composable
fun ContributionHeat(
    weeks: Int = 12,
    levels: List<List<Int>> = remember { sampleContribLevels(weeks) },
    modifier: Modifier = Modifier,
) {
    val palette = listOf(
        MaterialTheme.colorScheme.surfaceVariant,
        Color(0xFF9BE9A8), Color(0xFF40C463),
        Color(0xFF30A14E), Color(0xFF216E39),
    )
    val reveal by animateFloatAsState(1f, tween(900), label = "reveal")
    Canvas(modifier.fillMaxWidth().height(98.dp)) {
        val gap = 3.dp.toPx()
        val cell = (size.height - gap * 6) / 7f
        levels.forEachIndexed { w, col ->
            col.forEachIndexed { d, lvl ->
                val a = ((reveal * weeks) - w).coerceIn(0f, 1f)
                drawRoundRect(
                    color = palette[lvl].copy(alpha = a),
                    topLeft = Offset(w * (cell + gap), d * (cell + gap)),
                    size = Size(cell, cell),
                    cornerRadius = CornerRadius(2.dp.toPx()),
                )
            }
        }
    }
}