Astra

Dot Field

A gradient dot field seen through a lens that follows the cursor, magnifying, pinching or swirling the dots.

Dot Field, a Astra component

Use Dot Field in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/DotField-TS-TW
How to install Astra components

Related components

  • Dot Grid

    A springy dot grid that the cursor flicks and drags through like jelly, with click shockwaves.

  • Gradient Blinds

    Satin gradient blinds lit by a spotlight that follows the cursor, swaying and turning toward the light.

  • Gradient Waves

    Lit satin waves rolling in from a hazy horizon, with a light that follows the cursor and swells on click.