Shadcn UI Shader Block
Shader14 is a full-screen two-pass shader background built with shadcn/ui and React Three Fiber. The first pass uses simplex noise to distort UVs and produces a flowing organic pattern with bright points on a dark field. The second pass takes that output and re-renders it through a character-based dither, producing a blocky or ASCII-like overlay. Background and pattern colors are configurable.
Dark background with a light pattern that reads as noise or particles, then rendered as discrete character blocks. The combination creates a textured, retro-digital look. Smooth animation in the first pass.
Distinctive for the character dither layer. The two-pass pipeline is more complex than single-shader blocks. The result has a terminal or pixel-art feel. Moderate complexity with background and color props for customization.
Dependencies
| Package | Type |
|---|---|
| @react-three/fiber | NPM |
| react | NPM |
| three | NPM |