#AnimatedBackground

The decorative backdrop behind the surfaces that have no chrome of their own — sign-in, the splash screen, the assistant. pixel, the default, sweeps a canvas dot grid; blur drifts a mesh gradient. Children sit centred above it. It is aria-hidden and lets the pointer through, with one exception: the pixel variant’s game, which takes pointer events for as long as it is running.

Source · Storybook

#Usage

import { AnimatedBackground } from '@wallarm-org/design-system/AnimatedBackground';

#Examples

#Pixel with card

A card above the grid, with excludeCardSize keeping the dots clear behind it. This story also switches on game — the easter egg, and the one case where the backdrop accepts clicks.

#Blur

variant='blur': colour blobs drifting behind a frosted layer, which is the assistant’s backdrop rather than the console’s.

#Blur with card

The same gradient with content over it. There is no exclusion to set here, since the blur has no grid for a card to interrupt.

#Props

#BlurBackground

#PixelBackground