Shadcn UI Shader Block
Shader17 is a full-screen background block built with Shadcn UI and React Three Fiber. A single WebGL canvas covers the viewport with an orthographic camera and a full-bleed plane. A photograph loads through the texture loader and feeds the display shader as the base color. Each frame, a fluid simulation updates velocity, pressure, divergence, dye, and related passes; pointer position in UV space injects motion so the fluid swirls and trails behind the cursor or touch. The imageUrl prop sets the bitmap source and pointerColor sets the dye tint applied to the fluid.
The visible result is your image still readable underneath while a smoky, ink-like fluid layer moves across it. Motion stays continuous with a fixed timestep loop. Colors follow the chosen pointer color against the photo. The plane is not frustum culled so it always draws edge to edge.
This reads as a technical, interactive backdrop rather than a static hero image. The combination of photographic texture and grid-based fluid simulation is uncommon in typical marketing blocks. Complexity is high: GPU framebuffers, multiple shader passes, and pointer smoothing logic. You need one strong source image and acceptable performance budget for always-on animation.
The canvas scales with device pixel ratio within a capped range so the simulation resolution tracks the drawing buffer without assuming a fixed pixel size.