Components
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.
npx @21st-dev/cli add dhileepkumargm/dithered-shader-backgroundLoading preview...
import React from 'react'
import DitheredShaderBackground from '@/components/ui/dithered-shader-background'
export default function DemoOne() {
return (
<div className="relative w-screen h-screen">
<DitheredShaderBackground
// you can pass extra classes here if needed:
className="opacity-80"
gridSize={150}
scale={0.5}
speed={1}
/>
</div>
)
}