Shader 19 - Refraction Noise Shader

Pro

A full-screen shader background with glass rod refraction, 3D noise, RGB dispersion, and configurable background and object colors.

Shadcn Shader 19 block

Component data

ID
shader19
Access
pro
Created
Nov 10, 2025
Type
block
Libraries
Radix UI, Base UI, React Aria

Shader 19 block design & features

Shader19 is a full-screen shader background built with Shadcn UI and React Three Fiber, rendering a glass rod refraction effect with 3D noise. The shader uses a cylindrical refractive surface and samples noise at different UV offsets for RGB dispersion. backgroundColor and objectColor props control the palette. A timeMultiplier prop controls animation speed.

Two-color palette with noise-driven refraction. The effect reads as glass or frosted glass. The dispersion creates subtle chromatic split. Continuous animation.

Polished and glass-like. The refraction with noise dispersion is distinctive. Moderate complexity with background and object color props.