Dither Canvas
betaThe engine behind the dither charts: a DPR-capped, self-pausing canvas loop, token colours, a deterministic cell hash, springs, geometry and a keyboard scrubber.
- Data
- 4 files
- No extra npm packages
- Accessibility notes
- Draws on a canvas
pnpm dlx @dowel-ui/cli add dither-canvasNo npm packages are needed beyond what Dowel already requires.
import { DitherCanvas } from "@/components/ui/dither-canvas";Default
Gallery
Accessible Chart Pattern
Static
<DitherCanvas>
| Prop | Type | Default |
|---|---|---|
draw (required) | DitherDraw | — |
animateRun the shimmer clock. Reduced motion stops it regardless. Default true. | boolean | — |
cellCell pitch in CSS pixels passed to the draw function. Default 4.6. | number | — |
Plus every attribute of <canvas> except children.
<DitherTable>
| Prop | Type | Default |
|---|---|---|
caption (required) | string | — |
columns (required)Column headers; the first names the row header column. | readonly string[] | — |
rows (required)One row per datum; the first cell becomes the row header. | readonly (readonly string[])[] | — |
visibleShow the table. Hidden tables are still read by assistive technology. | boolean | false |
Plus every attribute of <table>.
The canvas is aria-hidden by default: a chart built on it names itself with role="img" and an aria-label summary, and renders its values in DitherTable, which stays in the accessibility tree when visually hidden. useDitherScrubber gives a chart cursor APG slider semantics (arrows, Page keys, Home/End). The loop pauses off-screen and in hidden tabs, and under reduced motion (or --motion-scale near zero) draws a single static frame with springs settled.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes