Grid Background Animation

Overview

A minimal interactive hero section built with Next.js and React, featuring a visually engaging "spotlight" effect on a fullscreen grid background that follows the user's mouse cursor. Inspired by Eternal's hero section (which powers Blinkit and Zomato), the effect is achieved entirely with CSS and JavaScript—no external graphics or canvas required.

How It Works

• The grid is rendered as a CSS gradient background.
• A CSS radial-gradient mask creates a spotlight effect that follows the mouse.
• Framer Motion animates the spotlight with spring physics for a natural, elastic feel.
• Mouse position is tracked via a custom React hook.
• All styling is managed with SCSS modules for maintainability.

Key Components

• GridCursor Component: Handles the grid, spotlight mask, and animation logic.
• useMousePosition Hook: Tracks the mouse’s x/y coordinates and updates state.
• Styling: Uses SCSS modules for modular, maintainable CSS.

Features

• Fullscreen grid background rendered with CSS gradients
• Dynamic spotlight effect using a CSS radial-gradient mask
• Smooth, springy animation for the spotlight with Framer Motion
• Custom React hook for mouse tracking
• Modular, maintainable code and styling