# Dot Grid

> A field of dots behind your content that lights up and moves aside near the pointer.

Source: https://ngwr.dev/bits/dot-grid  
Added in v15.1

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrDotGrid } from 'ngwr/bits/dot-grid';

@Component({ imports: [WrDotGrid] })
export class MyComponent {}
```

```scss
@use 'ngwr/bits/dot-grid';
```

## Playground

Put it in a positioned box; it fills that box and follows the pointer over the content in front of it.

```angular-html
<section style="position: relative; min-height: 18rem; overflow: hidden">
  <wr-dot-grid
    [dotSize]="3"
    [gap]="24"
    [radius]="120"
    [strength]="12"
  />
  <h1 style="position: relative">Content above the dots</h1>
</section>
```

```angular-ts
import { Component } from '@angular/core';

import { WrDotGrid } from 'ngwr/bits/dot-grid';

/**
 * Playground
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-playground-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-playground-example.html',
  imports: [WrDotGrid],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## Light only

A strength of 0 keeps every dot in place. Colours take any CSS colour, a theme token included, and follow the colour scheme.

```angular-html
<section style="position: relative; min-height: 12rem; overflow: hidden">
  <wr-dot-grid activeColor="var(--wr-color-success)" [strength]="0" [gap]="18" />
</section>
```

```angular-ts
import { Component } from '@angular/core';

import { WrDotGrid } from 'ngwr/bits/dot-grid';

/**
 * Light only
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-light-only-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-light-only-example.html',
  imports: [WrDotGrid],
})
export class NgwrTheAngularUiLibraryForSignalFormsLightOnlyExample {}
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `dotSize` | Dot diameter (px). | `number` | `3` |
| `gap` | Distance between dot centres (px), never under 4. | `number` | `24` |
| `dotColor` | Resting dot colour. Unset, it follows the theme. | `string \| null` | `null` |
| `activeColor` | Colour a dot takes near the pointer. Unset, it follows the theme. | `string \| null` | `null` |
| `radius` | How far from the pointer a dot still reacts (px). | `number` | `120` |
| `strength` | How far a dot by the pointer is pushed (px). 0 only lights it; negative pulls it in. | `number` | `12` |

## CSS variables

Set these on the component's selector or a wrapper, not on `:root`: the defaults are declared on `ngwr/bits/dot-grid`'s own element.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-dot-grid-active-color` | `var(--wr-color-primary)` | `.wr-dot-grid` |
| `--wr-dot-grid-dot-color` | `var(--wr-border-strong)` | `.wr-dot-grid` |
| `--wr-dot-grid-dot-size` | `3px` | `.wr-dot-grid` |
| `--wr-dot-grid-gap` | `24px` | `.wr-dot-grid` |

## See also

- [Ripple Grid](https://ngwr.dev/bits/ripple-grid) — Grid lines behind your content that the pointer sends ripples through.
- [Waves](https://ngwr.dev/bits/waves) — Drifting lines behind your content that bend around the pointer.
- [Threads](https://ngwr.dev/bits/threads) — Thin lines flowing behind your content like strands in a current.
- [Aurora](https://ngwr.dev/bits/aurora) — An animated aurora background for a hero or a section.
- [Spotlight Card](https://ngwr.dev/bits/spotlight-card) — A card with a soft highlight that follows the pointer.
- [resolveCssColor](https://ngwr.dev/reference/utils/resolve-css-color) — Resolves a CSS colour, such as a var() or light-dark(), to a value a canvas can paint with.