How do I install Background Grid with Dots and Animations?

Run npx shadcn@latest add @aceternity/background-grid-with-dots-and-animations in your terminal. Before installing, add the Aceternity Pro registry to your components.json and set your API token as the ACETERNITY_PRO_TOKEN environment variable. The CLI automatically installs all required dependencies including Tailwind CSS plugins and Framer Motion.

Is Background Grid with Dots and Animations responsive and accessible?

Yes. The component is fully responsive across mobile, tablet, and desktop breakpoints. It uses semantic HTML elements, proper heading hierarchy, and accessible color contrast ratios. Touch targets are appropriately sized for mobile interactions, and all interactive elements are keyboard-navigable.

Can I customize the colors, fonts, and layout?

Everything is built with Tailwind CSS utility classes and Framer Motion animations. You can change colors, spacing, typography, border radius, shadows, and animation timing directly in the JSX — no separate CSS files to manage. The component uses your project's Tailwind theme, so it automatically adapts to your design system.

What frameworks does this work with?

Background Grid with Dots and Animations is built for React and Next.js (App Router and Pages Router). It requires Tailwind CSS v4 and Framer Motion. It works with any React-based framework including Remix, Gatsby, and Vite — just ensure Tailwind CSS and Framer Motion are configured in your project.

Backgrounds

1 / 11

Background Grid with Dots and Animations

An interactive SVG grid background with line distortion and dot movement effects on mouse hover. Features performance-optimized animations using requestAnimationFrame, customizable highlight colors, and automatic dark mode support.

Interactive grid with motion effects

The grid pattern renders using individual SVG line and circle elements that respond to mouse proximity. Lines distort with a wave effect and change color based on distance from the cursor, while dots follow the movement of their intersecting lines.

The AnimatedGridWithDots component is performance-optimized using requestAnimationFrame with linear interpolation for smooth animations. It uses passive event listeners, MutationObserver for dark mode detection, and automatically stops the animation loop when the mouse leaves to minimize CPU usage.

Props include gridSize (default 80px), dotSize (default 2px), glowRadius (default 150px), and separate highlightColor / highlightColorDark for theming with Tailwind CSS color variables.

Ideal for hero sections, landing pages, and interactive showcases where you want an engaging grid texture that responds to user interaction.

More from Backgrounds

Included with All-Access

One payment unlocks the code for this block and every other block, template and page.

Get All-Access

Explore more

Background Grid with Dots Background Dots Background Lines Backgrounds Hero Sections

About this block

Props include gridSize (default 80px), dotSize (default 2px), glowRadius (default 150px), and separate highlightColor / highlightColorDark for theming with Tailwind CSS color variables.

Ideal for hero sections, landing pages, and interactive showcases where you want an engaging grid texture that responds to user interaction.