@brochington/shader-backgrounds 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './lib/core/types';
+export * from './lib/core/ShaderCanvas';
+export * from './lib/plugins/GradientPlugin';
+export * from './lib/plugins';
+export * from './lib/components/web-component';

package/dist/lib/components/web-component.d.ts

@@ -0,0 +1,17 @@
+import { ShaderPlugin } from '../core/types';
+export declare class ShaderBackgroundElement extends HTMLElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    set plugin(plugin: ShaderPlugin);
+    get plugin(): ShaderPlugin;
+    set renderScale(value: number);
+    get renderScale(): number;
+    set singleRender(value: boolean);
+    get singleRender(): boolean;
+    render(): void;
+    init(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}

package/dist/lib/core/ShaderCanvas.d.ts

@@ -0,0 +1,21 @@
+import { OGLRenderingContext } from 'ogl';
+import { ShaderPlugin } from './types';
+export declare class ShaderCanvas {
+    #private;
+    private canvas;
+    gl: OGLRenderingContext;
+    constructor(canvas: HTMLCanvasElement, plugin: ShaderPlugin, options?: {
+        pixelRatio?: number;
+        width?: number;
+        height?: number;
+        renderScale?: number;
+        singleRender?: boolean;
+    });
+    private init;
+    start(): void;
+    stop(): void;
+    render(): void;
+    resize(width?: number, height?: number): void;
+    private loop;
+    dispose(): void;
+}

package/dist/lib/core/types.d.ts

@@ -0,0 +1,12 @@
+import { Program, OGLRenderingContext } from 'ogl';
+export interface ShaderPlugin {
+    name: string;
+    fragmentShader: string;
+    vertexShader?: string;
+    uniforms: Record<string, {
+        value: any;
+    }>;
+    onInit?: (gl: OGLRenderingContext, program: Program) => void;
+    onRender?: (dt: number, totalTime: number) => void;
+    onResize?: (width: number, height: number) => void;
+}

package/dist/lib/plugins/AuroraWavesPlugin.d.ts

@@ -0,0 +1,25 @@
+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;
+    /** Motion speed */
+    speed?: number;
+    /** Noise scale (bigger = larger features) */
+    scale?: number;
+    /** Subtle film grain */
+    grainAmount?: number;
+};
+export declare class AuroraWavesPlugin implements ShaderPlugin {
+    name: string;
+    fragmentShader: string;
+    uniforms: any;
+    private speed;
+    constructor(config: AuroraWavesConfig);
+    onRender(dt: number): void;
+}

package/dist/lib/plugins/CausticsPlugin.d.ts

@@ -0,0 +1,19 @@
+import { ShaderPlugin } from '../core/types';
+export type CausticsConfig = {
+    color: string;
+    backgroundColor: string;
+    intensity?: number;
+    speed?: number;
+    scale?: number;
+    distortion?: number;
+    sharpness?: number;
+    antiAlias?: number;
+};
+export declare class CausticsPlugin implements ShaderPlugin {
+    name: string;
+    fragmentShader: string;
+    uniforms: any;
+    private speed;
+    constructor(config: CausticsConfig);
+    onRender(dt: number): void;
+}

package/dist/lib/plugins/ContourLinesPlugin.d.ts

@@ -0,0 +1,26 @@
+import { ShaderPlugin } from '../core/types';
+export type ContourLinesConfig = {
+    backgroundColor: string;
+    lineColor: string;
+    accentColor?: string;
+    /** Lines per unit */
+    density?: number;
+    /** Line thickness */
+    thickness?: number;
+    /** Warp amount */
+    warp?: number;
+    /** Motion speed */
+    speed?: number;
+    /** Glow amount */
+    glow?: number;
+    /** Grain amount */
+    grainAmount?: number;
+};
+export declare class ContourLinesPlugin implements ShaderPlugin {
+    name: string;
+    fragmentShader: string;
+    uniforms: any;
+    private speed;
+    constructor(config: ContourLinesConfig);
+    onRender(dt: number): void;
+}

package/dist/lib/plugins/DreamyBokehPlugin.d.ts

@@ -0,0 +1,30 @@
+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;
+    colorB?: string;
+    colorC?: string;
+    /** Bokeh density multiplier (0..3) */
+    density?: number;
+    /** Bokeh size multiplier (0.5..2) */
+    size?: number;
+    /** Edge softness / blur multiplier (0.5..2) */
+    blur?: number;
+    /** Motion speed */
+    speed?: number;
+    /** Vignette strength (0..1) */
+    vignette?: number;
+    /** Grain strength (0..0.15) */
+    grainAmount?: number;
+};
+export declare class DreamyBokehPlugin implements ShaderPlugin {
+    name: string;
+    fragmentShader: string;
+    uniforms: any;
+    private speed;
+    constructor(config: DreamyBokehConfig);
+    onRender(dt: number): void;
+}

package/dist/lib/plugins/GradientPlugin.d.ts

@@ -0,0 +1,60 @@
+import { ShaderPlugin } from '../core/types';
+export type GradientEasing = 'linear' | 'smoothstep' | 'easeInOutQuad' | 'easeInOutCubic';
+export type GradientMotionMode = 'none' | 'path' | 'random';
+export type GradientMotionBounds = {
+    minX: number;
+    maxX: number;
+    minY: number;
+    maxY: number;
+};
+export type GradientMotion = {
+    /**
+     * - "none": static point (default)
+     * - "path": moves between points in `path`
+     * - "random": picks random targets and eases between them
+     */
+    mode?: GradientMotionMode;
+    /** Waypoints for "path" mode. */
+    path?: Array<{
+        x: number;
+        y: number;
+    }>;
+    /** Seconds to move from start -> target. Default 3.0 */
+    duration?: number;
+    /** Easing curve for interpolation. Default "smoothstep" */
+    easing?: GradientEasing;
+    /**
+     * Bounds for clamping/random target generation. Defaults to [-1..1] in both axes.
+     * (These are in the same -1..1 coordinate space as `x`/`y`.)
+     */
+    bounds?: Partial<GradientMotionBounds>;
+    /**
+     * Random mode only: if > 0, choose random targets within this radius around the point's
+     * base `x`/`y` (then clamp to bounds). If omitted/0, choose targets anywhere in bounds.
+     */
+    randomRadius?: number;
+};
+export type GradientPoint = {
+    x: number;
+    y: number;
+    colors: string[];
+    speed?: number;
+    motion?: GradientMotion;
+};
+export type GradientPluginOptions = {
+    /** Defaults applied to any point that doesn't specify a `motion` field. */
+    defaultMotion?: GradientMotion;
+};
+export declare class GradientPlugin implements ShaderPlugin {
+    #private;
+    name: string;
+    private static MAX_POINTS;
+    fragmentShader: string;
+    uniforms: any;
+    private pointsConfig;
+    private colorStates;
+    private motionStates;
+    private defaultMotion;
+    constructor(points: GradientPoint[], options?: GradientPluginOptions);
+    onRender(dt: number): void;
+}

package/dist/lib/plugins/GrainyFogPlugin.d.ts

@@ -0,0 +1,21 @@
+import { ShaderPlugin } from '../core/types';
+export type GrainyFogConfig = {
+    firstColor: string;
+    secondColor: string;
+    backgroundColor: string;
+    grainAmount?: number;
+    speed?: number;
+    scale?: number;
+    octaves?: number;
+    lacunarity?: number;
+    gain?: number;
+    contrast?: number;
+};
+export declare class GrainyFogPlugin implements ShaderPlugin {
+    name: string;
+    fragmentShader: string;
+    uniforms: any;
+    private speed;
+    constructor(config: GrainyFogConfig);
+    onRender(dt: number): void;
+}

package/dist/lib/plugins/InkWashPlugin.d.ts

@@ -0,0 +1,29 @@
+import { ShaderPlugin } from '../core/types';
+export type InkWashConfig = {
+    /** Paper/background color */
+    paperColor: string;
+    /** Ink/pigment color */
+    inkColor: string;
+    /** Overall pattern scale */
+    scale?: number;
+    /** Motion speed */
+    speed?: number;
+    /** Flow / warping amount */
+    flow?: number;
+    /** Contrast / punch of ink */
+    contrast?: number;
+    /** Granulation (pigment clumping) */
+    granulation?: number;
+    /** Vignette (0..1) */
+    vignette?: number;
+    /** Grain strength */
+    grainAmount?: number;
+};
+export declare class InkWashPlugin implements ShaderPlugin {
+    name: string;
+    fragmentShader: string;
+    uniforms: any;
+    private speed;
+    constructor(config: InkWashConfig);
+    onRender(dt: number): void;
+}

package/dist/lib/plugins/LiquidOrbPlugin.d.ts

@@ -0,0 +1,20 @@
+import { ShaderPlugin } from '../core/types';
+export type LiquidOrbConfig = {
+    color: string;
+    backgroundColor: string;
+    count?: number;
+    speed?: number;
+    gooeyness?: number;
+    edgeSoftness?: number;
+};
+export declare class LiquidOrbPlugin implements ShaderPlugin {
+    name: string;
+    private static MAX_ORBS;
+    fragmentShader: string;
+    uniforms: any;
+    private orbs;
+    private orbData;
+    private speedMultiplier;
+    constructor(config: LiquidOrbConfig);
+    onRender(dt: number): void;
+}

package/dist/lib/plugins/RetroGridPlugin.d.ts

@@ -0,0 +1,12 @@
+import { ShaderPlugin } from '../core/types';
+export type RetroGridConfig = {
+    gridColor: string;
+    backgroundColor: string;
+    speed?: number;
+};
+export declare class RetroGridPlugin implements ShaderPlugin {
+    name: string;
+    fragmentShader: string;
+    uniforms: any;
+    constructor(config: RetroGridConfig);
+}

package/dist/lib/plugins/SoftStarfieldPlugin.d.ts

@@ -0,0 +1,30 @@
+import { ShaderPlugin } from '../core/types';
+export type SoftStarfieldConfig = {
+    /** Background gradient bottom/top */
+    backgroundBottom: string;
+    backgroundTop: string;
+    /** Star color (usually near-white) */
+    starColor?: string;
+    /** Star density multiplier */
+    density?: number;
+    /** Star size multiplier */
+    size?: number;
+    /** Twinkle amount */
+    twinkle?: number;
+    /** Nebula tint */
+    nebulaColor?: string;
+    /** Nebula strength */
+    nebula?: number;
+    /** Motion speed */
+    speed?: number;
+    /** Grain 0.. */
+    grainAmount?: number;
+};
+export declare class SoftStarfieldPlugin implements ShaderPlugin {
+    name: string;
+    fragmentShader: string;
+    uniforms: any;
+    private speed;
+    constructor(config: SoftStarfieldConfig);
+    onRender(dt: number): void;
+}

package/dist/lib/plugins/StainedGlassPlugin.d.ts

@@ -0,0 +1,51 @@
+import { ShaderPlugin } from '../core/types';
+export type StainedGlassConfig = {
+    /** Background behind the glass (shows through a bit) */
+    backgroundColor: string;
+    /** Lead/edge color */
+    leadColor?: string;
+    /** Palette colors for glass cells */
+    colorA?: string;
+    colorB?: string;
+    colorC?: string;
+    colorD?: string;
+    /** Cell scale */
+    scale?: number;
+    /**
+     * Pattern variant (changes the underlying coordinate transform).
+     * - 0: classic
+     * - 1: crystal (anisotropic)
+     * - 2: radial-ish twist
+     */
+    variant?: 0 | 1 | 2;
+    /** Random seed (any number). Change this to get a different layout. */
+    seed?: number;
+    /**
+     * Site jitter 0..1
+     * - 0 => very regular cells
+     * - 1 => fully random Voronoi sites
+     */
+    jitter?: number;
+    /** Rotate the pattern in radians */
+    rotation?: number;
+    /** Edge thickness */
+    edgeWidth?: number;
+    /** Edge sharpness (higher = crisper lines) */
+    edgeSharpness?: number;
+    /** Glow along edges */
+    edgeGlow?: number;
+    /** Warp amount (0..1.5) */
+    distortion?: number;
+    /** Motion speed */
+    speed?: number;
+    /** Grain */
+    grainAmount?: number;
+};
+export declare class StainedGlassPlugin implements ShaderPlugin {
+    name: string;
+    fragmentShader: string;
+    uniforms: any;
+    private speed;
+    constructor(config: StainedGlassConfig);
+    onRender(dt: number): void;
+}

package/dist/lib/plugins/index.d.ts

@@ -0,0 +1,11 @@
+export * from './GradientPlugin';
+export * from './GrainyFogPlugin';
+export * from './RetroGridPlugin';
+export * from './LiquidOrbPlugin';
+export * from './CausticsPlugin';
+export * from './AuroraWavesPlugin';
+export * from './SoftStarfieldPlugin';
+export * from './ContourLinesPlugin';
+export * from './DreamyBokehPlugin';
+export * from './InkWashPlugin';
+export * from './StainedGlassPlugin';