design-infraReport a problem or share feedback← Catalog
Dot Field
freereact-bits/dot-field
Interactive dot grid with cursor bulge, glow, sparkle, and wave effects.
$
npx shadcn@latest add @react-bits/DotField-TS-TW- Source
- React Bits
- Kind
- effect
- Categories
- background, input
- Use as
- drop-in — replaces your component
- Applies to
- backgroundinput
- Motion
- on cursor, loop · expressive · canvas · high cost
- Tags
- backgrounds
- Licence
- MIT + Commons Clause: free to use in commercial apps/sites, but you may not sell or redistribute the components themselves (alone, bundled, or ported). React Bits Pro is a separate paid product.
- Live demo
- www.reactbits.dev
- Docs
- www.reactbits.dev
Similar
Compare all 4 →- Aurorareact-bits/auroraWebGL aurora backdrop (ogl, ~small). colorStops default to React Bits purple/green — pass your --primary hexes. Lazy-load; one per page.
- Shader Backgroundbeui/shader-backgroundCanvas shader backgrounds (mesh gradient, grain, warp, waves, voronoi, dot orbit and more) with a single typed variant prop. Reduced-motion freezes animated variants.
- Color pickermotion/color-pickerAn example of creating a circular color picker with dots that react to cursor movement with soft springs using Motion for React.