Bring a premium, high-tech aesthetic to your website with the Interactive Grid BG. This advanced WebGL component renders a crisp, moving grid directly on the GPU. It is highly interactive: as users move their mouse across the canvas, the grid lines illuminate with a beautiful, customizable neon glow.
When clicked, it triggers a satisfying, expanding "cross" wave effect that travels along the grid lines. It is the perfect atmospheric background for developer portfolios, SaaS landing pages, or Web3 dashboards. You have complete control over the grid size, movement direction, glow colors (solid or gradient), and the speed of the interactive waves. It even includes an "Auto Click" mode to keep the background lively without user input.
Functions (Key Features):
🖱️ Mouse Tracking Glow: The grid illuminates dynamically based on the user's cursor position.
💥 Click Wave Effects: Clicking triggers an expanding, animated cross pattern (choose between Full or Limited cross styles).
🤖 Auto-Click Mode: Automatically triggers the wave effects at random intervals to keep the background feeling alive.
🎨 Gradient Glow: Choose between a solid neon color or a smooth 2-color gradient for the interaction highlights.
⚡ WebGL Performance: Renders thousands of grid calculations flawlessly at 60fps on any device.
How to Use:
Copy & Paste: Copy the component from the Layers panel and paste it directly into your Framer project.
Sizing: Set the container's Width and Height to "Fill" (100%) to use it as a full-page background, and ensure it is placed behind your content.
Styling: Adjust the Background and Grid Line colors. Then, set your Glow Color(s) (e.g., Cyan and Magenta for a cyberpunk look).
Layout & Motion: Tweak the Grid Size and Line Width. Change the Direction and Move Speed of the endless grid animation.
Interactions: Choose the Click Effect style and adjust its speed. Enable Auto Click if you want the grid to animate itself automatically.
Alpheratz
