@brochington/shader-backgrounds 0.1.0

package/src/lib/plugins/AuroraWavesPlugin.ts

@@ -0,0 +1,128 @@
+import { Color } from 'ogl';
+import { ShaderPlugin } from '../core/types';
+
+export type AuroraWavesConfig = {
+  /** Base background color */
+  backgroundColor: string;
+  /** Aurora ribbon primary color */
+  color1: string;
+  /** Aurora ribbon secondary color */
+  color2: string;
+  /** Overall brightness multiplier */
+  intensity?: number; // default 0.9
+  /** Motion speed */
+  speed?: number; // default 0.6
+  /** Noise scale (bigger = larger features) */
+  scale?: number; // default 1.6
+  /** Subtle film grain */
+  grainAmount?: number; // default 0.05
+};
+
+export class AuroraWavesPlugin implements ShaderPlugin {
+  name = 'aurora-waves';
+
+  fragmentShader = /* glsl */ `
+    precision highp float;
+    uniform float uTimeInternal;
+    uniform vec2 uResolution;
+    uniform vec3 uBg;
+    uniform vec3 uC1;
+    uniform vec3 uC2;
+    uniform float uIntensity;
+    uniform float uScale;
+    uniform float uGrain;
+
+    varying vec2 vUv;
+
+    float hash12(vec2 p) {
+      vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+      p3 += dot(p3, p3.yzx + 33.33);
+      return fract((p3.x + p3.y) * p3.z);
+    }
+
+    float noise(vec2 p) {
+      vec2 i = floor(p);
+      vec2 f = fract(p);
+      float a = hash12(i);
+      float b = hash12(i + vec2(1.0, 0.0));
+      float c = hash12(i + vec2(0.0, 1.0));
+      float d = hash12(i + vec2(1.0, 1.0));
+      vec2 u = f * f * (3.0 - 2.0 * f);
+      return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+    }
+
+    float fbm(vec2 p) {
+      float v = 0.0;
+      float a = 0.5;
+      mat2 rot = mat2(0.80, -0.60, 0.60, 0.80);
+      for (int i = 0; i < 5; i++) {
+        v += a * noise(p);
+        p = rot * p * 2.02 + 19.19;
+        a *= 0.55;
+      }
+      return v;
+    }
+
+    void main() {
+      float aspect = uResolution.x / uResolution.y;
+      vec2 uv = vUv;
+      vec2 p = (uv - 0.5) * vec2(aspect, 1.0);
+
+      float t = uTimeInternal;
+      vec3 col = uBg;
+
+      // Ribbon field: layered sin waves warped by fbm
+      float warp = fbm(p * (uScale * 0.9) + vec2(0.0, 0.10 * t));
+      float warp2 = fbm(p * (uScale * 1.3) + vec2(4.0, -0.07 * t));
+      float y = p.y + (warp - 0.5) * 0.55 + (warp2 - 0.5) * 0.35;
+
+      // Multiple ribbons at different heights
+      float band1 = exp(-pow((y - 0.15 + 0.08 * sin(p.x * 1.2 + t * 0.6)), 2.0) * 18.0);
+      float band2 = exp(-pow((y + 0.05 + 0.10 * sin(p.x * 0.9 - t * 0.5)), 2.0) * 14.0);
+      float band3 = exp(-pow((y - 0.35 + 0.06 * sin(p.x * 1.6 + t * 0.4)), 2.0) * 22.0);
+
+      float bands = clamp(band1 + 0.8 * band2 + 0.6 * band3, 0.0, 1.5);
+      // Soft flicker-free shimmer via low-frequency fbm
+      float shimmer = 0.65 + 0.35 * fbm(p * (uScale * 0.6) + vec2(2.0, t * 0.12));
+
+      vec3 aur = mix(uC1, uC2, clamp(0.5 + 0.5 * sin(p.x * 0.7 + t * 0.25 + warp * 2.0), 0.0, 1.0));
+      col += aur * (bands * shimmer) * uIntensity;
+
+      // Gentle vertical fade (so content remains readable)
+      float fade = smoothstep(-0.9, 0.2, p.y);
+      col = mix(col, uBg, fade * 0.35);
+
+      // Grain
+      float g = (hash12(uv * uResolution + t * 60.0) - 0.5) * 2.0;
+      col += g * uGrain;
+
+      gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
+    }
+  `;
+
+  uniforms: any;
+  private speed: number;
+
+  constructor(config: AuroraWavesConfig) {
+    const bg = new Color(config.backgroundColor);
+    const c1 = new Color(config.color1);
+    const c2 = new Color(config.color2);
+    this.speed = config.speed ?? 0.6;
+
+    this.uniforms = {
+      uBg: { value: [bg.r, bg.g, bg.b] },
+      uC1: { value: [c1.r, c1.g, c1.b] },
+      uC2: { value: [c2.r, c2.g, c2.b] },
+      uIntensity: { value: config.intensity ?? 0.9 },
+      uScale: { value: config.scale ?? 1.6 },
+      uGrain: { value: config.grainAmount ?? 0.05 },
+      uTimeInternal: { value: 0 },
+    };
+  }
+
+  onRender(dt: number) {
+    this.uniforms.uTimeInternal.value += dt * 0.001 * this.speed;
+  }
+}
+
+

package/src/lib/plugins/CausticsPlugin.ts

@@ -0,0 +1,128 @@
+import { Color } from 'ogl';
+import { ShaderPlugin } from '../core/types';
+
+export type CausticsConfig = {
+  color: string; // The light color (e.g. Cyan/White)
+  backgroundColor: string; // Deep blue
+  intensity?: number; // Brightness of the lines
+  speed?: number;
+  scale?: number; // Pattern scale, default 2.2
+  distortion?: number; // 0..2, default 0.9
+  sharpness?: number; // 1..6, default 3.2
+  antiAlias?: number; // 0..2, default 1.0 (higher = smoother)
+};
+
+export class CausticsPlugin implements ShaderPlugin {
+  name = 'caustics';
+
+  fragmentShader = /* glsl */ `
+    precision highp float;
+    #ifdef GL_OES_standard_derivatives
+    #extension GL_OES_standard_derivatives : enable
+    #endif
+
+    uniform float uTimeInternal; 
+    uniform vec2 uResolution;
+    uniform vec3 uColor;
+    uniform vec3 uBgColor;
+    uniform float uIntensity;
+    uniform float uScale;
+    uniform float uDistortion;
+    uniform float uSharpness;
+    uniform float uAA;
+    
+    varying vec2 vUv;
+
+    float aawidth(float x) {
+      #ifdef GL_OES_standard_derivatives
+      return fwidth(x);
+      #else
+      // Fallback: approximate 1 pixel in normalized space.
+      return 1.0 / max(1.0, min(uResolution.x, uResolution.y));
+      #endif
+    }
+
+    float hash12(vec2 p) {
+      vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+      p3 += dot(p3, p3.yzx + 33.33);
+      return fract((p3.x + p3.y) * p3.z);
+    }
+
+    // Textureless "caustics-ish" pattern: warped cells + exponential falloff
+    float caustics(vec2 p, float t) {
+      float c = 0.0;
+      float a = 1.0;
+
+      // Add a slow, large-scale warp so it doesn't look like static tiles
+      p += uDistortion * vec2(
+        sin(p.y * 1.7 + t * 0.8),
+        sin(p.x * 1.3 - t * 0.7)
+      );
+
+      for (int i = 0; i < 4; i++) {
+        // repeat + distance to nearest cell edge (0 at edges)
+        vec2 q = abs(fract(p) - 0.5);
+        float edgeDist = min(q.x, q.y);
+
+        // Derivative-based AA: widen the transition as frequency increases
+        float w = aawidth(edgeDist) * (1.0 + uAA * 2.0);
+
+        // Bright lines near edges, with controllable sharpness
+        float line = 1.0 - smoothstep(0.0, w, edgeDist);
+        // Emphasize peaks without introducing harsh aliasing
+        float web = pow(clamp(line, 0.0, 1.0), uSharpness);
+        c += web * a;
+
+        // zoom and drift
+        p = p * 1.65 + vec2(0.12 * t, -0.10 * t);
+        p += (hash12(p + float(i) * 7.7) - 0.5) * 0.25;
+        a *= 0.72;
+      }
+
+      return c;
+    }
+
+    void main() {
+      float aspect = uResolution.x / uResolution.y;
+      vec2 p = (vUv - 0.5) * vec2(aspect, 1.0);
+      float t = uTimeInternal;
+
+      // scale in aspect-correct domain
+      p *= uScale;
+
+      float c = caustics(p, t);
+
+      // shape + intensity
+      float brightness = pow(clamp(c, 0.0, 2.0), 1.35) * uIntensity;
+
+      vec3 col = uBgColor + uColor * brightness;
+
+      gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
+    }
+  `;
+
+  uniforms: any;
+  private speed: number;
+
+  constructor(config: CausticsConfig) {
+    const c = new Color(config.color);
+    const bg = new Color(config.backgroundColor);
+    this.speed = config.speed ?? 0.5;
+
+    this.uniforms = {
+      uColor: { value: [c.r, c.g, c.b] },
+      uBgColor: { value: [bg.r, bg.g, bg.b] },
+      uIntensity: { value: config.intensity ?? 1.0 },
+      uScale: { value: config.scale ?? 2.2 },
+      uDistortion: { value: config.distortion ?? 0.9 },
+      uSharpness: { value: config.sharpness ?? 3.2 },
+      uAA: { value: config.antiAlias ?? 1.0 },
+      uTimeInternal: { value: 0 },
+    };
+  }
+
+  onRender(dt: number) {
+    // We update our own time uniform to control the wave speed
+    this.uniforms.uTimeInternal.value += dt * 0.001 * this.speed;
+  }
+}

package/src/lib/plugins/ContourLinesPlugin.ts

@@ -0,0 +1,148 @@
+import { Color } from 'ogl';
+import { ShaderPlugin } from '../core/types';
+
+export type ContourLinesConfig = {
+  backgroundColor: string;
+  lineColor: string;
+  accentColor?: string; // default derived from lineColor
+  /** Lines per unit */
+  density?: number; // default 12
+  /** Line thickness */
+  thickness?: number; // default 0.075
+  /** Warp amount */
+  warp?: number; // default 0.9
+  /** Motion speed */
+  speed?: number; // default 0.35
+  /** Glow amount */
+  glow?: number; // default 0.35
+  /** Grain amount */
+  grainAmount?: number; // default 0.04
+};
+
+export class ContourLinesPlugin implements ShaderPlugin {
+  name = 'contour-lines';
+
+  fragmentShader = /* glsl */ `
+    precision highp float;
+    #ifdef GL_OES_standard_derivatives
+    #extension GL_OES_standard_derivatives : enable
+    #endif
+
+    uniform float uTimeInternal;
+    uniform vec2 uResolution;
+    uniform vec3 uBg;
+    uniform vec3 uLine;
+    uniform vec3 uAccent;
+    uniform float uDensity;
+    uniform float uThickness;
+    uniform float uWarp;
+    uniform float uGlow;
+    uniform float uGrain;
+
+    varying vec2 vUv;
+
+    float hash12(vec2 p) {
+      vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+      p3 += dot(p3, p3.yzx + 33.33);
+      return fract((p3.x + p3.y) * p3.z);
+    }
+
+    float noise(vec2 p) {
+      vec2 i = floor(p);
+      vec2 f = fract(p);
+      float a = hash12(i);
+      float b = hash12(i + vec2(1.0, 0.0));
+      float c = hash12(i + vec2(0.0, 1.0));
+      float d = hash12(i + vec2(1.0, 1.0));
+      vec2 u = f * f * (3.0 - 2.0 * f);
+      return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+    }
+
+    float fbm(vec2 p) {
+      float v = 0.0;
+      float a = 0.5;
+      mat2 rot = mat2(0.80, -0.60, 0.60, 0.80);
+      for (int i = 0; i < 5; i++) {
+        v += a * noise(p);
+        p = rot * p * 2.02 + 19.19;
+        a *= 0.55;
+      }
+      return v;
+    }
+
+    float aawidth(float x) {
+      #ifdef GL_OES_standard_derivatives
+      return fwidth(x);
+      #else
+      return 1.0 / max(1.0, min(uResolution.x, uResolution.y));
+      #endif
+    }
+
+    void main() {
+      float aspect = uResolution.x / uResolution.y;
+      vec2 uv = vUv;
+      vec2 p = (uv - 0.5) * vec2(aspect, 1.0);
+      float t = uTimeInternal;
+
+      // Height field
+      vec2 flow = vec2(0.10 * t, -0.06 * t);
+      float h = fbm(p * 1.25 + flow);
+      float h2 = fbm(p * 2.10 + vec2(-0.05 * t, 0.08 * t));
+      float height = h + 0.55 * h2;
+
+      // Warp the domain so contours bend naturally
+      vec2 w = vec2(
+        fbm(p * 1.2 + vec2(2.0, 0.15 * t)),
+        fbm(p * 1.2 + vec2(7.0, -0.12 * t))
+      );
+      p += (w - 0.5) * uWarp;
+
+      // Contour function: periodic bands
+      float c = fract((height + 0.35 * fbm(p * 1.75 + 4.0)) * uDensity);
+      float distToLine = min(c, 1.0 - c);
+      float wAA = aawidth(distToLine) * 1.4;
+      float line = 1.0 - smoothstep(uThickness, uThickness + wAA, distToLine);
+
+      // Glow around lines
+      float glow = smoothstep(0.45, 0.0, distToLine) * uGlow;
+
+      vec3 col = uBg;
+      col += uLine * line;
+      col += uAccent * glow;
+
+      // Grain
+      float g = (hash12(uv * uResolution + t * 60.0) - 0.5) * 2.0;
+      col += g * uGrain;
+
+      gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
+    }
+  `;
+
+  uniforms: any;
+  private speed: number;
+
+  constructor(config: ContourLinesConfig) {
+    const bg = new Color(config.backgroundColor);
+    const line = new Color(config.lineColor);
+    const accent = new Color(config.accentColor ?? config.lineColor);
+    this.speed = config.speed ?? 0.35;
+
+    this.uniforms = {
+      uBg: { value: [bg.r, bg.g, bg.b] },
+      uLine: { value: [line.r, line.g, line.b] },
+      uAccent: { value: [accent.r, accent.g, accent.b] },
+      uDensity: { value: config.density ?? 12 },
+      uThickness: { value: config.thickness ?? 0.075 },
+      uWarp: { value: config.warp ?? 0.9 },
+      uGlow: { value: config.glow ?? 0.35 },
+      uGrain: { value: config.grainAmount ?? 0.04 },
+      uTimeInternal: { value: 0 },
+    };
+  }
+
+  onRender(dt: number) {
+    this.uniforms.uTimeInternal.value += dt * 0.001 * this.speed;
+  }
+}
+
+

package/src/lib/plugins/DreamyBokehPlugin.ts

@@ -0,0 +1,191 @@
+import { Color } from 'ogl';
+import { ShaderPlugin } from '../core/types';
+
+export type DreamyBokehConfig = {
+  /** Background gradient bottom/top */
+  backgroundBottom: string;
+  backgroundTop: string;
+
+  /** A 3-color palette for the bokeh highlights */
+  colorA?: string; // default "#ffd1f3"
+  colorB?: string; // default "#8be9ff"
+  colorC?: string; // default "#b7ff9b"
+
+  /** Bokeh density multiplier (0..3) */
+  density?: number; // default 1.0
+  /** Bokeh size multiplier (0.5..2) */
+  size?: number; // default 1.0
+  /** Edge softness / blur multiplier (0.5..2) */
+  blur?: number; // default 1.0
+  /** Motion speed */
+  speed?: number; // default 0.25
+  /** Vignette strength (0..1) */
+  vignette?: number; // default 0.35
+  /** Grain strength (0..0.15) */
+  grainAmount?: number; // default 0.03
+};
+
+export class DreamyBokehPlugin implements ShaderPlugin {
+  name = 'dreamy-bokeh';
+
+  fragmentShader = /* glsl */ `
+    precision highp float;
+
+    uniform float uTimeInternal;
+    uniform vec2 uResolution;
+    uniform vec3 uBg0;
+    uniform vec3 uBg1;
+    uniform vec3 uA;
+    uniform vec3 uB;
+    uniform vec3 uC;
+    uniform float uDensity;
+    uniform float uSize;
+    uniform float uBlur;
+    uniform float uVignette;
+    uniform float uGrain;
+
+    varying vec2 vUv;
+
+    float hash12(vec2 p) {
+      vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+      p3 += dot(p3, p3.yzx + 33.33);
+      return fract((p3.x + p3.y) * p3.z);
+    }
+
+    vec2 hash22(vec2 p) {
+      float n = hash12(p);
+      return vec2(n, hash12(p + n + 19.19));
+    }
+
+    float softCircle(vec2 d, float r, float blur) {
+      float dist = length(d);
+      // inside -> 1, outside -> 0, with soft falloff
+      // NOTE: smoothstep requires edge0 < edge1.
+      float b = max(0.0001, blur);
+      float a = 1.0 - smoothstep(max(0.0, r - b), r, dist);
+      return a * a;
+    }
+
+    vec3 palette3(float h) {
+      // Smoothly mix between 3 user colors
+      float t0 = smoothstep(0.0, 1.0, h);
+      vec3 ab = mix(uA, uB, smoothstep(0.0, 0.65, t0));
+      return mix(ab, uC, smoothstep(0.35, 1.0, t0));
+    }
+
+    vec3 bokehLayer(vec2 uv, float scale, float t, float seed, float weight) {
+      vec2 p = uv * scale;
+      vec2 ip = floor(p);
+      vec2 fp = fract(p);
+
+      vec3 col = vec3(0.0);
+      float acc = 0.0;
+
+      // Look at neighboring cells so circles crossing boundaries still render.
+      for (int j = -1; j <= 1; j++) {
+        for (int i = -1; i <= 1; i++) {
+          vec2 cell = ip + vec2(float(i), float(j));
+          float r0 = hash12(cell + seed);
+
+          // density gate: fewer circles when density is low
+          float present = step(0.18, r0) * clamp(uDensity, 0.0, 3.0);
+          if (present <= 0.0) continue;
+
+          vec2 o = hash22(cell + seed * 1.7);
+
+          // Slow drift to avoid looking tiled/static.
+          // Drift amplitude intentionally small for background usage.
+          vec2 drift = 0.08 * vec2(
+            sin(t * 0.25 + r0 * 6.2831),
+            cos(t * 0.21 + r0 * 4.9132)
+          );
+
+          // Center in this cell (0..1), then shift to neighbor offset
+          vec2 c = vec2(float(i), float(j)) + o + drift;
+          vec2 d = fp - c;
+
+          float radius = mix(0.10, 0.44, pow(r0, 2.3)) * uSize;
+          float blur = mix(0.05, 0.18, hash12(cell + seed + 7.7)) * uBlur;
+
+          float a = softCircle(d, radius, blur);
+
+          // Add a soft “lens glow” lobe (subtle)
+          float glow = exp(-dot(d, d) / max(0.0001, radius * radius) * 1.9);
+          a = a * 0.72 + glow * 0.28;
+
+          // Color per circle, slightly biased to highlight variety
+          vec3 ccol = palette3(hash12(cell + seed + 3.3));
+
+          // Gentle twinkle (avoid flicker)
+          float tw = 1.0 + 0.12 * sin(t * 1.1 + r0 * 10.0);
+
+          col += ccol * a * tw;
+          acc += a;
+        }
+      }
+
+      // Normalize by accumulated alpha to keep brightness stable.
+      col *= weight / (1.0 + acc * 0.85);
+      return col;
+    }
+
+    void main() {
+      float aspect = uResolution.x / uResolution.y;
+      vec2 uv = vUv;
+      vec2 p = (uv - 0.5) * vec2(aspect, 1.0);
+      float t = uTimeInternal;
+
+      // Background gradient with a slight vertical curve.
+      float g = smoothstep(-0.7, 0.85, p.y + 0.08 * sin(p.x * 0.7));
+      vec3 col = mix(uBg0, uBg1, g);
+
+      // Multi-scale bokeh (parallax-ish via slight offsets).
+      col += bokehLayer(uv + vec2(-0.010 * t, 0.006 * t), 10.0, t, 11.0, 1.0);
+      col += bokehLayer(uv + vec2(-0.018 * t, 0.010 * t), 16.0, t + 3.7, 37.0, 0.9);
+      col += bokehLayer(uv + vec2(-0.030 * t, 0.016 * t), 26.0, t + 9.1, 83.0, 0.7);
+
+      // Vignette
+      float v = 1.0 - smoothstep(0.25, 1.15, length(p * vec2(1.0, 0.9)));
+      col *= mix(1.0, v, clamp(uVignette, 0.0, 1.0));
+
+      // Grain
+      float gr = (hash12(uv * uResolution + t * 61.0) - 0.5) * 2.0;
+      col += gr * uGrain;
+
+      gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
+    }
+  `;
+
+  uniforms: any;
+  private speed: number;
+
+  constructor(config: DreamyBokehConfig) {
+    const bg0 = new Color(config.backgroundBottom);
+    const bg1 = new Color(config.backgroundTop);
+    const a = new Color(config.colorA ?? '#ffd1f3');
+    const b = new Color(config.colorB ?? '#8be9ff');
+    const c = new Color(config.colorC ?? '#b7ff9b');
+
+    this.speed = config.speed ?? 0.25;
+
+    this.uniforms = {
+      uBg0: { value: [bg0.r, bg0.g, bg0.b] },
+      uBg1: { value: [bg1.r, bg1.g, bg1.b] },
+      uA: { value: [a.r, a.g, a.b] },
+      uB: { value: [b.r, b.g, b.b] },
+      uC: { value: [c.r, c.g, c.b] },
+      uDensity: { value: config.density ?? 1.0 },
+      uSize: { value: config.size ?? 1.0 },
+      uBlur: { value: config.blur ?? 1.0 },
+      uVignette: { value: config.vignette ?? 0.35 },
+      uGrain: { value: config.grainAmount ?? 0.03 },
+      uTimeInternal: { value: 0 },
+    };
+  }
+
+  onRender(dt: number) {
+    this.uniforms.uTimeInternal.value += dt * 0.001 * this.speed;
+  }
+}
+
+