Pulsing Geometric Dream

Shaders 12

About

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.

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

Code

How Pulsing Geometric Dream is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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