Components
Pulsing Geometric Dream
runs a GLSL fragment shader. This shader, which I'm calling "Pulsing Geometric Dream," uses signed distance functions (SDFs) for shapes and a smooth color palette function, techniques pioneered by Inigo Quilez and popular on Shadertoy.
import PulsingGeometricDream from "@/components/ui/pulsing-geometric-dream";
export default function DemoOne() {
return (
<div className="relative w-screen h-screen bg-black">
{/* Shader background */}
<PulsingGeometricDream
circleRadius1={0.4}
circleRadius2={0.6}
pulseAmplitude={0.1}
pulseSpeed={0.5}
gridSpacing={0.5}
boxHalfSize={[0.1, 0.1]}
unionK={0.1}
vignetteStrength={0.5}
/>
{/* Informational overlay */}
<div className="absolute top-4 left-4 text-white text-lg font-bold pointer-events-none">
Pulsing Geometric Dream
</div>
</div>
);
}