Components / Brand
Dither canvas
The engine under the brand pieces: any brightness field, dithered onto a colour ramp.
@fabrials/ui
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { DitherCanvas } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
field | (theme, size, progress) => (u, v) => 0…1 | Brightness at each point; built again on resize and theme change. |
ramp | string[] | { light, dark } | Colours. "background" as the first stop is the surface behind the canvas. |
order | brightness | ramp | ramp keeps the order: 0 is the first colour, 1 the last. |
reveal / stars / paintKey | number / DitherStars / key | One-time reveal, crisp stars in dark mode, repaint on new data. |
Behavior
A backdrop: it fills its positioned parent and sits behind the content, so the parent needs position: relative and isolation: isolate (Tailwind relative isolate). Pure helpers live in @fabrials/ui/dither (paintRampField, STORM_RAMP, gemRamp, stormField, gemField). Products may add their own fields on the same engine.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.