Interactive Grid Shader

Shader 8Pro

A full-screen shader background with ping-pong buffer, grid-based shapes (squares, crosses, lines), and mouse interaction.

Shadcn UI Shader Block

Shader8 is a full-screen shader background built with shadcn/ui and React Three Fiber, using a ping-pong buffer for state. The buffer shader updates grid cells based on mouse position. The display shader renders shapes (squares, crosses, lines) from the cell state. Mouse interaction drives the pattern. Pointer leave resets the mouse uniform.

Grid-based with discrete shapes. The pattern reads as a cellular automaton or game-of-life style grid. Mouse creates trails. Continuous animation.

Interactive and game-like. The ping-pong grid with shape rendering is distinctive. Elaborate with FBO and mouse interaction.

Dependencies

PackageType
@react-three/fiberNPM
reactNPM
threeNPM