Background & Cursor

Import

To use the Background and Cursor components in your project, import them as follows:

Usage

These components combine to create an interactive background grid with a cursor effect that reacts to mouse movements. Here's an example of how to use them together:

Basic Usage

Key Features

• Dynamic Grid: Automatically adjusts the number of squares based on screen size, offering a responsive and adaptive background.

• Customizable Appearance: Easily change the color, stroke, gap, and scaling of the grid, or apply a mask to create an interactive effect.

• Interactive Cursor: The cursor dynamically moves and interacts with the background, enhancing the overall user experience.

• Accessibility Friendly: Supports visual adjustments and custom styling for better usability.

• Lightweight: Efficiently handles large grids with minimal performance impact, ensuring smooth interactions across devices.