Skip to content

A responsive, high-performance grid background with smooth hover effects—implemented in WebGL (Three.js) on desktop and a simple Canvas fallback on mobile.

Notifications You must be signed in to change notification settings

SF-Duijkersloot/WebGL-cursor-grid-animation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Interactive grid background animation

A responsive, high-performance grid background with smooth hover effects—implemented in WebGL (Three.js) on desktop and a simple Canvas fallback on mobile.

image image

🔗 Live demo

Check out the live version on Vercel: 👉 https://webgl-cursor-grid-animation.vercel.app/#debug

Note: Appending #debug to the URL (e.g. https://webgl-cursor-grid-animation.vercel.app/#debug) enables the debug GUI panel, allowing you to tweak colors, decay times, shadow settings, and other variables in real time.


🧑‍💻 Running locally

To get the grid up and running on your machine:

  1. Clone the repo
git clone https://github.com/yourusername/webgl-cursor-grid-animation.git
cd webgl-cursor-grid-animation
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open your browser at the port shown in the console.

🚀 Overview

  • Desktop:

    • Uses Three.js with a single InstancedMesh (one plane geometry, one ShaderMaterial, ~400 instances)
    • Orthographic camera to treat the grid as a flat 2D plane
    • Per-instance hover state driven by custom GLSL shaders (border + inner-shadow)
    • Mouse‐move → cell index calculation → highlight center + random neighbours → decay over time
    • #debug mode toggles Stats.js (FPS) + Lil-GUI panel for live tweaking
  • Mobile:

    • Falls back to an HTML5 Canvas redraw of a static grid (no hover/interaction)
    • Lightweight, zero external deps, instant load

🏗️ Architecture

  • WebGLGrid (desktop)

    • setThreeContext(), setInstances(), buildGrid(), handleMouseMove(), animate()
    • GLSL shaders generate border & inner-shadow based on uniforms
  • CanvasGrid (mobile)

    • Scales canvas for DPR, draws static grid in drawGrid()
  • index.js

    import CanvasGrid from './mobile-grid.js';
    import WebGLGrid  from './webgl-grid.js';
    
    const canvas = document.querySelector('#grid');
    if (CanvasGrid.isMobile()) {
      new CanvasGrid(canvas);
    } else {
      new WebGLGrid(canvas);
    }

🐞 Debug mode

Add #debug to your URL to enable:

  • Lil-GUI controls for:
    • centerDecay, neighbourDecay, neighbourProb
    • fillColor, borderColor, highlightColor, shadowColor
    • shadowZone, shadowIntensity

🤨 Why WebGL?

I originally tried a vanilla JS + CSS approach to speed up load times, but constantly toggling hundreds of DOM elements proved too CPU-intensive and led to choppy animations. By moving to WebGL with Three.js, all the heavy lifting is off-loaded to the GPU, so the grid stays perfectly smooth—even on lower-end devices. And to keep mobile load times lightning-fast (especially on slow 4G), I now only load the Three.js/WebGL bundle on desktop; on mobile we fall back to a simple, static canvas grid with no hover interactions.

About

A responsive, high-performance grid background with smooth hover effects—implemented in WebGL (Three.js) on desktop and a simple Canvas fallback on mobile.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published