SDF Dreamscape

effect with a new one called "SDF Dreamscape," which uses signed distance functions (SDFs) to render a dynamic, fractal-like landscape with intricate details and a more sophisticated color palette. The UI controls have been re-mapped to control different aspects of this new scene

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

import ShaderComponent from "@/components/ui/sdf-dreamscape";

const settings = {
  hue: 180,
  speed: 0.4,
  intensity: 5,
  complexity: 2.5,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <ShaderComponent {...s} />
    </div>
  );
}