Updated: Dot Field
By Steven Van ·
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, has been rebuilt 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
An open-source collection of 200+ animated, interactive React components and micro-interactions.
View React Bits →