'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
EffectsAlea Pro
Backgrounds
Aurora color fields, dot and line patterns, grain for gradients, and a progressive blur at scroll edges.
import { Aurora, Pattern, Grain, BlurEdge } from '@alea/pro';
Examples
Backgrounds
Aurora, a dot or line pattern and grain. Decorative and hidden from screen readers; loops stop with reduced motion.
Blur edge
Wrap a scroll area: content under its edges blurs and fades instead of being cut. Each edge shows only when there is more to scroll.
Release note 1: tokens, motion and docs updates.
Release note 2: tokens, motion and docs updates.
Release note 3: tokens, motion and docs updates.
Release note 4: tokens, motion and docs updates.
Release note 5: tokens, motion and docs updates.
Release note 6: tokens, motion and docs updates.
Release note 7: tokens, motion and docs updates.
Release note 8: tokens, motion and docs updates.
Release note 9: tokens, motion and docs updates.
Release note 10: tokens, motion and docs updates.
Release note 11: tokens, motion and docs updates.
Release note 12: tokens, motion and docs updates.
Release note 13: tokens, motion and docs updates.
Release note 14: tokens, motion and docs updates.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-accent…--alea-accent-second…--alea-accent-third…
Motion
--alea-motion-ease-in-out…
Component
--alea-aurora-1…--alea-aurora-2…--alea-aurora-3…
Props
Aurora props
Slow, soft color fields behind a hero or a section. Decorative; stops with reduced motion.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | |
colors | [string, string, string] | - | |
style | CSSProperties | - |
Pattern props
A quiet dot or line grid behind content, fading at the edges.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | |
fade | boolean | true | |
size | number | 24 | |
variant | "grid" | "dots" | 'dots' |
Grain props
Fine noise over a gradient so it doesn't band. Put it last inside a positioned parent.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | |
opacity | number | 0.12 |
BlurEdge props
Wraps a scroll area: content passing under its edges blurs and fades progressively instead of being cut.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | The scroll area (its first element is the one that scrolls). |
className | string | - | |
edges | "bottom" | "both" | "top" | 'bottom' | Which edges blur: bottom (default), top or both. Each shows only when there is more content past it. |
height | number | 64 | Height of the blur in px. Default 64. |
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.
Aurora
- 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-aurora
Pattern
- Variants
variantgriddots- 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-pattern- Data attributes
data-variant=dotsdata-variant=griddata-fade
Grain
- 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-grain
BlurEdge
- Variants
edgesbottombothtop- 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-blur-edge.alea-blur-edge-wrap- Data attributes
data-hiddendata-position=bottomdata-position=top
Accessibility
- All are decoration, hidden from screen readers, and the aurora stops with reduced motion.
- Keep text contrast on top of them; the pattern fades at the edges by default.
Do and don't
Do
- Use one background per section.
- Put the background first inside a positioned parent and the content above it.
Don't
- Don't put the aurora behind long text.