# Updated: Dot Field

By Steven Van · 2026-10-12

The React Bits background now has swirl and pinch lenses, new dot layouts and a focus-pull intro, installable through the shadcn CLI.

Dot Field, the gradient dot background in [React Bits](<https://creatorstoolbox.com/resources/react-bits>), has been [rebuilt](<https://reactbits.dev/backgrounds/dot-field>) around a magnifying lens that stays under the cursor.

## Lens behaviour

The lens follows the cursor smoothly and zooms closer while you hold. Besides magnifying, the lens can now pinch or swirl the dots.

## Layouts and intro

The update adds new dot layouts. The component also has an intro that pulls the field into focus.

## Installation

The component installs through the shadcn CLI, with JavaScript or TypeScript and plain CSS or Tailwind variants. For the TypeScript and Tailwind version, the command is npx shadcn@latest add @react-bits/DotField-TS-TW.

![React Bits](<https://reactbits.dev/favicon.ico>)

React Bits

An open-source collection of 200+ animated, interactive React components and micro-interactions.

[View React Bits →](<https://creatorstoolbox.com/resources/react-bits>)

Sources

[Original source](<https://reactbits.dev/backgrounds/dot-field>)

[Read Updated: Dot Field on Creators Toolbox](<https://creatorstoolbox.com/blog/react-bits-updated-dot-field>)

---
Canonical source: https://creatorstoolbox.com/blog/react-bits-updated-dot-field