Fabrials UI

Loading state

Tools for people who work beside AI agents.

Text stays on the calm side of the storm.

Installation

Import the control from @fabrials/ui, after setting the app up.
TypeScript
```
import { DitherScene } from "@fabrials/ui";
```

API reference

Prop / export	Type	Description
`variant`	`hero \| full`	hero enters from the right of the box; full covers it, for sign-in.
`reveal`	`number`	Milliseconds for the one-time roll-in on first paint; 0 turns it off. Skipped under reduced motion.
`seed`	`number`	Another storm with the same look.
`cell`	`number`	CSS pixels per dither dot (2 to 4).

Behavior

Absolute: give the parent position: relative and keep text on the calm side or on a solid surface. The ramp fades into --fui-dither-bg, else --background. Painted once; no loop.

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.