> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.
# 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](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/AnimatedBackground) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/layout-animatedbackground--overview)
```tsx
import { AnimatedBackground } from '@wallarm-org/design-system/AnimatedBackground';
export const Pixel = () => (
);
```
## Usage
```tsx
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.
```tsx
import { AnimatedBackground } from '@wallarm-org/design-system/AnimatedBackground';
import { Card, CardContent, CardHeader, CardTitle } from '@wallarm-org/design-system/Card';
export const PixelWithCard = () => (
Sign In
);
```
### Blur
`variant='blur'`: colour blobs drifting behind a frosted layer, which is the assistant’s backdrop rather than the console’s.
```tsx
import { AnimatedBackground } from '@wallarm-org/design-system/AnimatedBackground';
export const Blur = () => (
);
```
### 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.
```tsx
import { AnimatedBackground } from '@wallarm-org/design-system/AnimatedBackground';
import { Card, CardContent, CardHeader, CardTitle } from '@wallarm-org/design-system/Card';
export const BlurWithCard = () => (
Wally Chat