@multiplekex/shallot 0.1.9 → 0.1.10

package/src/extras/gradient/index.ts

@@ -0,0 +1,1050 @@
+import { MAX_ENTITIES, resource } from "../../core";
+import { setTraits, type FieldAccessor } from "../../core/component";
+import type { Plugin, State, System } from "../../core";
+import { Compute, type ComputeNode, type ExecutionContext } from "../../standard/compute";
+import { Pass } from "../../standard/render/pass";
+
+export type PhysicsConfig = {
+    springConstant: number;
+    damping: number;
+    bounds: { min: number; max: number };
+    targetThreshold: number;
+};
+
+export const DEFAULT_PHYSICS_CONFIG: PhysicsConfig = {
+    springConstant: 0.0002,
+    damping: 0.95,
+    bounds: { min: -20, max: 120 },
+    targetThreshold: 5,
+};
+
+export type Bubble = {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    targetX: number;
+    targetY: number;
+    color: string;
+};
+
+export type GradientConfig = {
+    color1: string;
+    color2: string;
+};
+
+export type BubbleConfig = {
+    size: number;
+    blur: number;
+};
+
+export type TextureConfig = {
+    enabled: boolean;
+    fineNoise: number;
+    mediumNoise: number;
+    coarseNoise: number;
+    largeScale: number;
+    fiberIntensity: number;
+    opacity: number;
+};
+
+export type OverlayConfig = {
+    enabled: boolean;
+    color: string;
+};
+
+export const DEFAULT_GRADIENT_CONFIG: GradientConfig = {
+    color1: "#0bff06",
+    color2: "#00a4ae",
+};
+
+export const DEFAULT_BUBBLE_CONFIG: BubbleConfig = {
+    size: 75,
+    blur: 10,
+};
+
+export const DEFAULT_TEXTURE_CONFIG: TextureConfig = {
+    enabled: true,
+    fineNoise: 0.2,
+    mediumNoise: 0.2,
+    coarseNoise: 0.1,
+    largeScale: 0.35,
+    fiberIntensity: 0.15,
+    opacity: 0.4,
+};
+
+export const DEFAULT_OVERLAY_CONFIG: OverlayConfig = {
+    enabled: true,
+    color: "#65FD00",
+};
+
+type RGBA = [number, number, number, number];
+type RGB = [number, number, number];
+
+function hashString(str: string): number {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash = hash & hash;
+    }
+    return Math.abs(hash);
+}
+
+function hashStringToU32(str: string): number {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash = hash >>> 0;
+    }
+    return hash;
+}
+
+function createSeededRandom(seed: number): () => number {
+    let value = seed;
+    return () => {
+        value = (value * 9301 + 49297) % 233280;
+        return value / 233280;
+    };
+}
+
+function generateHslColor(random: () => number): string {
+    const h = Math.floor(random() * 360);
+    const s = 70 + Math.floor(random() * 30);
+    const l = 50 + Math.floor(random() * 20);
+    return `hsl(${h}, ${s}%, ${l}%)`;
+}
+
+function generateAngle(key: string): number {
+    const hash = hashString(key + "_gradient");
+    const random = createSeededRandom(hash);
+    return Math.floor(random() * 360);
+}
+
+function generateBubbles(
+    key: string,
+    count: number = 4,
+    physics: PhysicsConfig = DEFAULT_PHYSICS_CONFIG
+): Bubble[] {
+    const seed = hashString(key);
+    const random = createSeededRandom(seed);
+    const range = physics.bounds.max - physics.bounds.min;
+
+    const bubbles: Bubble[] = [];
+    for (let i = 0; i < count; i++) {
+        const x = physics.bounds.min + random() * range;
+        const y = physics.bounds.min + random() * range;
+        const color = generateHslColor(random);
+        const vx = (random() - 0.5) * 0.3;
+        const vy = (random() - 0.5) * 0.3;
+        const targetX = physics.bounds.min + random() * range;
+        const targetY = physics.bounds.min + random() * range;
+        bubbles.push({ x, y, color, vx, vy, targetX, targetY });
+    }
+    return bubbles;
+}
+
+function clamp(value: number, min: number, max: number): number {
+    return Math.min(Math.max(value, min), max);
+}
+
+function distance(x1: number, y1: number, x2: number, y2: number): number {
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+
+function stepBubble(bubble: Bubble, physics: PhysicsConfig = DEFAULT_PHYSICS_CONFIG): Bubble {
+    let { x, y, vx, vy, targetX, targetY, color } = bubble;
+
+    vx += (targetX - x) * physics.springConstant;
+    vy += (targetY - y) * physics.springConstant;
+
+    vx *= physics.damping;
+    vy *= physics.damping;
+
+    x += vx;
+    y += vy;
+
+    x = clamp(x, physics.bounds.min, physics.bounds.max);
+    y = clamp(y, physics.bounds.min, physics.bounds.max);
+
+    return { x, y, vx, vy, targetX, targetY, color };
+}
+
+function updateBubbleTarget(
+    bubble: Bubble,
+    random: () => number,
+    physics: PhysicsConfig = DEFAULT_PHYSICS_CONFIG
+): Bubble {
+    if (distance(bubble.x, bubble.y, bubble.targetX, bubble.targetY) < physics.targetThreshold) {
+        const range = physics.bounds.max - physics.bounds.min;
+        return {
+            ...bubble,
+            targetX: physics.bounds.min + random() * range,
+            targetY: physics.bounds.min + random() * range,
+        };
+    }
+    return bubble;
+}
+
+function bubblesMoved(bubbles: Bubble[], threshold: number = 0.001): boolean {
+    return bubbles.some((b) => Math.abs(b.vx) > threshold || Math.abs(b.vy) > threshold);
+}
+
+export function setBubbleTarget(bubble: Bubble, targetX: number, targetY: number): Bubble {
+    return { ...bubble, targetX, targetY };
+}
+
+export function applyBubbleImpulse(bubble: Bubble, impulseX: number, impulseY: number): Bubble {
+    return { ...bubble, vx: bubble.vx + impulseX, vy: bubble.vy + impulseY };
+}
+
+export function setBubblePosition(bubble: Bubble, x: number, y: number): Bubble {
+    return { ...bubble, x, y };
+}
+
+export function findNearestBubble(bubbles: Bubble[], x: number, y: number): number {
+    if (bubbles.length === 0) return -1;
+
+    let nearestIdx = 0;
+    let nearestDist = distance(bubbles[0].x, bubbles[0].y, x, y);
+
+    for (let i = 1; i < bubbles.length; i++) {
+        const dist = distance(bubbles[i].x, bubbles[i].y, x, y);
+        if (dist < nearestDist) {
+            nearestDist = dist;
+            nearestIdx = i;
+        }
+    }
+
+    return nearestIdx;
+}
+
+export function screenToGradientSpace(
+    screenX: number,
+    screenY: number,
+    canvasWidth: number,
+    canvasHeight: number
+): { x: number; y: number } {
+    return {
+        x: (screenX / canvasWidth) * 100,
+        y: (screenY / canvasHeight) * 100,
+    };
+}
+
+function parseColor(color: string): RGBA {
+    color = color.trim();
+
+    if (color.startsWith("#")) {
+        return parseHexColor(color);
+    }
+
+    if (color.startsWith("rgb")) {
+        return parseRgbColor(color);
+    }
+
+    if (color.startsWith("hsl")) {
+        return parseHslColor(color);
+    }
+
+    if (color === "transparent") {
+        return [0, 0, 0, 0];
+    }
+
+    return [0, 0, 0, 255];
+}
+
+function parseHexColor(hex: string): RGBA {
+    hex = hex.replace("#", "");
+
+    if (hex.length === 3) {
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    }
+
+    if (hex.length === 4) {
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
+    }
+
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) : 255;
+
+    return [r, g, b, a];
+}
+
+function parseRgbColor(rgb: string): RGBA {
+    const match = rgb.match(/rgba?\(([^)]+)\)/);
+    if (!match) return [0, 0, 0, 255];
+
+    const parts = match[1].split(",").map((s) => s.trim());
+    const r = parseInt(parts[0], 10);
+    const g = parseInt(parts[1], 10);
+    const b = parseInt(parts[2], 10);
+    const a = parts[3] !== undefined ? Math.round(parseFloat(parts[3]) * 255) : 255;
+
+    return [r, g, b, a];
+}
+
+function hslToRgb(h: number, s: number, l: number): RGB {
+    h = ((h % 360) + 360) % 360;
+    h /= 360;
+
+    if (s === 0) {
+        const gray = Math.round(l * 255);
+        return [gray, gray, gray];
+    }
+
+    const hue2rgb = (p: number, q: number, t: number): number => {
+        if (t < 0) t += 1;
+        if (t > 1) t -= 1;
+        if (t < 1 / 6) return p + (q - p) * 6 * t;
+        if (t < 1 / 2) return q;
+        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+    };
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+
+    return [
+        Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
+        Math.round(hue2rgb(p, q, h) * 255),
+        Math.round(hue2rgb(p, q, h - 1 / 3) * 255),
+    ];
+}
+
+function parseHslColor(hsl: string): RGBA {
+    const match = hsl.match(/hsla?\(([^)]+)\)/);
+    if (!match) return [0, 0, 0, 255];
+
+    const parts = match[1].split(",").map((s) => s.trim());
+    const h = parseInt(parts[0], 10);
+    const s = parseInt(parts[1], 10) / 100;
+    const l = parseInt(parts[2], 10) / 100;
+    const a = parts[3] !== undefined ? Math.round(parseFloat(parts[3]) * 255) : 255;
+
+    const [r, g, b] = hslToRgb(h, s, l);
+    return [r, g, b, a];
+}
+
+const STRIDE = 16;
+const GradientData = {
+    data: new Float32Array(MAX_ENTITIES * STRIDE),
+};
+
+const seeds = new Map<number, string>();
+const color1s = new Map<number, string>();
+const color2s = new Map<number, string>();
+const overlayColors = new Map<number, string>();
+
+interface GradientProxy extends Array<number>, FieldAccessor {}
+
+function floatProxy(offset: number): GradientProxy {
+    const data = GradientData.data;
+
+    function getValue(eid: number): number {
+        return data[eid * STRIDE + offset];
+    }
+
+    function setValue(eid: number, value: number): void {
+        data[eid * STRIDE + offset] = value;
+    }
+
+    return new Proxy([] as unknown as GradientProxy, {
+        get(_, prop) {
+            if (prop === "get") return getValue;
+            if (prop === "set") return setValue;
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return undefined;
+            return getValue(eid);
+        },
+        set(_, prop, value) {
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return false;
+            setValue(eid, value);
+            return true;
+        },
+    });
+}
+
+interface StringProxy {
+    [eid: number]: string | undefined;
+}
+
+function stringProxy(map: Map<number, string>): StringProxy {
+    return new Proxy({} as StringProxy, {
+        get(_, prop) {
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return undefined;
+            return map.get(eid);
+        },
+        set(_, prop, value) {
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return false;
+            if (value === undefined || value === null) {
+                map.delete(eid);
+            } else {
+                map.set(eid, value);
+            }
+            return true;
+        },
+    });
+}
+
+export const Gradient = {
+    seed: stringProxy(seeds),
+    color1: stringProxy(color1s),
+    color2: stringProxy(color2s),
+    overlayColor: stringProxy(overlayColors),
+    angle: floatProxy(0),
+    enabled: floatProxy(1),
+    bubbleSize: floatProxy(2),
+    bubbleBlur: floatProxy(3),
+    textureEnabled: floatProxy(4),
+    textureOpacity: floatProxy(5),
+    overlayEnabled: floatProxy(6),
+    bubbleCount: floatProxy(7),
+    springConstant: floatProxy(8),
+    damping: floatProxy(9),
+    boundsMin: floatProxy(10),
+    boundsMax: floatProxy(11),
+};
+
+setTraits(Gradient, {
+    defaults: () => ({
+        enabled: 1,
+        bubbleSize: DEFAULT_BUBBLE_CONFIG.size,
+        bubbleBlur: DEFAULT_BUBBLE_CONFIG.blur,
+        textureEnabled: 1,
+        textureOpacity: DEFAULT_TEXTURE_CONFIG.opacity,
+        overlayEnabled: 1,
+        bubbleCount: 4,
+        springConstant: DEFAULT_PHYSICS_CONFIG.springConstant,
+        damping: DEFAULT_PHYSICS_CONFIG.damping,
+        boundsMin: DEFAULT_PHYSICS_CONFIG.bounds.min,
+        boundsMax: DEFAULT_PHYSICS_CONFIG.bounds.max,
+    }),
+    accessors: {
+        angle: Gradient.angle,
+        enabled: Gradient.enabled,
+        bubbleSize: Gradient.bubbleSize,
+        bubbleBlur: Gradient.bubbleBlur,
+        textureEnabled: Gradient.textureEnabled,
+        textureOpacity: Gradient.textureOpacity,
+        overlayEnabled: Gradient.overlayEnabled,
+        bubbleCount: Gradient.bubbleCount,
+        springConstant: Gradient.springConstant,
+        damping: Gradient.damping,
+        boundsMin: Gradient.boundsMin,
+        boundsMax: Gradient.boundsMax,
+    },
+});
+
+export interface GradientState {
+    bubbles: Map<number, Bubble[]>;
+    randoms: Map<number, () => number>;
+    width: number;
+    height: number;
+    compositePipeline: GPURenderPipeline | null;
+    compositeBindGroup: GPUBindGroup | null;
+    compositeBindGroupLayout: GPUBindGroupLayout | null;
+    compositeUniformBuffer: GPUBuffer | null;
+    gradientAngle: number;
+    gradientColor1: [number, number, number, number];
+    gradientColor2: [number, number, number, number];
+    textureSeed: number;
+    textureEnabled: boolean;
+    fineNoise: number;
+    mediumNoise: number;
+    coarseNoise: number;
+    largeScale: number;
+    fiberIntensity: number;
+    textureOpacity: number;
+    overlayColor: [number, number, number, number];
+    bubbleUniformData: Float32Array | null;
+    bubbleRadius: number;
+    blurRadius: number;
+    bubbleCount: number;
+}
+
+export const GradientResource = resource<GradientState>("gradient");
+
+export function clearGradientState(state: State): void {
+    const res = GradientResource.from(state);
+    if (!res) return;
+    res.bubbles.clear();
+    res.randoms.clear();
+}
+
+export function getBubbles(state: State, eid: number): Bubble[] | undefined {
+    const res = GradientResource.from(state);
+    if (!res) return undefined;
+    return res.bubbles.get(eid);
+}
+
+export function setBubbles(state: State, eid: number, bubbles: Bubble[]): void {
+    const res = GradientResource.from(state);
+    if (!res) return;
+    res.bubbles.set(eid, bubbles);
+}
+
+export function updateBubble(
+    state: State,
+    eid: number,
+    index: number,
+    updater: (bubble: Bubble) => Bubble
+): void {
+    const res = GradientResource.from(state);
+    if (!res) return;
+    const bubbles = res.bubbles.get(eid);
+    if (!bubbles || index < 0 || index >= bubbles.length) return;
+    bubbles[index] = updater(bubbles[index]);
+}
+
+const COMPOSITE_SHADER = /* wgsl */ `
+struct CompositeUniforms {
+    overlayColor: vec4f,
+    color1: vec4f,
+    color2: vec4f,
+    b0_pos: vec2f,
+    _b0_pad: vec2f,
+    b0_color: vec4f,
+    b1_pos: vec2f,
+    _b1_pad: vec2f,
+    b1_color: vec4f,
+    b2_pos: vec2f,
+    _b2_pad: vec2f,
+    b2_color: vec4f,
+    b3_pos: vec2f,
+    _b3_pad: vec2f,
+    b3_color: vec4f,
+    textureSeed: u32,
+    textureEnabled: u32,
+    fineNoise: f32,
+    mediumNoise: f32,
+    coarseNoise: f32,
+    largeScale: f32,
+    fiberIntensity: f32,
+    textureOpacity: f32,
+    size: vec2f,
+    angle: f32,
+    bubbleRadius: f32,
+    blurRadius: f32,
+    bubbleCount: u32,
+    _pad: vec2f,
+}
+
+struct VertexOutput {
+    @builtin(position) position: vec4f,
+    @location(0) uv: vec2f,
+}
+
+@vertex
+fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+    var positions = array<vec2f, 6>(
+        vec2f(-1.0, -1.0),
+        vec2f( 1.0, -1.0),
+        vec2f(-1.0,  1.0),
+        vec2f(-1.0,  1.0),
+        vec2f( 1.0, -1.0),
+        vec2f( 1.0,  1.0),
+    );
+
+    var uvs = array<vec2f, 6>(
+        vec2f(0.0, 1.0),
+        vec2f(1.0, 1.0),
+        vec2f(0.0, 0.0),
+        vec2f(0.0, 0.0),
+        vec2f(1.0, 1.0),
+        vec2f(1.0, 0.0),
+    );
+
+    var output: VertexOutput;
+    output.position = vec4f(positions[vertexIndex], 0.0, 1.0);
+    output.uv = uvs[vertexIndex];
+    return output;
+}
+
+@group(0) @binding(0) var<uniform> uniforms: CompositeUniforms;
+
+fn pcgHash(input: u32) -> u32 {
+    var state = input * 747796405u + 2891336453u;
+    var word = ((state >> ((state >> 28u) + 4u)) ^ state) * 277803737u;
+    return (word >> 22u) ^ word;
+}
+
+fn noise3(seed: u32) -> vec3f {
+    let h = pcgHash(seed);
+    return vec3f(
+        f32(h & 0x3FFu) / 1023.0,
+        f32((h >> 10u) & 0x3FFu) / 1023.0,
+        f32((h >> 20u) & 0x3FFu) / 1023.0
+    );
+}
+
+fn generateTexture(uv: vec2f) -> f32 {
+    if (uniforms.textureEnabled == 0u) { return 0.0; }
+
+    let x = uv.x * uniforms.size.x;
+    let y = uv.y * uniforms.size.y;
+    let pixelSeed = pcgHash(uniforms.textureSeed ^ (u32(x) + u32(y) * 65536u));
+    let noise = noise3(pixelSeed);
+
+    let fineNoise = noise.x * uniforms.fineNoise;
+    let mediumNoise = noise.y * uniforms.mediumNoise;
+    let coarseNoise = noise.z * uniforms.coarseNoise;
+
+    let largeScaleX = sin(x * 0.005) * cos(y * 0.003);
+    let largeScaleY = cos(x * 0.003) * sin(y * 0.007);
+    let largeScale = (largeScaleX + largeScaleY) * uniforms.largeScale;
+
+    let fiberX = sin(x * 0.02) * uniforms.fiberIntensity;
+    let fiberY = sin(y * 0.015) * uniforms.fiberIntensity;
+    let fiber = (fiberX + fiberY) * 0.1;
+
+    return clamp(fineNoise + mediumNoise + coarseNoise + largeScale + fiber, 0.0, 1.0) * uniforms.textureOpacity;
+}
+
+fn lum(c: vec3f) -> f32 {
+    return 0.3 * c.r + 0.59 * c.g + 0.11 * c.b;
+}
+
+fn clipColor(c: vec3f) -> vec3f {
+    let l = lum(c);
+    let n = min(min(c.r, c.g), c.b);
+    let x = max(max(c.r, c.g), c.b);
+
+    var result = c;
+    if (n < 0.0) {
+        result = vec3f(l) + ((c - vec3f(l)) * l) / (l - n);
+    }
+    if (x > 1.0) {
+        result = vec3f(l) + ((c - vec3f(l)) * (1.0 - l)) / (x - l);
+    }
+    return result;
+}
+
+fn setLum(c: vec3f, l: f32) -> vec3f {
+    let d = l - lum(c);
+    return clipColor(c + vec3f(d));
+}
+
+fn sat(c: vec3f) -> f32 {
+    return max(max(c.r, c.g), c.b) - min(min(c.r, c.g), c.b);
+}
+
+fn setSat(c: vec3f, s: f32) -> vec3f {
+    let cmin = min(min(c.r, c.g), c.b);
+    let cmax = max(max(c.r, c.g), c.b);
+
+    if (cmax == cmin) {
+        return vec3f(0.0);
+    }
+
+    // Sort channels and apply saturation
+    var result = vec3f(0.0);
+    let range = cmax - cmin;
+
+    // Apply proportional saturation to each channel
+    result.r = (c.r - cmin) * s / range;
+    result.g = (c.g - cmin) * s / range;
+    result.b = (c.b - cmin) * s / range;
+
+    return result;
+}
+
+fn hueBlend(base: vec3f, blend: vec3f) -> vec3f {
+    // W3C CSS Compositing spec: Hue = SetLum(SetSat(Cs, Sat(Cb)), Lum(Cb))
+    let withSat = setSat(blend, sat(base));
+    return setLum(withSat, lum(base));
+}
+
+fn overlayBlend(base: f32, blend: f32) -> f32 {
+    if (base < 0.5) {
+        return 2.0 * base * blend;
+    }
+    return 1.0 - 2.0 * (1.0 - base) * (1.0 - blend);
+}
+
+fn differenceBlend(base: vec3f, blend: vec3f) -> vec3f {
+    return abs(base - blend);
+}
+
+fn alphaOver(dst: vec4f, src: vec4f) -> vec4f {
+    if (src.a <= 0.001) { return dst; }
+    let outAlpha = src.a + dst.a * (1.0 - src.a);
+    if (outAlpha <= 0.0) { return dst; }
+    return vec4f(
+        (src.rgb * src.a + dst.rgb * dst.a * (1.0 - src.a)) / outAlpha,
+        outAlpha
+    );
+}
+
+fn processBubble(pixelPos: vec2f, pos: vec2f, color: vec4f, twoSigmaSq: f32) -> vec4f {
+    let bubbleCenter = pos * uniforms.size;
+    let dist = distance(pixelPos, bubbleCenter);
+    let alpha = color.a * exp(-(dist * dist) / twoSigmaSq);
+    return vec4f(color.rgb, alpha);
+}
+
+fn generateBubbles(uv: vec2f) -> vec4f {
+    let pixelPos = uv * uniforms.size;
+    let effectiveRadius = uniforms.bubbleRadius + uniforms.blurRadius;
+    let sigma = effectiveRadius / 3.0;
+    let twoSigmaSq = 2.0 * sigma * sigma;
+
+    var result = vec4f(0.0);
+
+    if (uniforms.bubbleCount > 0u) {
+        let b0 = processBubble(pixelPos, uniforms.b0_pos, uniforms.b0_color, twoSigmaSq);
+        result = alphaOver(result, b0);
+    }
+    if (uniforms.bubbleCount > 1u) {
+        let b1 = processBubble(pixelPos, uniforms.b1_pos, uniforms.b1_color, twoSigmaSq);
+        result = alphaOver(result, b1);
+    }
+    if (uniforms.bubbleCount > 2u) {
+        let b2 = processBubble(pixelPos, uniforms.b2_pos, uniforms.b2_color, twoSigmaSq);
+        result = alphaOver(result, b2);
+    }
+    if (uniforms.bubbleCount > 3u) {
+        let b3 = processBubble(pixelPos, uniforms.b3_pos, uniforms.b3_color, twoSigmaSq);
+        result = alphaOver(result, b3);
+    }
+
+    return result;
+}
+
+fn generateGradient(uv: vec2f) -> vec3f {
+    let rad = uniforms.angle * 3.14159265 / 180.0;
+    let cos_a = cos(rad);
+    let sin_a = sin(rad);
+
+    let cx = uniforms.size.x / 2.0;
+    let cy = uniforms.size.y / 2.0;
+    let size = min(uniforms.size.x, uniforms.size.y);
+
+    let px = uv.x * uniforms.size.x;
+    let py = uv.y * uniforms.size.y;
+    let dx = px - cx;
+    let dy = py - cy;
+
+    let projected = (dx * cos_a + dy * sin_a) / size + 0.5;
+    let t = clamp(projected, 0.0, 1.0);
+
+    return mix(uniforms.color1.rgb, uniforms.color2.rgb, t);
+}
+
+@fragment
+fn fs(input: VertexOutput) -> @location(0) vec4f {
+    let gradient = generateGradient(input.uv);
+    let bubble = generateBubbles(input.uv);
+
+    var result = gradient;
+
+    let bubbleAlpha = bubble.a;
+    if (bubbleAlpha > 0.0) {
+        let blended = hueBlend(result, bubble.rgb);
+        result = mix(result, blended, bubbleAlpha);
+    }
+
+    let textureAlpha = generateTexture(input.uv);
+    if (textureAlpha > 0.0) {
+        let blended = vec3f(
+            overlayBlend(result.r, 1.0),
+            overlayBlend(result.g, 1.0),
+            overlayBlend(result.b, 1.0)
+        );
+        result = mix(result, blended, textureAlpha);
+    }
+
+    let overlayAlpha = uniforms.overlayColor.a;
+    if (overlayAlpha > 0.0) {
+        let blended = differenceBlend(result, uniforms.overlayColor.rgb);
+        result = mix(result, blended, overlayAlpha);
+    }
+
+    return vec4f(result, 1.0);
+}
+`;
+
+function createCompositeNode(res: GradientState): ComputeNode {
+    return {
+        id: "gradient",
+        pass: Pass.Opaque,
+        inputs: [],
+        outputs: [{ id: "scene", access: "write" }],
+
+        execute(ctx: ExecutionContext) {
+            if (res.width === 0 || res.height === 0) return;
+            if (!res.bubbleUniformData) return;
+
+            if (!res.compositeUniformBuffer) {
+                res.compositeUniformBuffer = ctx.device.createBuffer({
+                    label: "composite-uniforms",
+                    size: 240,
+                    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+                });
+            }
+
+            if (!res.compositeBindGroupLayout) {
+                res.compositeBindGroupLayout = ctx.device.createBindGroupLayout({
+                    entries: [
+                        {
+                            binding: 0,
+                            visibility: GPUShaderStage.FRAGMENT,
+                            buffer: { type: "uniform" },
+                        },
+                    ],
+                });
+            }
+
+            if (!res.compositePipeline) {
+                const module = ctx.device.createShaderModule({ code: COMPOSITE_SHADER });
+                res.compositePipeline = ctx.device.createRenderPipeline({
+                    layout: ctx.device.createPipelineLayout({
+                        bindGroupLayouts: [res.compositeBindGroupLayout],
+                    }),
+                    vertex: { module, entryPoint: "vs" },
+                    fragment: {
+                        module,
+                        entryPoint: "fs",
+                        targets: [{ format: ctx.format }],
+                    },
+                });
+            }
+
+            if (!res.compositeBindGroup) {
+                res.compositeBindGroup = ctx.device.createBindGroup({
+                    layout: res.compositeBindGroupLayout,
+                    entries: [{ binding: 0, resource: { buffer: res.compositeUniformBuffer } }],
+                });
+            }
+
+            const uniformData = new Float32Array(60);
+
+            uniformData[0] = res.overlayColor[0];
+            uniformData[1] = res.overlayColor[1];
+            uniformData[2] = res.overlayColor[2];
+            uniformData[3] = res.overlayColor[3];
+            uniformData[4] = res.gradientColor1[0];
+            uniformData[5] = res.gradientColor1[1];
+            uniformData[6] = res.gradientColor1[2];
+            uniformData[7] = res.gradientColor1[3];
+            uniformData[8] = res.gradientColor2[0];
+            uniformData[9] = res.gradientColor2[1];
+            uniformData[10] = res.gradientColor2[2];
+            uniformData[11] = res.gradientColor2[3];
+
+            for (let i = 0; i < 4; i++) {
+                const srcOffset = i * 8;
+                const dstOffset = 12 + i * 8;
+                uniformData[dstOffset + 0] = res.bubbleUniformData[srcOffset + 0];
+                uniformData[dstOffset + 1] = res.bubbleUniformData[srcOffset + 1];
+                uniformData[dstOffset + 4] = res.bubbleUniformData[srcOffset + 4];
+                uniformData[dstOffset + 5] = res.bubbleUniformData[srcOffset + 5];
+                uniformData[dstOffset + 6] = res.bubbleUniformData[srcOffset + 6];
+                uniformData[dstOffset + 7] = res.bubbleUniformData[srcOffset + 7];
+            }
+
+            const u32View = new Uint32Array(uniformData.buffer);
+            u32View[44] = res.textureSeed;
+            u32View[45] = res.textureEnabled ? 1 : 0;
+            uniformData[46] = res.fineNoise;
+            uniformData[47] = res.mediumNoise;
+            uniformData[48] = res.coarseNoise;
+            uniformData[49] = res.largeScale;
+            uniformData[50] = res.fiberIntensity;
+            uniformData[51] = res.textureOpacity;
+            uniformData[52] = res.width;
+            uniformData[53] = res.height;
+            uniformData[54] = res.gradientAngle;
+            uniformData[55] = res.bubbleRadius;
+            uniformData[56] = res.blurRadius;
+            u32View[57] = res.bubbleCount;
+
+            ctx.queue.writeBuffer(res.compositeUniformBuffer, 0, uniformData);
+
+            const pass = ctx.encoder.beginRenderPass({
+                colorAttachments: [
+                    {
+                        view: ctx.canvasView,
+                        loadOp: "clear",
+                        storeOp: "store",
+                        clearValue: { r: 0, g: 0, b: 0, a: 1 },
+                    },
+                ],
+            });
+
+            pass.setPipeline(res.compositePipeline);
+            pass.setBindGroup(0, res.compositeBindGroup);
+            pass.draw(6);
+            pass.end();
+        },
+    };
+}
+
+export const GradientSystem: System = {
+    group: "simulation",
+
+    update(state: State) {
+        const compute = Compute.from(state);
+        const res = GradientResource.from(state);
+        if (!compute || !res) return;
+
+        const canvas = state.canvas;
+        if (!canvas) return;
+
+        if (res.width !== canvas.width || res.height !== canvas.height) {
+            res.width = canvas.width;
+            res.height = canvas.height;
+        }
+
+        for (const eid of state.query([Gradient])) {
+            if (!Gradient.enabled[eid]) continue;
+
+            const bubbleCount = Math.min(
+                4,
+                Math.max(1, Math.floor(Gradient.bubbleCount[eid] || 4))
+            );
+            const physics: PhysicsConfig = {
+                springConstant:
+                    Gradient.springConstant[eid] || DEFAULT_PHYSICS_CONFIG.springConstant,
+                damping: Gradient.damping[eid] || DEFAULT_PHYSICS_CONFIG.damping,
+                bounds: {
+                    min: Gradient.boundsMin[eid] ?? DEFAULT_PHYSICS_CONFIG.bounds.min,
+                    max: Gradient.boundsMax[eid] ?? DEFAULT_PHYSICS_CONFIG.bounds.max,
+                },
+                targetThreshold: DEFAULT_PHYSICS_CONFIG.targetThreshold,
+            };
+
+            let b = res.bubbles.get(eid);
+            const seed = Gradient.seed[eid] || String(eid);
+
+            if (!b || b.length !== bubbleCount) {
+                b = generateBubbles(seed, bubbleCount, physics);
+                res.bubbles.set(eid, b);
+                res.randoms.set(eid, createSeededRandom(hashString(seed + "-runtime")));
+            }
+
+            const random = res.randoms.get(eid)!;
+            for (let i = 0; i < b.length; i++) {
+                b[i] = updateBubbleTarget(stepBubble(b[i], physics), random, physics);
+            }
+
+            if (!bubblesMoved(b)) continue;
+
+            res.bubbleCount = bubbleCount;
+            const angle = Gradient.angle[eid] || generateAngle(seed);
+            const gradientColor1 = Gradient.color1[eid] || DEFAULT_GRADIENT_CONFIG.color1;
+            const gradientColor2 = Gradient.color2[eid] || DEFAULT_GRADIENT_CONFIG.color2;
+
+            const color1 = parseColor(gradientColor1);
+            const color2 = parseColor(gradientColor2);
+            res.gradientAngle = angle;
+            res.gradientColor1 = [
+                color1[0] / 255,
+                color1[1] / 255,
+                color1[2] / 255,
+                color1[3] / 255,
+            ];
+            res.gradientColor2 = [
+                color2[0] / 255,
+                color2[1] / 255,
+                color2[2] / 255,
+                color2[3] / 255,
+            ];
+
+            const bubbleSize = Gradient.bubbleSize[eid] ?? DEFAULT_BUBBLE_CONFIG.size;
+            const bubbleBlur = Gradient.bubbleBlur[eid] ?? DEFAULT_BUBBLE_CONFIG.blur;
+
+            const bubbleUniformData = new Float32Array(4 * 8);
+            for (let i = 0; i < b.length; i++) {
+                const offset = i * 8;
+                bubbleUniformData[offset + 0] = b[i].x / 100;
+                bubbleUniformData[offset + 1] = b[i].y / 100;
+                const color = parseColor(b[i].color);
+                bubbleUniformData[offset + 4] = color[0] / 255;
+                bubbleUniformData[offset + 5] = color[1] / 255;
+                bubbleUniformData[offset + 6] = color[2] / 255;
+                bubbleUniformData[offset + 7] = color[3] / 255;
+            }
+            res.bubbleUniformData = bubbleUniformData;
+            res.bubbleRadius = (bubbleSize / 100) * Math.min(res.width, res.height);
+            res.blurRadius = (bubbleBlur / 100) * Math.min(res.width, res.height);
+
+            const textureEnabled = Gradient.textureEnabled[eid] !== 0;
+            res.textureEnabled = textureEnabled;
+            if (textureEnabled) {
+                res.textureSeed = hashStringToU32(seed + "_texture");
+                res.textureOpacity = Gradient.textureOpacity[eid] || DEFAULT_TEXTURE_CONFIG.opacity;
+                res.fineNoise = DEFAULT_TEXTURE_CONFIG.fineNoise;
+                res.mediumNoise = DEFAULT_TEXTURE_CONFIG.mediumNoise;
+                res.coarseNoise = DEFAULT_TEXTURE_CONFIG.coarseNoise;
+                res.largeScale = DEFAULT_TEXTURE_CONFIG.largeScale;
+                res.fiberIntensity = DEFAULT_TEXTURE_CONFIG.fiberIntensity;
+            }
+
+            const overlayEnabled = Gradient.overlayEnabled[eid] !== 0;
+            if (overlayEnabled) {
+                const overlayColor = parseColor(
+                    Gradient.overlayColor[eid] || DEFAULT_OVERLAY_CONFIG.color
+                );
+                res.overlayColor = [
+                    overlayColor[0] / 255,
+                    overlayColor[1] / 255,
+                    overlayColor[2] / 255,
+                    overlayColor[3] / 255,
+                ];
+            } else {
+                res.overlayColor = [0, 0, 0, 0];
+            }
+        }
+    },
+};
+
+export { hashString, createSeededRandom, generateBubbles, stepBubble, parseColor };
+
+export const GradientPlugin: Plugin = {
+    systems: [GradientSystem],
+    components: { Gradient },
+
+    initialize(state: State) {
+        const gradientState: GradientState = {
+            bubbles: new Map(),
+            randoms: new Map(),
+            width: 0,
+            height: 0,
+            compositePipeline: null,
+            compositeBindGroup: null,
+            compositeBindGroupLayout: null,
+            compositeUniformBuffer: null,
+            gradientAngle: 0,
+            gradientColor1: [0, 0, 0, 1],
+            gradientColor2: [0, 0, 0, 1],
+            textureSeed: 0,
+            textureEnabled: true,
+            fineNoise: DEFAULT_TEXTURE_CONFIG.fineNoise,
+            mediumNoise: DEFAULT_TEXTURE_CONFIG.mediumNoise,
+            coarseNoise: DEFAULT_TEXTURE_CONFIG.coarseNoise,
+            largeScale: DEFAULT_TEXTURE_CONFIG.largeScale,
+            fiberIntensity: DEFAULT_TEXTURE_CONFIG.fiberIntensity,
+            textureOpacity: DEFAULT_TEXTURE_CONFIG.opacity,
+            overlayColor: [0, 0, 0, 0],
+            bubbleUniformData: null,
+            bubbleRadius: 0,
+            blurRadius: 0,
+            bubbleCount: 4,
+        };
+
+        state.setResource(GradientResource, gradientState);
+
+        const compute = Compute.from(state);
+        if (compute) {
+            compute.graph.add(createCompositeNode(gradientState));
+        }
+    },
+};