Scrolling Grid Shader | Shader Effect for React & Tailwind CSS

245views

A fullscreen Three.js grid shader with continuous motion, custom GLSL rendering, responsive resolution updates, and proper WebGL resource cleanup.

Installation

How to use

Import ScrollingGridShader into a client component and render it inside a fixed-height or fullscreen container. It sizes itself from its parent and automatically cleans up the Three.js scene on unmount.

Dependencies

three

Back to all components More Shaders

Explore more

Related components

Atelier Hero — Premium WebGL Shader Hero Section for React

Radial Wave Grid Shader

Shaders

Scrolling Grid Shader | Shader Effect for React & Tailwind CSS

245views

A fullscreen Three.js grid shader with continuous motion, custom GLSL rendering, responsive resolution updates, and proper WebGL resource cleanup.

Installation

How to use

Import ScrollingGridShader into a client component and render it inside a fixed-height or fullscreen container. It sizes itself from its parent and automatically cleans up the Three.js scene on unmount.

Dependencies

three

Back to all components More Shaders

Explore more

Related components

Atelier Hero — Premium WebGL Shader Hero Section for React

Radial Wave Grid Shader

Scrolling Grid Shader | Shader Effect for React & Tailwind CSS