Components
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.
npx @21st-dev/cli add dhileepkumargm/pattern-shaderLoading preview...
import React from 'react';
import PatternShader from '@/components/ui/pattern-shader';
export default function DemoOne() {
return (
<div className="relative w-screen h-screen bg-background text-foreground font-sans">
{/* Procedural interference pattern */}
<PatternShader
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]}
/>
{/* 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>
);
}