Aether Flow

fragment shader is designed to be more visually creative, generating a flowing, multi-layered "river" of cosmic energy. It combines several layers of procedural noise that move at different speeds to create a sense of depth. The effect is fully interactive, reacting to your mouse movements by creating beautiful warps and ripples in the flow.

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

import ShaderCanvas from "@/components/ui/aether-flow";

const settings = {
  hue: 280,
  speed: 1,
  intensity: 1,
  complexity: 6,
  warp: 0.5,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen relative bg-black">
      <ShaderCanvas
        hue={s.hue}
        speed={s.speed}
        intensity={s.intensity}
        complexity={s.complexity}
        warp={s.warp}
      />
    </div>
  );
}