import { Component } from '@angular/core';
import { WrDotGrid } from 'ngwr/bits/dot-grid';
@Component({ imports: [WrDotGrid] })
export class MyComponent {}Dot Grid
A field of dots behind your content that lights up and moves aside near the pointer.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Angular adaptation of an effect by David Haz / reactbits.dev.
Playground
Put it in a positioned box; it fills that box and follows the pointer over the content in front of it.
<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>Customize
Dot size
Gap
Radius
Strength
Dot colour
Active colour
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.
<section style="position: relative; min-height: 12rem; overflow: hidden">
<wr-dot-grid activeColor="var(--wr-color-success)" [strength]="0" [gap]="18" />
</section>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
Animation Ripple GridGrid lines behind your content that the pointer sends ripples through.Animation WavesDrifting lines behind your content that bend around the pointer.Animation ThreadsThin lines flowing behind your content like strands in a current.Animation AuroraAn animated aurora background for a hero or a section.Animation Spotlight CardA card with a soft highlight that follows the pointer.Util resolveCssColorResolves a CSS colour, such as a var() or light-dark(), to a value a canvas can paint with.