Pattern Shader

import React from "react";
import PatternShader from "@/components/ui/pattern-shader";

const settings = {
  gridSpacing: 0.5,
  animationSpeed: 2,
  rotationSpeed: 0.1,
  paletteA: [0.5, 0.5, 0.5],
  paletteB: [0.5, 0.5, 0.5],
  paletteC: [1.0, 1.0, 0.5],
  paletteD: [0.8, 0.9, 0.3],
};

export default function DemoOne(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      {/* Procedural interference pattern */}
      <PatternShader
        gridSpacing={s.gridSpacing}
        animationSpeed={s.animationSpeed}
        rotationSpeed={s.rotationSpeed}
        paletteA={s.paletteA}
        paletteB={s.paletteB}
        paletteC={s.paletteC}
        paletteD={s.paletteD}
      />

      {/* Overlay content */}
      <div className="absolute inset-0 z-10 flex items-center justify-center pointer-events-none">
        <h1 className="text-6xl font-black text-foreground drop-shadow-lg">
          Pattern Shader
        </h1>
      </div>
    </div>
  );
}