Components
DitheredShaderBackground
A React wrapper around a p5.js/WebGL shader that renders a full-screen, time-animated generative pattern with ordered Bayer dithering for a retro pixel-art effect. Supports customizable grid size, scale, responsive resizing, light/dark theme backgrounds, and a reduced-motion fallback.
import React from 'react';
import ShaderBackground from '@/components/ui/dithered-shader-background-1';
export default function DemoOne() {
return (
<div className="app-container" data-theme="dark">
<ShaderBackground className="shader-canvas" scale={0.5} />
</div>
);
}