EffectsAlea Pro

Meteors, ripple, blob and sparkles

Quiet movement for heroes and empty states: meteors, ripple rings, a morphing blob, sparkles around a word, and a grid that lights under the pointer.

import { Meteors, Ripple, Blob, Sparkles, InteractiveGrid } from '@alea/pro';

Examples

Ambient backgrounds

Meteors, ripple rings, a morphing blob and sparkles. All decorative; all stop with reduced motion.

Meteors

Ripple

Blob

New in Pro

Interactive grid

Cells light up under the pointer and fade after it: a quiet, playful hero background.

Move over the grid

Tokens

The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.

Color

--alea-text…

Props

`Meteors` props

Streaks falling diagonally across a dark section, like meteors. Decorative; stops with reduced motion.

Prop	Type	Default	Description
`className`	`string`	-
`count`	`number`	`14`

`Ripple` props

Rings that ripple out from the center behind content: "this is live" or "look here" for one call to action. Decorative.

Prop	Type	Default	Description
`className`	`string`	-
`rings`	`number`	`5`

`Blob` props

An organic shape that slowly morphs: a soft accent behind a hero, an avatar or an empty state. Decorative.

Prop	Type	Default
`className`	`string`	-
`color`	`string`	-
`size`	`number`	`320`
`style`	`CSSProperties`	-

`Sparkles` props

Small stars that twinkle around content: for "new" or "magic" (an AI feature, a launch). Decorative.

Prop	Type	Default
`as`	`ElementType`	`'span'`
`className`	`string`	-
`count`	`number`	`8`
`style`	`CSSProperties`	-

`InteractiveGrid` props

A grid of cells that light up under the pointer and fade after it: a playful, quiet background for a hero. Decorative.

Prop	Type	Default	Description
`cell`	`number`	`40`
`className`	`string`	-

Specs

Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.

`Meteors`

Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-meteors

`Ripple`

Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-ripple-rings

`Blob`

Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-blob

`Sparkles`

Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-sparkles.alea-sparkles-layer.alea-sparkles-content

`InteractiveGrid`

States: Hover (CSS)
Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-igrid

All are decoration, hidden from screen readers.
Every loop stops with reduced motion; meteors disappear.

Do and don't

One ambient effect per section, behind content that doesn't need it to be understood.

Don't

Don't put moving backgrounds behind text people read for long.