Cloud Shader

A WebGL shader background that renders soft, drifting procedural clouds against a gradient sky, tunable by speed, cloud count, and colors, for hero sections and page backgrounds.

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

import { CloudShader } from "@/components/ui/cloud-shader";

export default function CloudShaderDemo() {
  return (
    <div className="w-full h-screen">
      <CloudShader className="h-full w-full" />
    </div>
  );
}