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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds DitheredShaderBackground to your project and fits it to your theme.

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>
  );
}