Shader 12 - Raymarched Grid Shader

Pro

A full-screen shader background with a raymarched 3D grid scene, configurable base, accent, and glow colors, vignette, and time-based camera motion.
Shadcn Shader 12 block

Component Data

  • ID:shader12
  • Access:pro
  • Created:Nov 10, 2025
  • Type:block

Shader 12 block design & features

Shader12 is a full-screen shader background built with shadcn/ui and React Three Fiber, using a raymarched fragment shader to render a 3D grid of rounded blocks. The scene uses a fixed camera with subtle time-based motion. The shader exposes three color uniforms: base (dark by default), accent (purple), and glow. A vignette darkens the edges, and a light noise pass adds grain.

Dark base with purple accent and glow. The grid reads as floating cubes or cells in space. The raymarching gives depth without actual 3D geometry. Smooth, continuous animation.

Tech-forward and minimal. The raymarched aesthetic is distinctive among shader blocks. Customizable colors make it adaptable to different palettes. Moderate complexity: the shader is fixed but the color props offer control.