DotField
dot-fieldPushes and illuminates a canvas dot field around pointer movement.
Usage
Basic usage
Dot matrix background, move the mouse to push the lattice and glow below; the default color is chart / primary token.
<div className="relative h-56 overflow-hidden rounded-xl bg-neutral-950">
<DotField />
</div>Sparse lattice + strong bulging
Increase dotSpacing to make the dot matrix sparser, and increase bulgeStrength / cursorRadius to get a more exaggerated bulge.
<DotField dotSpacing={22} dotRadius={2} bulgeStrength={80} cursorRadius={260} />Waves + Stars twinkling
waveAmplitude allows the entire dot matrix to breathe sinusoidally, and sparkle allows a small number of points to occasionally enlarge into star points.
<DotField waveAmplitude={5} sparkle dotSpacing={16} />Custom color
color controls point color, glowColor controls glow color; any CSS color string can be used.
<DotField color="oklch(0.75 0.2 50)" glowColor="oklch(0.7 0.18 200)" />When to Use
Use it for an interactive dot-matrix backdrop that displaces and glows around the pointer, such as a technology hero, console surface, or empty state. Use DotPattern for a lighter static CSS pattern, Beams for a light curtain, or Balatro for a vortex. DotField trades some rendering cost for realtime pointer response.
Import
import { DotField } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| dotRadius | number | 1.5 | Drawing radius of a single point (px), recommended 1–3 |
| dotSpacing | number | 14 | Distance between adjacent dots in pixels; higher values create a sparser field, with 8–24 recommended |
| cursorRadius | number | 220 | Cursor influence radius (px), how many points around the pointer are pushed |
| bulgeStrength | number | 56 | Maximum dot displacement in pixels; 0 keeps the glow but disables displacement |
| color | string | --color-chart-1 | Dot matrix base color, CSS color string; token must be prefixed with --color- |
| glowColor | string | --color-primary | Radial glow color at cursor |
| glowRadius | number | 160 | Glow radius in pixels; 0 disables the glow |
| waveAmplitude | number | 0 | Global sinusoidal-wave amplitude in pixels; 0 disables the wave |
| sparkle | boolean | false | Occasionally enlarge a small number of dots to create a twinkling effect |
| className | string | — | Additional className passed through to the root container |
| style | CSSProperties | — | Inline styles passed through to the root container |
Usage Guidelines
- Token colors require the `--color-` prefix: pass values such as
var(--color-chart-1). Canvas cannot resolve bare names such asvar(--chart-1), which can make dots black or remove the glow. See [[hulian-token-color-var-needs-color-prefix]]. - Client rendering: the live effect uses Canvas 2D and
requestAnimationFrame. SSR and reduced-motion environments render the static lattice fallback. - Give the parent
position: relative,overflow: hidden, and an explicit height so the absolutely positioned canvas has stable bounds.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 280)" }}>
<DotField
dotSpacing={14}
dotRadius={1.5}
bulgeStrength={56}
cursorRadius={220}
waveAmplitude={0}
sparkle={false}
/>
</div>