Interactive Neon Grid Trail

This Interactive Neon Grid Trail creates a sleek, cybernetic atmosphere ideal for tech portfolios or futuristic landing pages. It utilizes the HTML5 Canvas API to render a grid of invisible squares that light up in neon teal upon interaction. The effect features a “memory” mechanic where the illuminated cells hold their charge for a moment before gracefully fading back into the darkness, creating a satisfying trail behind the user’s cursor.

Core Technique

The effect is built on a virtual grid system mapped to the canvas dimensions.

1. Grid Initialization: The script calculates how many squares fit the screen based on squareSize and populates a grid array with objects containing coordinates (x, y), opacity (alpha), and timing data.
2. Interaction Logic: On mousemove, the script calculates exactly which cell the cursor is hovering over and resets its alpha to 1 and lastTouched timestamp to the current time.
3. Rendering Loop: The drawGrid function clears the canvas and iterates through the grid. If a cell has an alpha greater than 0, it is drawn. The stroke isn’t a solid line; it uses a createRadialGradient centered on the cell. This makes the borders glow brightly in the center and fade at the edges, giving the “neon light” appearance.
4. Decay System: The animation logic checks if 500ms have passed since the last interaction. If so, it gradually subtracts from the alpha value (cell.alpha -= 0.02) until the cell becomes invisible again.

Customization

You can tweak the visual style directly in the drawGrid function and the grid configuration variables.

/* Configuration Variables */
const squareSize = 80; // Size of each cell

// Inside drawGrid function:
if (cell.fading) {
  cell.alpha -= 0.02; // Fade speed (lower is slower)
}

// Changing the Neon Color
const gradient = ctx.createRadialGradient(...);
// Change color here (RGB format recommended for alpha)
gradient.addColorStop(0, `rgba(255, 0, 100, ${cell.alpha})`); // Pink core
gradient.addColorStop(1, `rgba(255, 0, 100, 0)`); // Fade out

Tips

1. Performance Optimization: Looping through every cell in the grid on every frame (even invisible ones) can be taxing on high-resolution screens where the array length grows significantly. For production, consider maintaining a separate list of “active” cells to render, rather than iterating the entire grid.

2. High DPI Screens: The current implementation sets canvas.width directly to window.innerWidth. On Retina/High-DPI displays, this will look blurry. You should scale the canvas resolution by window.devicePixelRatio and scale the context down to ensure crisp lines.

// High DPI Fix
const dpr = window.devicePixelRatio || 1;
canvas.width = window.innerWidth * dpr;
canvas.height = window.innerHeight * dpr;
ctx.scale(dpr, dpr);