---
title: Components
description: The eleven components in stipple-components.
---

All components live in `com.jantursky.stipple.components`. Each takes `theme`, `pattern` and `animated`, with the defaults `null` (the provided theme), `DitherPatterns.Bayer4` and `false`.

| Component | What it is | Main parameters |
| --- | --- | --- |
| `DitherButton` | A paper face with a dithered shadow that thickens on hover and focus and sinks on press. | `onClick`, `enabled`, `depth`, `content` (or a `text` overload) |
| `DitherBarChart` | Columns filled with a dither that is dense at the foot and lighter towards the top. | `entries: List<BarEntry>`, `maxValue`, `barGap`, `showLabels` |
| `DitherGrid` | A square grid of dithered cells, one value each. | `values`, `columns`, `gap`, `cell` |
| `DitherGauge` | A ring of dithered blocks showing one reading, with a content slot in the middle. | `value`, `range`, `startAngle`, `sweepAngle`, `thickness`, `content` |
| `DitherStatCard` | A KPI card with a headline number, a delta and a dithered trend. | `label`, `value`, `delta`, `trend`, `trendHeight` |
| `DitherProgressBar` | A progress bar with a dithered leading edge. | `progress` (null for indeterminate), `height`, `track` |
| `DitherText` | Text filled with a dither, with a minimum contrast. | `text`, `style`, `cell`, `fadeTo`, `field`, `minContrast` |
| `DitherEffectText` | `DitherText` that plays a scramble or a dissolve as it appears. | `text`, `effect`, `progress`, `trigger`, `durationMillis`, `loop`, `charset` |
| `DitherAvatar` | A mirrored dither face made from a name, or a dithered photo. | `name`, `size`, `painter`, `shape`, `algorithm` |
| `DitherImage` | A dithered image that can be revealed coarse to fine. | `painter`, `contentDescription`, `contentScale`, `algorithm`, `reveal` |
| `DitherBackground` | A dithered field behind your content. | `field`, `content` |

Every component is static unless `animated = true`, and respects reduced motion. Components that show a value (`DitherProgressBar`, `DitherGauge`, `DitherBarChart`, `DitherGrid`) take a `contentDescription`.

```kotlin
DitherBarChart(
    entries = listOf(BarEntry("Mon", 4f), BarEntry("Tue", 7f), BarEntry("Wed", 5f)),
    contentDescription = "Sign-ups this week",
)
```

## Text effects

`DitherEffectText` brings text in with an `effect`: `Scramble` flickers random characters and settles them, first letter to last, into the text; `Dissolve` reveals it grain by grain through the dither pattern, in an irregular order. At progress 1 the text is exactly the one you gave, filled like `DitherText`.

```kotlin
DitherEffectText("Dither everything", DitherTextEffect.Scramble)

// Follow a value you own, for example scroll or a transition. A dissolve reads it while drawing, so a change
// redraws the text without recomposing it.
val reveal = remember { Animatable(0f) }
DitherEffectText("Dither everything", DitherTextEffect.Dissolve, progress = { reveal.value })
```

Without `progress` the component plays 0 to 1 over `durationMillis` after `delayMillis`, plays again whenever `trigger` changes, and repeats with `loop = true`. The component always measures as the final text, so nothing around it moves, and a scramble keeps the line breaks of the final text. Spaces and line breaks are never scrambled, and `charset` sets the characters a scramble draws from (`DEFAULT_SCRAMBLE_CHARSET`: lower-case letters, digits and `#%&*`). Pass `charset = "01"` for a binary flicker. Like `DitherText` it is for headings and labels.

With reduced motion the finished text shows at once and `progress` is ignored. A screen reader reads the final text and never a scrambled frame.

<iframe class="live-example" src="https://stipple-demo.vercel.app/?embed=1&animated=1#text-effects" title="Live example: text-effects" loading="lazy" allow="autoplay"></iframe>