@agent-native/core 0.90.1 → 0.90.2

package/corpus/templates/design/shared/shader-presets.ts

@@ -1,11 +1,22 @@
 /**
- * Single source of truth for the 8 curated GPU shader presets.
+ * Single source of truth for the shader preset catalogs:
  *
- * This file intentionally does NOT import from @paper-design/shaders-react
- * so it remains SSR-safe and can be imported in Vitest without a DOM.
- * All param metadata is inlined from the package defaults (v0.0.76).
+ * 1. The 8 curated GPU presets backed by @paper-design/shaders-react
+ *    (legacy CSS-approximation persist path — `SHADER_PRESETS`).
+ * 2. The code-backed GLSL preset library (`GLSL_SHADER_PRESETS`, bottom of
+ *    this file) — full fragment sources + uniform manifests persisted
+ *    verbatim into screen HTML per shared/shader-fills.ts, readable and
+ *    editable in the Code panel. This is the library behind the "Shader"
+ *    paint type's Presets section and the Shader effect entry.
+ *
+ * This file intentionally does NOT import @paper-design/shaders-react (and
+ * imports only types from shader-fills.ts) so it remains SSR-safe and can be
+ * imported in Vitest without a DOM. All legacy param metadata is inlined from
+ * the package defaults (v0.0.76).
  */
 
+import type { GlslShaderMode, GlslUniformManifest } from "./shader-fills";
+
 // ---------------------------------------------------------------------------
 // Core types
 // ---------------------------------------------------------------------------
@@ -790,3 +801,840 @@ export function validateDescriptor(descriptor: ShaderDescriptor): {
 
   return { valid: errors.length === 0, errors };
 }
+
+// ===========================================================================
+// Code-backed GLSL preset library
+// ===========================================================================
+//
+// Each preset carries a complete WebGL1 (GLSL ES 1.00) fragment source plus
+// a uniforms manifest matching shared/shader-fills.ts. Applying a preset
+// stamps the source into the screen HTML — after that it is the user's (and
+// the agent's) code: fully editable in the Code panel, knobs driven by the
+// manifest. Fills paint standalone backgrounds; effects render transparent
+// overlays composited above the element's content.
+//
+// Built-ins available to every preset: u_time (seconds), u_resolution (px).
+
+export type GlslShaderPresetCategory =
+  | "gradient-flow"
+  | "waves"
+  | "noise"
+  | "pattern"
+  | "texture"
+  | "retro";
+
+export const GLSL_SHADER_PRESET_CATEGORY_LABELS: Record<
+  GlslShaderPresetCategory,
+  string
+> = {
+  "gradient-flow": "Gradient flow", // i18n-ignore shader preset category
+  waves: "Waves", // i18n-ignore shader preset category
+  noise: "Noise", // i18n-ignore shader preset category
+  pattern: "Patterns", // i18n-ignore shader preset category
+  texture: "Texture", // i18n-ignore shader preset category
+  retro: "Retro", // i18n-ignore shader preset category
+};
+
+export interface GlslShaderPreset {
+  /** Stable kebab-case preset id — seeds new shader ids/names. */
+  name: string;
+  label: string;
+  description: string;
+  category: GlslShaderPresetCategory;
+  mode: GlslShaderMode;
+  /** Static CSS approximation used for preset-grid thumbnails (no WebGL). */
+  previewCss: string;
+  uniforms: GlslUniformManifest;
+  glsl: string;
+}
+
+const GLSL_NOISE_HELPERS = `
+float anHash21(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32);
+  return fract(p.x * p.y);
+}
+
+float anValueNoise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float a = anHash21(i);
+  float b = anHash21(i + vec2(1.0, 0.0));
+  float c = anHash21(i + vec2(0.0, 1.0));
+  float d = anHash21(i + vec2(1.0, 1.0));
+  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
+}
+
+float anFbm(vec2 p) {
+  float v = 0.0;
+  float amp = 0.5;
+  for (int i = 0; i < 5; i++) {
+    v += amp * anValueNoise(p);
+    p = p * 2.03 + vec2(17.13, 9.57);
+    amp *= 0.5;
+  }
+  return v;
+}
+`.trim();
+
+export const GLSL_SHADER_PRESETS: readonly GlslShaderPreset[] = [
+  // ── Fills ─────────────────────────────────────────────────────────────────
+  {
+    name: "mesh-gradient",
+    label: "Mesh Gradient",
+    description:
+      "Four color points drifting across the surface, blended by distance.",
+    category: "gradient-flow",
+    mode: "fill",
+    previewCss:
+      "radial-gradient(circle at 20% 25%, #ff9a9e 0%, transparent 55%), " +
+      "radial-gradient(circle at 80% 25%, #a18cd1 0%, transparent 55%), " +
+      "radial-gradient(circle at 25% 80%, #fbc2eb 0%, transparent 55%), " +
+      "radial-gradient(circle at 80% 75%, #fad0c4 0%, transparent 60%), #a18cd1",
+    uniforms: {
+      u_color_a: { type: "color", value: "#ff9a9e", label: "Color 1" },
+      u_color_b: { type: "color", value: "#a18cd1", label: "Color 2" },
+      u_color_c: { type: "color", value: "#fbc2eb", label: "Color 3" },
+      u_color_d: { type: "color", value: "#fad0c4", label: "Color 4" },
+      u_drift: {
+        type: "float",
+        value: 0.6,
+        min: 0,
+        max: 2,
+        step: 0.01,
+        label: "Drift",
+      },
+      u_blend: {
+        type: "float",
+        value: 2.2,
+        min: 0.5,
+        max: 6,
+        step: 0.05,
+        label: "Blend",
+      },
+    },
+    glsl: `
+precision highp float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec3 u_color_a;
+uniform vec3 u_color_b;
+uniform vec3 u_color_c;
+uniform vec3 u_color_d;
+uniform float u_drift;
+uniform float u_blend;
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  float t = u_time * u_drift;
+  vec2 p0 = vec2(0.20 + 0.16 * sin(t * 0.60), 0.24 + 0.14 * cos(t * 0.50));
+  vec2 p1 = vec2(0.82 + 0.12 * sin(t * 0.44 + 2.1), 0.28 + 0.16 * cos(t * 0.62 + 1.3));
+  vec2 p2 = vec2(0.26 + 0.15 * sin(t * 0.52 + 4.2), 0.78 + 0.12 * cos(t * 0.47 + 2.8));
+  vec2 p3 = vec2(0.78 + 0.14 * sin(t * 0.58 + 1.7), 0.76 + 0.15 * cos(t * 0.55 + 4.6));
+  float w0 = 1.0 / pow(distance(uv, p0) + 0.02, u_blend);
+  float w1 = 1.0 / pow(distance(uv, p1) + 0.02, u_blend);
+  float w2 = 1.0 / pow(distance(uv, p2) + 0.02, u_blend);
+  float w3 = 1.0 / pow(distance(uv, p3) + 0.02, u_blend);
+  vec3 color = (u_color_a * w0 + u_color_b * w1 + u_color_c * w2 + u_color_d * w3)
+    / (w0 + w1 + w2 + w3);
+  gl_FragColor = vec4(color, 1.0);
+}
+`.trim(),
+  },
+  {
+    name: "glowing-wave",
+    label: "Glowing Wave",
+    description:
+      "Luminous sine waves with adjustable amplitude, frequency, and glow.",
+    category: "waves",
+    mode: "fill",
+    previewCss:
+      "linear-gradient(180deg, #05070f 32%, #59d9ff88 48%, #59d9ff 50%, " +
+      "#59d9ff88 52%, #05070f 68%)",
+    uniforms: {
+      u_wave_color: { type: "color", value: "#59d9ff", label: "Wave color" },
+      u_bg_color: { type: "color", value: "#05070f", label: "Background" },
+      u_amplitude: {
+        type: "float",
+        value: 0.16,
+        min: 0,
+        max: 0.5,
+        step: 0.005,
+        label: "Amplitude",
+      },
+      u_frequency: {
+        type: "float",
+        value: 6,
+        min: 1,
+        max: 20,
+        step: 0.1,
+        label: "Frequency",
+      },
+      u_glow: {
+        type: "float",
+        value: 0.02,
+        min: 0.002,
+        max: 0.1,
+        step: 0.001,
+        label: "Glow",
+      },
+      u_speed: {
+        type: "float",
+        value: 1,
+        min: 0,
+        max: 4,
+        step: 0.05,
+        label: "Speed",
+      },
+    },
+    glsl: `
+precision highp float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec3 u_wave_color;
+uniform vec3 u_bg_color;
+uniform float u_amplitude;
+uniform float u_frequency;
+uniform float u_glow;
+uniform float u_speed;
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  float t = u_time * u_speed;
+  vec3 color = u_bg_color;
+  for (int i = 0; i < 3; i++) {
+    float fi = float(i);
+    float phase = t * (0.7 + fi * 0.25) + fi * 2.4;
+    float y = 0.5
+      + u_amplitude * sin(uv.x * u_frequency + phase)
+      + u_amplitude * 0.35 * sin(uv.x * u_frequency * 1.7 - phase * 1.3);
+    float d = abs(uv.y - y);
+    float glow = u_glow / max(d, 0.002);
+    color += u_wave_color * min(glow, 8.0) * (0.6 - fi * 0.18) * 0.55;
+  }
+  gl_FragColor = vec4(clamp(color, 0.0, 1.0), 1.0);
+}
+`.trim(),
+  },
+  {
+    name: "water-caustics",
+    label: "Water Caustics",
+    description:
+      "Shimmering underwater light patterns with a loopable phase control.",
+    category: "waves",
+    mode: "fill",
+    previewCss:
+      "radial-gradient(circle at 30% 35%, #7fd4ff55 0%, transparent 45%), " +
+      "radial-gradient(circle at 70% 60%, #7fd4ff33 0%, transparent 40%), #06283d",
+    uniforms: {
+      u_deep_color: { type: "color", value: "#06283d", label: "Water" },
+      u_light_color: { type: "color", value: "#7fd4ff", label: "Light" },
+      u_scale: {
+        type: "float",
+        value: 3,
+        min: 1,
+        max: 10,
+        step: 0.1,
+        label: "Scale",
+      },
+      u_phase: {
+        type: "float",
+        value: 0,
+        min: 0,
+        max: 1,
+        step: 0.01,
+        label: "Phase",
+      },
+      u_speed: {
+        type: "float",
+        value: 0.6,
+        min: 0,
+        max: 3,
+        step: 0.05,
+        label: "Speed",
+      },
+    },
+    glsl: `
+precision highp float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec3 u_deep_color;
+uniform vec3 u_light_color;
+uniform float u_scale;
+uniform float u_phase;
+uniform float u_speed;
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  vec2 p = uv * u_scale;
+  float t = u_time * u_speed + u_phase * 6.28318;
+  vec2 i0 = p;
+  float c = 0.0;
+  for (int n = 0; n < 4; n++) {
+    float fn = float(n);
+    float tt = t * (1.0 - 0.075 * fn) + fn * 1.7;
+    i0 = p + vec2(cos(tt - i0.x) + sin(tt + i0.y), sin(tt - i0.y) + cos(tt + i0.x));
+    c += 1.0 / max(length(vec2(p.x / (sin(i0.x + tt) + 2.0), p.y / (cos(i0.y + tt) + 2.0))), 0.001);
+  }
+  c /= 4.0;
+  c = 1.17 - pow(abs(c), 1.4);
+  float glow = pow(abs(c), 8.0);
+  vec3 color = u_deep_color + u_light_color * clamp(glow, 0.0, 1.0);
+  gl_FragColor = vec4(clamp(color, 0.0, 1.0), 1.0);
+}
+`.trim(),
+  },
+  {
+    name: "fractal-noise",
+    label: "Fractal Noise",
+    description: "Organic domain-warped fBm noise blended between two colors.",
+    category: "noise",
+    mode: "fill",
+    previewCss:
+      "radial-gradient(ellipse at 30% 30%, #e0aaff66 0%, transparent 60%), " +
+      "radial-gradient(ellipse at 75% 70%, #e0aaff44 0%, transparent 55%), #10002b",
+    uniforms: {
+      u_color_a: { type: "color", value: "#10002b", label: "Base" },
+      u_color_b: { type: "color", value: "#e0aaff", label: "Accent" },
+      u_scale: {
+        type: "float",
+        value: 3,
+        min: 0.5,
+        max: 12,
+        step: 0.1,
+        label: "Scale",
+      },
+      u_contrast: {
+        type: "float",
+        value: 1.4,
+        min: 0.2,
+        max: 4,
+        step: 0.05,
+        label: "Contrast",
+      },
+      u_drift: {
+        type: "float",
+        value: 0.15,
+        min: 0,
+        max: 1,
+        step: 0.01,
+        label: "Drift",
+      },
+    },
+    glsl: `
+precision highp float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec3 u_color_a;
+uniform vec3 u_color_b;
+uniform float u_scale;
+uniform float u_contrast;
+uniform float u_drift;
+
+${GLSL_NOISE_HELPERS}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  vec2 p = uv * u_scale + vec2(u_time * u_drift, 0.0);
+  float warp = anFbm(p + vec2(u_time * u_drift * 0.5));
+  float n = anFbm(p + warp * 1.6);
+  n = clamp((n - 0.5) * u_contrast + 0.5, 0.0, 1.0);
+  gl_FragColor = vec4(mix(u_color_a, u_color_b, n), 1.0);
+}
+`.trim(),
+  },
+  {
+    name: "clouds",
+    label: "Clouds",
+    description:
+      "Procedural drifting clouds with adjustable coverage and scale.",
+    category: "noise",
+    mode: "fill",
+    previewCss:
+      "radial-gradient(ellipse at 30% 40%, #ffffffcc 0%, transparent 50%), " +
+      "radial-gradient(ellipse at 70% 30%, #ffffff99 0%, transparent 45%), #5aa7e6",
+    uniforms: {
+      u_sky_color: { type: "color", value: "#5aa7e6", label: "Sky" },
+      u_cloud_color: { type: "color", value: "#ffffff", label: "Clouds" },
+      u_cover: {
+        type: "float",
+        value: 0.5,
+        min: 0,
+        max: 1,
+        step: 0.01,
+        label: "Coverage",
+      },
+      u_scale: {
+        type: "float",
+        value: 2.5,
+        min: 0.5,
+        max: 8,
+        step: 0.1,
+        label: "Scale",
+      },
+      u_drift: {
+        type: "float",
+        value: 0.4,
+        min: 0,
+        max: 2,
+        step: 0.01,
+        label: "Drift",
+      },
+    },
+    glsl: `
+precision highp float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec3 u_sky_color;
+uniform vec3 u_cloud_color;
+uniform float u_cover;
+uniform float u_scale;
+uniform float u_drift;
+
+${GLSL_NOISE_HELPERS}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  float aspect = u_resolution.x / max(u_resolution.y, 1.0);
+  vec2 p = vec2(uv.x * aspect, uv.y) * u_scale;
+  p.x += u_time * u_drift * 0.2;
+  float n = anFbm(p + anFbm(p * 1.4 + vec2(u_time * u_drift * 0.05)) * 1.2);
+  float threshold = 1.0 - u_cover;
+  float clouds = smoothstep(threshold - 0.25, threshold + 0.25, n);
+  vec3 color = mix(u_sky_color, u_cloud_color, clouds);
+  gl_FragColor = vec4(color, 1.0);
+}
+`.trim(),
+  },
+  {
+    name: "nebula",
+    label: "Nebula",
+    description:
+      "Deep-space gas clouds with twinkling stars and adjustable density.",
+    category: "noise",
+    mode: "fill",
+    previewCss:
+      "radial-gradient(ellipse at 30% 35%, #7b2ff766 0%, transparent 55%), " +
+      "radial-gradient(ellipse at 72% 68%, #f107a344 0%, transparent 50%), #050014",
+    uniforms: {
+      u_color_a: { type: "color", value: "#7b2ff7", label: "Gas 1" },
+      u_color_b: { type: "color", value: "#f107a3", label: "Gas 2" },
+      u_density: {
+        type: "float",
+        value: 0.6,
+        min: 0,
+        max: 1,
+        step: 0.01,
+        label: "Density",
+      },
+      u_stars: {
+        type: "float",
+        value: 0.5,
+        min: 0,
+        max: 1,
+        step: 0.01,
+        label: "Stars",
+      },
+      u_drift: {
+        type: "float",
+        value: 0.08,
+        min: 0,
+        max: 0.5,
+        step: 0.005,
+        label: "Drift",
+      },
+    },
+    glsl: `
+precision highp float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec3 u_color_a;
+uniform vec3 u_color_b;
+uniform float u_density;
+uniform float u_stars;
+uniform float u_drift;
+
+${GLSL_NOISE_HELPERS}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  float aspect = u_resolution.x / max(u_resolution.y, 1.0);
+  vec2 p = vec2(uv.x * aspect, uv.y) * 3.0;
+  vec2 drift = vec2(u_time * u_drift, u_time * u_drift * 0.6);
+  float n1 = anFbm(p + drift);
+  float n2 = anFbm(p * 1.7 - drift + 5.2);
+  vec3 space = vec3(0.02, 0.0, 0.08);
+  vec3 color = space;
+  color += u_color_a * pow(n1, 2.0) * u_density * 1.6;
+  color += u_color_b * pow(n2, 2.4) * u_density * 1.2;
+  float sparkle = anHash21(floor(gl_FragCoord.xy / 2.0));
+  float twinkle = 0.75 + 0.25 * sin(u_time * 3.0 + sparkle * 40.0);
+  float star = step(0.9975, sparkle) * u_stars * twinkle;
+  color += vec3(star);
+  gl_FragColor = vec4(clamp(color, 0.0, 1.0), 1.0);
+}
+`.trim(),
+  },
+  {
+    name: "moire",
+    label: "Moiré",
+    description:
+      "Interfering ring fields producing shifting optical moiré patterns.",
+    category: "pattern",
+    mode: "fill",
+    previewCss:
+      "repeating-radial-gradient(circle at 42% 50%, #00f5d4 0 2px, #0f0f0f 2px 7px)",
+    uniforms: {
+      u_color_a: { type: "color", value: "#0f0f0f", label: "Background" },
+      u_color_b: { type: "color", value: "#00f5d4", label: "Lines" },
+      u_frequency: {
+        type: "float",
+        value: 42,
+        min: 5,
+        max: 120,
+        step: 1,
+        label: "Frequency",
+      },
+      u_offset: {
+        type: "vec2",
+        value: [0.12, 0.08],
+        label: "Center offset",
+      },
+      u_speed: {
+        type: "float",
+        value: 0.2,
+        min: 0,
+        max: 2,
+        step: 0.01,
+        label: "Speed",
+      },
+    },
+    glsl: `
+precision highp float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec3 u_color_a;
+uniform vec3 u_color_b;
+uniform float u_frequency;
+uniform vec2 u_offset;
+uniform float u_speed;
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  float aspect = u_resolution.x / max(u_resolution.y, 1.0);
+  vec2 p = vec2(uv.x * aspect, uv.y);
+  vec2 center = vec2(0.5 * aspect, 0.5);
+  vec2 wobble = 0.02 * vec2(sin(u_time * u_speed * 3.0), cos(u_time * u_speed * 2.3));
+  vec2 c1 = center + u_offset * 0.5 + wobble;
+  vec2 c2 = center - u_offset * 0.5 - wobble;
+  float r1 = sin(distance(p, c1) * u_frequency);
+  float r2 = sin(distance(p, c2) * u_frequency);
+  float v = r1 * r2 * 0.5 + 0.5;
+  v = smoothstep(0.35, 0.65, v);
+  gl_FragColor = vec4(mix(u_color_a, u_color_b, v), 1.0);
+}
+`.trim(),
+  },
+  {
+    name: "concentric-rings",
+    label: "Concentric Rings",
+    description:
+      "Bold expanding rings with adjustable count, softness, and center.",
+    category: "pattern",
+    mode: "fill",
+    previewCss:
+      "repeating-radial-gradient(circle at 50% 50%, #ffd166 0 6px, #101418 6px 16px)",
+    uniforms: {
+      u_color_a: { type: "color", value: "#101418", label: "Background" },
+      u_color_b: { type: "color", value: "#ffd166", label: "Rings" },
+      u_rings: {
+        type: "float",
+        value: 14,
+        min: 2,
+        max: 40,
+        step: 1,
+        label: "Rings",
+      },
+      u_center: { type: "vec2", value: [0.5, 0.5], label: "Center" },
+      u_softness: {
+        type: "float",
+        value: 0.25,
+        min: 0.01,
+        max: 0.5,
+        step: 0.01,
+        label: "Softness",
+      },
+      u_speed: {
+        type: "float",
+        value: 0.4,
+        min: -2,
+        max: 2,
+        step: 0.05,
+        label: "Speed",
+      },
+    },
+    glsl: `
+precision highp float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec3 u_color_a;
+uniform vec3 u_color_b;
+uniform float u_rings;
+uniform vec2 u_center;
+uniform float u_softness;
+uniform float u_speed;
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  float aspect = u_resolution.x / max(u_resolution.y, 1.0);
+  vec2 p = vec2(uv.x * aspect, uv.y);
+  vec2 c = vec2(u_center.x * aspect, u_center.y);
+  float d = distance(p, c);
+  float v = 0.5 + 0.5 * sin((d * u_rings - u_time * u_speed) * 6.28318);
+  float band = smoothstep(0.5 - u_softness, 0.5 + u_softness, v);
+  gl_FragColor = vec4(mix(u_color_a, u_color_b, band), 1.0);
+}
+`.trim(),
+  },
+  {
+    name: "pattern-grid",
+    label: "Pattern Grid",
+    description:
+      "A grid of softly pulsing dots with adjustable cell count and radius.",
+    category: "pattern",
+    mode: "fill",
+    previewCss:
+      "radial-gradient(circle at 8px 8px, #e94560 3px, transparent 3.5px) 0 0 / 16px 16px, #1b1b2f",
+    uniforms: {
+      u_bg_color: { type: "color", value: "#1b1b2f", label: "Background" },
+      u_fg_color: { type: "color", value: "#e94560", label: "Dots" },
+      u_cells: {
+        type: "float",
+        value: 10,
+        min: 2,
+        max: 40,
+        step: 1,
+        label: "Cells",
+      },
+      u_radius: {
+        type: "float",
+        value: 0.28,
+        min: 0.05,
+        max: 0.48,
+        step: 0.01,
+        label: "Dot size",
+      },
+      u_pulse: {
+        type: "float",
+        value: 0.15,
+        min: 0,
+        max: 0.5,
+        step: 0.01,
+        label: "Pulse",
+      },
+    },
+    glsl: `
+precision highp float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec3 u_bg_color;
+uniform vec3 u_fg_color;
+uniform float u_cells;
+uniform float u_radius;
+uniform float u_pulse;
+
+float anHash21(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32);
+  return fract(p.x * p.y);
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  float aspect = u_resolution.x / max(u_resolution.y, 1.0);
+  vec2 g = vec2(uv.x * aspect, uv.y) * u_cells;
+  vec2 cell = floor(g);
+  vec2 f = fract(g) - 0.5;
+  float ph = anHash21(cell);
+  float r = u_radius * (1.0 + u_pulse * sin(u_time * 2.0 + ph * 6.28318));
+  float d = length(f);
+  float m = 1.0 - smoothstep(r - 0.03, r + 0.03, d);
+  gl_FragColor = vec4(mix(u_bg_color, u_fg_color, m), 1.0);
+}
+`.trim(),
+  },
+  // ── Effects (transparent overlays above the element's content) ───────────
+  {
+    name: "film-grain",
+    label: "Film Grain",
+    description:
+      "Animated photographic grain composited over the layer content.",
+    category: "texture",
+    mode: "effect",
+    previewCss:
+      "repeating-conic-gradient(#0000 0% 25%, #00000018 0% 50%) 0 0 / 4px 4px, #8a8a8a40",
+    uniforms: {
+      u_intensity: {
+        type: "float",
+        value: 0.12,
+        min: 0,
+        max: 0.5,
+        step: 0.01,
+        label: "Intensity",
+      },
+      u_size: {
+        type: "float",
+        value: 1.5,
+        min: 0.5,
+        max: 4,
+        step: 0.1,
+        label: "Grain size",
+      },
+    },
+    glsl: `
+precision highp float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_intensity;
+uniform float u_size;
+
+float anHash21(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32);
+  return fract(p.x * p.y);
+}
+
+void main() {
+  vec2 cell = floor(gl_FragCoord.xy / max(u_size, 0.5));
+  float frame = floor(u_time * 24.0);
+  float n = anHash21(cell + vec2(frame * 0.013, frame * 0.007));
+  float signed = n * 2.0 - 1.0;
+  vec3 color = signed > 0.0 ? vec3(1.0) : vec3(0.0);
+  gl_FragColor = vec4(color, abs(signed) * u_intensity);
+}
+`.trim(),
+  },
+  {
+    name: "halftone",
+    label: "Halftone",
+    description:
+      "Vintage print dot screen overlay with adjustable size and angle.",
+    category: "retro",
+    mode: "effect",
+    previewCss:
+      "radial-gradient(circle at 5px 5px, #14213d 2.5px, transparent 3px) 0 0 / 10px 10px",
+    uniforms: {
+      u_color: { type: "color", value: "#14213d", label: "Dot color" },
+      u_size: {
+        type: "float",
+        value: 8,
+        min: 3,
+        max: 30,
+        step: 0.5,
+        label: "Dot size",
+      },
+      u_angle: {
+        type: "float",
+        value: 0.6,
+        min: 0,
+        max: 3.14,
+        step: 0.01,
+        label: "Angle",
+      },
+      u_strength: {
+        type: "float",
+        value: 0.5,
+        min: 0,
+        max: 1,
+        step: 0.01,
+        label: "Strength",
+      },
+    },
+    glsl: `
+precision highp float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec3 u_color;
+uniform float u_size;
+uniform float u_angle;
+uniform float u_strength;
+
+void main() {
+  vec2 p = gl_FragCoord.xy;
+  float s = sin(u_angle);
+  float c = cos(u_angle);
+  vec2 rp = vec2(c * p.x - s * p.y, s * p.x + c * p.y);
+  vec2 f = fract(rp / max(u_size, 1.0)) - 0.5;
+  float ramp = clamp(gl_FragCoord.y / max(u_resolution.y, 1.0), 0.0, 1.0);
+  float r = mix(0.08, 0.62, 1.0 - ramp);
+  float m = 1.0 - smoothstep(r - 0.08, r + 0.08, length(f) * 2.0);
+  gl_FragColor = vec4(u_color, m * u_strength);
+}
+`.trim(),
+  },
+  {
+    name: "scanlines",
+    label: "Scanlines",
+    description:
+      "CRT-style scanlines with subtle flicker, composited over content.",
+    category: "retro",
+    mode: "effect",
+    previewCss:
+      "repeating-linear-gradient(180deg, #00000030 0 1px, transparent 1px 4px)",
+    uniforms: {
+      u_color: { type: "color", value: "#000000", label: "Line color" },
+      u_density: {
+        type: "float",
+        value: 220,
+        min: 40,
+        max: 600,
+        step: 5,
+        label: "Density",
+      },
+      u_opacity: {
+        type: "float",
+        value: 0.18,
+        min: 0,
+        max: 0.6,
+        step: 0.01,
+        label: "Opacity",
+      },
+      u_flicker: {
+        type: "float",
+        value: 0.06,
+        min: 0,
+        max: 0.3,
+        step: 0.01,
+        label: "Flicker",
+      },
+    },
+    glsl: `
+precision highp float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec3 u_color;
+uniform float u_density;
+uniform float u_opacity;
+uniform float u_flicker;
+
+void main() {
+  float y = gl_FragCoord.y / max(u_resolution.y, 1.0);
+  float line = 0.5 + 0.5 * sin(y * u_density * 6.28318);
+  float flicker = 1.0 + u_flicker * sin(u_time * 11.0);
+  float a = (1.0 - smoothstep(0.35, 0.75, line)) * u_opacity * flicker;
+  gl_FragColor = vec4(u_color, clamp(a, 0.0, 1.0));
+}
+`.trim(),
+  },
+] as const;
+
+export const GLSL_SHADER_PRESET_MAP: Record<string, GlslShaderPreset> =
+  Object.fromEntries(GLSL_SHADER_PRESETS.map((p) => [p.name, p]));
+
+/** Return a GLSL preset by name, or undefined if not found. */
+export function getGlslShaderPreset(
+  name: string,
+): GlslShaderPreset | undefined {
+  return GLSL_SHADER_PRESET_MAP[name];
+}