Extras

Gradients and orbs

The Alea touches: gradient text, the gradient dot and the drifting orb background.

import { GradientText, GradientDot, OrbBackground } from '@alea/ui';

Examples

The accent gradient on words and as the Fun Lab dot.

Live in the Figma Community

The drifting glow behind Alea pages, here inside a card.

Tools, games and plugins for designers.

Text filled with the purple to yellow accent gradient.

Prop	Type	Default	Description
`aria-label`	`string`	-	Defines a string value that labels the current element. @see aria-labelledby. (React Aria)
`autoFocus`	`boolean`	-	(React Aria)
`className`	`string`	-	(React Aria)
`defaultValue`	`string \| number \| readonly string[]`	-	(React Aria)
`id`	`string`	-	(React Aria)
`inputMode`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-	Hints at the type of data that might be entered by the user while editing the element or its contents @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} (React Aria)
`onChange`	`ChangeEventHandler<HTMLElement, Element>`	-	(React Aria)
`onSubmit`	`SubmitEventHandler<HTMLElement>`	-	(React Aria)
`role`	`AriaRole`	-	(React Aria)
`style`	`CSSProperties`	-	(React Aria)

Show 10 React Aria props

The Alea dot: a small circle in the accent gradient. Decorative.

Prop	Type	Default	Description
`pulse`	`boolean`	-	Pulses softly, for "live" or "new".
`size`	`number`	`14`	Diameter in px. Default 14.

Show 10 React Aria props

The drifting purple, violet and yellow glow behind Alea pages. Decorative and pointer-transparent.

Prop	Type	Default	Description
`grid`	`boolean`	`true`	Adds the faint dot grid on top.
`position`	`"fixed" \| "absolute"`	`'absolute'`	fixed covers the viewport behind the page; absolute fills the nearest positioned parent.

All three are decorative; the orbs slow down and stop moving with reduced motion.

Don't