Soft Clouds

"use client";

import type { CSSProperties, ReactNode } from "react";
import { ShaderSurface } from "../_shader-background/ShaderSurface";
import { paletteOf, type ShadeStep } from "../_shader-background/shades";

// A soft summer sky shot on grainy film. Five octaves of noise, gently warped through itself so the
// clouds billow instead of blotting, are read through a soft threshold into cloud cover. Each cloud
// is lit from above: the same noise read a little higher up says how much cloud sits over a point,
// so undersides fall into a cool shade while tops stay white. The sky behind deepens toward the
// top and breathes with faint patches. Everything drifts on a slow wind, with the finer billows
// changing shape as they go.
const SHADER = /* glsl */ `
uniform float u_scale; // size of the clouds
uniform float u_cover; // how much of the sky is cloud, 0..1
uniform float u_soft;  // how soft the clouds' edges are
uniform float u_wind;  // direction the clouds drift, radians

// the cloud field: x the broad shape (three octaves), y the finer billows (two more), both ~0..1
vec2 fbm(vec2 p, float t) {
  float base = 0.0;
  float detail = 0.0;
  float amp = 0.5;
  for (int i = 0; i < 5; i++) {