Browse components
Dot Field
A perspective field of glowing dots rolling toward you in terrain-like waves; the camera leans with the cursor. WebGL.
Dot Field
Installation
npx shadcn@latest add @glint-ui/dot-fieldFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/dot-field.json
Usage
import { DotField } from "@/components/ui/dot-field";
<div className="relative h-96">
<DotField amplitude={1} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| lowColor | string | "#5b4bff" | Dot color in the valleys. |
| highColor | string | "#5eead4" | Dot color on the crests. |
| speed | number | 1 | Travel and wave speed multiplier. |
| amplitude | number | 1 | Wave height. |
| dotSize | number | 1 | Dot size multiplier. |
| density | number | 1 | Grid density multiplier. |
| className | string | — | Extra classes for the root element. |