Pattern Shader

Shaders 12

About

This new shader will feature a rotating, repeating pattern of shapes, creating a kaleidoscopic, hypnotic effect. The colors will shift and evolve over time for a dynamic feel.

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

Code

How Pattern Shader is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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