chroma-noise 0.0.1 → 0.0.3

package/README.md

@@ -1,12 +1,10 @@
 # chroma-noise
 
-Gradient noise for Svelte 5.
+Gradient noise for Svelte. With warp and grain.
 
-At an early stage of development.
+### Site & playground
+https://chromanoise.netlify.app
 
 ### Roadmap
 - [] docs
-- [] optimization
-
-### Site & playground
-https://chromanoise.netlify.app
+- [] fix grain size option

package/dist/Gradient.svelte

@@ -1,221 +1,168 @@
-<script lang="ts">
-	import vert from './gradient.vert.glsl?raw';
-	import frag from './gradient.frag.glsl?raw';
-	import { onMount, onDestroy } from 'svelte';
-	import { hexToRgb } from 'ventoui-utils';
-	import { browser } from '$app/environment';
-
-	interface Props {
-		points?: { color: string; x: number; y: number }[];
-		radius?: number;
-		timeAmount?: number;
-		intensity?: number;
-		warpMode?: number;
-		warpSize?: number;
-		warpAmount?: number;
-		grainAmount?: number;
-		grainSize?: number;
-		seed?: number;
-	}
-
-	let {
-		points = [],
-		radius = 0.6,
-		timeAmount = 1.0,
-		intensity = 1.0,
-		warpMode = 0,
-		warpSize = 1.0,
-		warpAmount = 0.0,
-		grainAmount = 0.0,
-		grainSize = 1.0,
-		seed = Math.random()
-	}: Props = $props();
-
-	export const MAX_POINTS = 12;
-
-	let canvas: HTMLCanvasElement | undefined = $state();
-	let gl: WebGLRenderingContext | undefined = $state();
-	let program: WebGLProgram | undefined = $state();
-
-	let u_resolution: WebGLUniformLocation;
-	let u_time: WebGLUniformLocation;
-	let u_count: WebGLUniformLocation;
-	let u_colors: WebGLUniformLocation;
-	let u_positions: WebGLUniformLocation;
-	let u_radius: WebGLUniformLocation;
-	let u_intensity: WebGLUniformLocation;
-	let u_warpMode: WebGLUniformLocation;
-	let u_warpSize: WebGLUniformLocation;
-	let u_warpAmount: WebGLUniformLocation;
-	let u_grainAmount : WebGLUniformLocation;
-	let u_grainSize : WebGLUniformLocation;
-	let u_grainAnimate : WebGLUniformLocation;
-	let u_seed: WebGLUniformLocation;
-
-	let frameId: number;
-	let running = true;
-
-	let lastTime = 0;
-	let animTime = 0;
-
-	function createShader(gl: WebGLRenderingContext, type: number, src: string) {
-		const s = gl.createShader(type)!;
-		gl.shaderSource(s, src);
-		gl.compileShader(s);
-		if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
-			console.error(gl.getShaderInfoLog(s));
-			gl.deleteShader(s);
-			throw new Error('Shader compile error');
-		}
-		return s;
-	}
-	function createProgram(gl: WebGLRenderingContext, vsSrc: string, fsSrc: string) {
-		const vs = createShader(gl, gl.VERTEX_SHADER, vsSrc);
-		const fs = createShader(gl, gl.FRAGMENT_SHADER, fsSrc);
-		const p = gl.createProgram()!;
-		gl.attachShader(p, vs);
-		gl.attachShader(p, fs);
-		gl.linkProgram(p);
-		if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
-			console.error(gl.getProgramInfoLog(p));
-			gl.deleteProgram(p);
-			throw new Error('Program link error');
-		}
-		return p;
-	}
-
-	function resizeCanvasToDisplaySize() {
-		if (!canvas) return false;
-		const dpr = Math.max(1, window.devicePixelRatio || 1);
-		const width = Math.floor(canvas.clientWidth * dpr);
-		const height = Math.floor(canvas.clientHeight * dpr);
-		if (canvas.width !== width || canvas.height !== height) {
-			canvas.width = width;
-			canvas.height = height;
-			return true;
-		}
-		return false;
-	}
-
-	function updateUniforms() {
-		if (!gl || !program || !canvas) return;
-		gl.useProgram(program);
-		gl.uniform2f(u_resolution, canvas.width, canvas.height);
-
-		const colorsArr = new Float32Array(MAX_POINTS * 3);
-		const posArr = new Float32Array(MAX_POINTS * 2);
-		for (let i = 0; i < points.length && i < MAX_POINTS; i++) {
-			const [r, g, b] = hexToRgb(points[i].color);
-			colorsArr[i * 3] = r;
-			colorsArr[i * 3 + 1] = g;
-			colorsArr[i * 3 + 2] = b;
-			posArr[i * 2] = points[i].x;
-			posArr[i * 2 + 1] = points[i].y;
-		}
-
-		gl.uniform3fv(u_colors, colorsArr);
-		gl.uniform2fv(u_positions, posArr);
-		gl.uniform1i(u_count, Math.min(points.length, MAX_POINTS));
-		gl.uniform1f(u_radius, radius);
-		gl.uniform1f(u_intensity, intensity);
-		gl.uniform1i(u_warpMode, warpMode);
-		gl.uniform1f(u_warpSize, warpSize);
-		gl.uniform1f(u_warpAmount, warpAmount);
-		gl.uniform1f(u_grainAmount, grainAmount);
-		gl.uniform1f(u_grainSize, grainSize);
-		gl.uniform1f(u_seed, seed);
-	}
-
-	function render(time: number) {
-		if (!gl || !program || !canvas) return;
-		if (lastTime === 0) lastTime = time;
-		const dt = (time - lastTime) * 0.001;
-		lastTime = time;
-		animTime += dt * timeAmount;
-
-		resizeCanvasToDisplaySize();
-		gl.viewport(0, 0, canvas.width, canvas.height);
-		gl.clearColor(0, 0, 0, 0);
-		gl.clear(gl.COLOR_BUFFER_BIT);
-
-		gl.useProgram(program);
-		if (u_time) gl.uniform1f(u_time, animTime);
-
-		updateUniforms();
-		gl.drawArrays(gl.TRIANGLES, 0, 6);
-
-		if (running) frameId = requestAnimationFrame(render);
-	}
-
-	onMount(() => {
-		if (!canvas || !browser) return;
-		gl = canvas.getContext('webgl', { antialias: true })!;
-		if (!gl) {
-			console.warn('WebGL not supported');
-			return;
-		}
-
-		program = createProgram(gl, vert, frag);
-		gl.useProgram(program);
-
-		const verts = new Float32Array([-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]);
-		const vbo = gl.createBuffer();
-		gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
-		gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW);
-		const a_pos = gl.getAttribLocation(program, 'a_pos');
-		gl.enableVertexAttribArray(a_pos);
-		gl.vertexAttribPointer(a_pos, 2, gl.FLOAT, false, 0, 0);
-
-		// @ts-ignore
-		u_resolution = gl.getUniformLocation(program, 'u_resolution');
-		// @ts-ignore
-		u_time = gl.getUniformLocation(program, 'u_time');
-		// @ts-ignore
-		u_count = gl.getUniformLocation(program, 'u_count');
-		// @ts-ignore
-		u_colors = gl.getUniformLocation(program, 'u_colors');
-		// @ts-ignore
-		u_positions = gl.getUniformLocation(program, 'u_positions');
-		// @ts-ignore
-		u_radius = gl.getUniformLocation(program, 'u_radius');
-		// @ts-ignore
-		u_intensity = gl.getUniformLocation(program, 'u_intensity');
-		// @ts-ignore
-		u_warpMode = gl.getUniformLocation(program, 'u_warpMode');
-		// @ts-ignore
-		u_warpSize = gl.getUniformLocation(program, 'u_warpSize');
-		// @ts-ignore
-		u_warpAmount = gl.getUniformLocation(program, 'u_warpAmount');
-		// @ts-ignore
-		u_grainAmount = gl.getUniformLocation(program, 'u_grainAmount');
-		// @ts-ignore
-		u_grainSize = gl.getUniformLocation(program, 'u_grainSize');
-		// @ts-ignore
-		u_grainAnimate = gl.getUniformLocation(program, 'u_grainAnimate');
-		// @ts-ignore
-		u_seed = gl.getUniformLocation(program, 'u_seed');
-
-		frameId = requestAnimationFrame(render);
-		window.addEventListener('resize', updateUniforms);
-	});
-
-	onDestroy(() => {
-		if (!browser) return;
-
-		running = false;
-		if (frameId) cancelAnimationFrame(frameId);
-		window.removeEventListener('resize', updateUniforms);
-	});
-
-	$effect(() => {
-		if (gl && program) {
-			updateUniforms();
-		}
-	});
-</script>
-
-<canvas bind:this={canvas}></canvas>
-
-<style>
-	canvas { width: 100%; height: 100%; display: block; }
-</style>
+<script lang="ts">
+	import frag from './fragment.txt?raw';
+	import { onMount, onDestroy } from 'svelte';
+	import type { Warp, Grain, GradientOptions } from './index.js';
+	import { hexToRgb, isBrowser } from './utils.js';
+
+	let {
+		points = [],
+		radius = 0.6,
+		intensity = 1.0,
+		warp: initialWarp = {},
+		speed = 1.0,
+		grain: initialGrain = {},
+		maxPoints = 12,
+		seed = Math.random(),
+		currentState = $bindable('loading'),
+		class: c = '',
+		...rest
+	}: GradientOptions = $props();
+
+	const defaultWarp: Required<Warp> = { mode: 0, amount: 0, size: 1 };
+	const defaultGrain: Required<Grain> = { amount: 0, size: 1 };
+
+	const warp: Required<Warp> = $derived({ ...defaultWarp, ...initialWarp });
+	const grain: Required<Grain> = $derived({ ...defaultGrain, ...initialGrain });
+
+	let canvas: HTMLCanvasElement | undefined = $state();
+	let worker: Worker | undefined = $state();
+	let frame: number;
+	let running = true;
+	let lastTime = 0;
+	let animTime = 0;
+
+
+	function updateUniforms() {
+		if (!worker) return;
+
+		const colorsArr = new Float32Array(maxPoints * 3);
+		const posArr = new Float32Array(maxPoints * 2);
+
+		for (let i = 0; i < points.length && i < maxPoints; i++) {
+			const [r, g, b] = hexToRgb(points[i].color);
+			colorsArr.set([r, g, b], i * 3);
+			posArr.set([points[i].x, points[i].y], i * 2);
+		}
+
+		worker.postMessage({
+			type: 'updateUniforms',
+			uniforms: {
+				u_colors: colorsArr,
+				u_positions: posArr,
+				u_count: Math.min(points.length, maxPoints),
+				u_radius: radius,
+				u_intensity: intensity,
+				u_warpMode: warp.mode,
+				u_warpSize: warp.size,
+				u_warpAmount: warp.amount,
+				u_grainAmount: grain.amount,
+				u_grainSize: grain.size,
+				u_seed: seed
+			}
+		});
+	}
+
+	function updateResolution() {
+		if (!worker || !canvas) return;
+		const dpr = Math.max(1, window.devicePixelRatio || 1);
+		const width = Math.floor(canvas.clientWidth * dpr);
+		const height = Math.floor(canvas.clientHeight * dpr);
+		worker.postMessage({
+			type: 'updateUniforms',
+			uniforms: {
+				u_resolution: [width, height]
+			}
+		});
+	}
+
+	function render(time: number) {
+		if (worker) {
+			if (lastTime === 0) lastTime = time;
+			const dt = (time - lastTime) * 0.001;
+			lastTime = time;
+			animTime += dt * speed;
+
+			worker.postMessage({
+				type: 'render',
+				time: animTime
+			});
+
+			if (running) {
+				currentState = 'playing';
+				frame = requestAnimationFrame(render);
+			} else {
+				currentState = 'paused';
+			}
+		}
+	}
+
+	onMount(() => {
+		if (!canvas || !isBrowser()) return;
+		currentState = 'loading';
+
+			worker = new Worker(new URL('./gradient.worker.ts', import.meta.url), { type: 'module' });
+			
+			worker.onmessage = (event: MessageEvent) => {
+				const { type } = event.data;
+				if (type === 'ready') {
+					updateUniforms();
+					currentState = 'playing';
+				} else if (type === 'rendering') {
+					currentState = 'playing';
+				} else if (type === 'paused') {
+					currentState = 'paused';
+				} else if (type === 'error') {
+					console.error('Worker error:', event.data.error);
+					currentState = 'paused';
+				}
+			};
+
+			const dpr = Math.max(1, window.devicePixelRatio || 1);
+			const width = Math.floor(canvas.clientWidth * dpr);
+			const height = Math.floor(canvas.clientHeight * dpr);
+			canvas.width = width;
+			canvas.height = height;
+
+			try {
+				const offscreenCanvas = canvas.transferControlToOffscreen();
+				worker.postMessage({
+					type: 'init',
+					offscreenCanvas,
+					fragShader: frag,
+					speed
+				}, [offscreenCanvas]);
+
+				const resizeObserver = new ResizeObserver(() => {
+				updateResolution();
+			});
+			resizeObserver.observe(canvas);
+			frame = requestAnimationFrame(render);
+			} catch (error) {
+				console.error('Could not transfer canvas to worker: ', error);
+			}
+	});
+
+	onDestroy(() => {
+		running = false;
+		if (!isBrowser()) return;
+		
+		if (worker) {
+			worker.postMessage({ type: 'destroy' });
+			worker.terminate();
+		}
+	});
+
+	$effect(() => {
+		if(worker && (points.length || radius || intensity || warp || grain || seed)) {
+			updateUniforms();
+		}
+	});
+</script>
+
+<canvas bind:this={canvas} {...rest} class="{c} {currentState}"></canvas>
+
+<style>
+	canvas { width: 100%; height: 100%; display: block; transition: opacity 1s ease-out }
+	canvas.loading { opacity: 0; }
+	canvas.playing { opacity: 1; }
+</style>

package/dist/Gradient.svelte.d.ts

@@ -1,21 +1,4 @@
-interface Props {
-    points?: {
-        color: string;
-        x: number;
-        y: number;
-    }[];
-    radius?: number;
-    timeAmount?: number;
-    intensity?: number;
-    warpMode?: number;
-    warpSize?: number;
-    warpAmount?: number;
-    grainAmount?: number;
-    grainSize?: number;
-    seed?: number;
-}
-declare const Gradient: import("svelte").Component<Props, {
-    MAX_POINTS: 12;
-}, "">;
+import type { GradientOptions } from './index.js';
+declare const Gradient: import("svelte").Component<GradientOptions, {}, "currentState">;
 type Gradient = ReturnType<typeof Gradient>;
 export default Gradient;

package/dist/fragment.txt

@@ -0,0 +1,157 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+#define MAX_POINTS 12
+
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform int u_count;
+uniform vec3 u_colors[MAX_POINTS];
+uniform vec2 u_positions[MAX_POINTS];
+uniform float u_radius;
+uniform float u_intensity;
+uniform float u_grainAmount;
+uniform float u_grainSize;
+uniform int u_warpMode;
+uniform float u_warpSize;
+uniform float u_warpAmount;
+uniform float u_seed;
+
+vec3 permute(vec3 x) {
+    return mod(((x * 34.0) + 1.0) * x, 289.0);
+}
+
+float snoise(vec2 v) {
+    const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
+    vec2 i = floor(v + dot(v, C.yy));
+    vec2 x0 = v - i + dot(i, C.xx);
+    vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+    vec4 x12 = x0.xyxy + C.xxzz;
+    x12.xy -= i1;
+    i = mod(i, 289.0);
+    vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
+    vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);
+    m = m * m * m * m;
+    vec3 x = 2.0 * fract(p * C.www) - 1.0;
+    vec3 h = abs(x) - 0.5;
+    vec3 ox = floor(x + 0.5);
+    vec3 a0 = x - ox;
+    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
+    vec3 g;
+    g.x = a0.x * x0.x + h.x * x0.y;
+    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+    return 130.0 * dot(m, g);
+}
+
+float fbm(vec2 p) {
+    float f = 0.0;
+    float amp = 0.5;
+    for (int i = 0; i < 5; i++) {
+        f += amp * snoise(p);
+        p *= 2.0;
+        amp *= 0.5;
+    }
+    return f;
+}
+
+vec2 warpWave(vec2 uv, float t, float seed) {
+    float phase = snoise(uv * (u_warpSize * 1.5 + 0.1) + vec2(seed * 5.0));
+    float w1 = sin((uv.y * u_warpSize * 10.0) + t * 0.6 + phase * 6.28318);
+    float w2 = cos((uv.x * u_warpSize * 8.0) + t * 0.4 - phase * 6.28318 * 0.5);
+    vec2 disp = vec2(w1, w2) * (u_warpAmount * 0.5);
+    disp.x *= u_resolution.x / u_resolution.y;
+    return uv + disp;
+}
+
+vec2 warpSimplex(vec2 uv, float t, float seed) {
+    vec2 noiseUv = uv * (u_warpSize * 4.0 + 0.001) + vec2(seed * 10.0, seed * 20.0);
+    float n = snoise(noiseUv + vec2(t * 0.05));
+    vec2 disp = vec2(n, snoise(noiseUv + vec2(12.34))) * u_warpAmount * 0.8;
+    disp.x *= u_resolution.x / u_resolution.y;
+    return uv + disp;
+}
+
+vec2 warpFBM(vec2 uv, float t, float seed) {
+    vec2 noiseUv = uv * (u_warpSize * 3.0) + vec2(seed * 7.0);
+    float f = fbm(noiseUv + vec2(t * 0.02));
+    vec2 disp = vec2(f, fbm(noiseUv + vec2(31.4))) * u_warpAmount;
+    disp.x *= u_resolution.x / u_resolution.y;
+    return uv + disp;
+}
+
+vec2 warpRidged(vec2 uv, float t, float seed) {
+    vec2 nUv = uv * (u_warpSize * 2.5) + vec2(seed * 9.0);
+    float r = 1.0 - abs(fbm(nUv));
+    vec2 disp = vec2(r, r * 0.5) * (u_warpAmount * 1.2);
+    disp.x *= u_resolution.x / u_resolution.y;
+    return uv + disp;
+}
+
+vec2 warpSwirl(vec2 uv, float t) {
+    vec2 centered = uv - 0.5;
+    float radius = length(centered);
+    float angle = radius * u_warpSize * 5.0 - t * 0.5;
+    float s = sin(angle);
+    float c = cos(angle);
+    vec2 warped = vec2(c * centered.x - s * centered.y, s * centered.x + c * centered.y);
+    warped.x *= u_resolution.x / u_resolution.y;
+    warped = warped + 0.5;
+    return mix(uv, warped, u_warpAmount);
+}
+
+vec2 warpRadial(vec2 uv, float t) {
+    vec2 centered = uv - 0.5;
+    float r = length(centered);
+    float theta = atan(centered.y, centered.x);
+    float wave = sin(r * u_warpSize * 20.0 - t * 2.0);
+    float r_warped = r + wave;
+    vec2 p;
+    p.x = r_warped * cos(theta);
+    p.y = r_warped * sin(theta);
+    p.x *= u_resolution.x / u_resolution.y;
+    p = p + 0.5;
+    return mix(uv, p, u_warpAmount);
+}
+
+vec2 applyWarp(vec2 uv) {
+    if (u_warpMode == 1) return warpWave(uv, u_time, u_seed);
+    else if (u_warpMode == 2) return warpSimplex(uv, u_time, u_seed);
+    else if (u_warpMode == 3) return warpFBM(uv, u_time, u_seed);
+    else if (u_warpMode == 4) return warpRidged(uv, u_time, u_seed);
+    else if (u_warpMode == 5) return warpSwirl(uv, u_time);
+    else if (u_warpMode == 6) return warpRadial(uv, u_time);
+    return uv;
+}
+
+float grain(vec2 uv) {
+    float n = fract(sin(dot(uv * u_grainSize, vec2(12.9898, 78.233))) * 43758.5453);
+    return n - 0.5;
+}
+
+void main() {
+    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+    vec2 centered = uv - 0.5;
+    uv = applyWarp(uv);
+
+    float g = grain(gl_FragCoord.xy / u_resolution.xy);
+
+    vec3 accum = vec3(0.0);
+    float totalWeight = 0.0;
+    for (int i = 0; i < MAX_POINTS; ++i) {
+        if (i >= u_count) break;
+        vec2 diff = uv - u_positions[i];
+        diff.x *= u_resolution.x / u_resolution.y;
+        float d = length(diff);
+        float w = exp(- (d * d) / (u_radius * u_radius));
+        w = pow(w, max(0.001, u_intensity));
+        accum += u_colors[i] * w;
+        totalWeight += w;
+    }
+
+    vec3 color = totalWeight > 0.0 ? accum / totalWeight : vec3(0.95);
+    float vign = 1.0 - smoothstep(0.6, 0.9, length(centered));
+    color *= mix(0.98, 1.02, vign);
+    color += g * u_grainAmount;
+    gl_FragColor = vec4(color, 1.0);
+}

package/dist/gradient.worker.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/gradient.worker.js

@@ -0,0 +1,83 @@
+import { SHADER_UNIFORMS, VERTEX_SHADER, createProgram, getUniform, setupQuadBuffer, setUniform } from './utils.js';
+let gl = null;
+let program = null;
+let uniforms = {};
+let currentUniforms = {};
+function initWorker(offscreenCanvas, fragShader) {
+    try {
+        gl = offscreenCanvas.getContext('webgl2', { antialias: true });
+        if (!gl) {
+            throw new Error('WebGL2 not supported');
+        }
+        program = createProgram(gl, VERTEX_SHADER, fragShader);
+        gl.useProgram(program);
+        setupQuadBuffer(gl, program);
+        for (const name of SHADER_UNIFORMS) {
+            uniforms[name] = getUniform(gl, program, name);
+        }
+        self.postMessage({ type: 'ready' });
+    }
+    catch (error) {
+        self.postMessage({ type: 'error', error: error.message });
+    }
+}
+function performRender(time) {
+    if (!gl || !program || Object.keys(currentUniforms).length === 0) {
+        return;
+    }
+    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.useProgram(program);
+    gl.uniform1f(uniforms.u_time, time);
+    for (const [key, value] of Object.entries(currentUniforms)) {
+        const uniform = uniforms[key];
+        if (uniform)
+            setUniform(gl, uniform, key, value);
+    }
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+}
+self.onmessage = (event) => {
+    const { type } = event.data;
+    switch (type) {
+        case 'init': {
+            const { offscreenCanvas, fragShader } = event.data;
+            if (offscreenCanvas && fragShader) {
+                initWorker(offscreenCanvas, fragShader);
+            }
+            break;
+        }
+        case 'render': {
+            const { time } = event.data;
+            if (time !== undefined) {
+                performRender(time);
+            }
+            break;
+        }
+        case 'updateUniforms': {
+            const { uniforms: newUniforms } = event.data;
+            if (newUniforms) {
+                currentUniforms = newUniforms;
+            }
+            break;
+        }
+        case 'resize': {
+            const { width, height, dpr } = event.data;
+            if (gl && width && height && dpr) {
+                const scaledWidth = Math.floor(width);
+                const scaledHeight = Math.floor(height);
+                gl.canvas.width = scaledWidth;
+                gl.canvas.height = scaledHeight;
+                currentUniforms = {
+                    ...currentUniforms,
+                    u_resolution: [scaledWidth, scaledHeight]
+                };
+            }
+            break;
+        }
+        case 'destroy': {
+            break;
+        }
+    }
+};
+export {};

package/dist/index.d.ts

@@ -1 +1,3 @@
 export { default as Gradient } from './Gradient.svelte';
+export type * from './types.js';
+export * from './utils.js';

package/dist/index.js

@@ -1 +1,2 @@
 export { default as Gradient } from './Gradient.svelte';
+export * from './utils.js';

package/dist/types.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Represents a color position in 2D space.
+ */
+export interface Point {
+    /** Color of the point in hex format, e.g. "#FF0000" */
+    color: string;
+    /** X coordinate of the point (0 to 1) */
+    x: number;
+    /** Y coordinate of the point (0 to 1) */
+    y: number;
+}
+/**
+ * Configuration for warp effect.
+ */
+export interface Warp {
+    /** Warp mode, default: 0 */
+    mode?: number;
+    /** Warp amount, default: 0 (if 0, warp is not applied) */
+    amount?: number;
+    /** Warp size, default: 1 */
+    size?: number;
+}
+/**
+ * Configuration for grain effect.
+ */
+export interface Grain {
+    /** Grain intensity, default: 0 */
+    amount?: number;
+    /** Grain size, default: 1 */
+    size?: number;
+}
+export type shaderState = 'loading' | 'playing' | 'paused';
+/**
+ * Configuration for the gradient.
+ */
+export interface GradientOptions {
+    /** Array of color positions */
+    points?: Point[];
+    /** Maximum number of points */
+    maxPoints?: number;
+    /** Blend radius, default: 0.6 */
+    radius?: number;
+    /** Blend intensity, default: 1 */
+    intensity?: number;
+    /** Warp effect configuration */
+    warp?: Warp;
+    /** Warp animation speed, default: 1 */
+    speed?: number;
+    /** Seed for warp effect, default: random */
+    seed?: number;
+    /** Grain effect configuration */
+    grain?: Grain;
+    /** Current state: 'loading', 'playing', or 'paused' */
+    currentState?: shaderState;
+    /** Class applied to the canvas element **/
+    class?: string;
+}
+export interface RenderMessage {
+    type: 'init' | 'render' | 'resize' | 'updateUniforms' | 'destroy';
+    offscreenCanvas?: OffscreenCanvas;
+    fragShader?: string;
+    width?: number;
+    height?: number;
+    dpr?: number;
+    uniforms?: Record<string, any>;
+    time?: number;
+    speed?: number;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,22 @@
+export declare function hexToRgb(hex: string): [number, number, number];
+export declare const SHADER_UNIFORMS: readonly ["u_resolution", "u_time", "u_count", "u_colors", "u_positions", "u_radius", "u_intensity", "u_warpMode", "u_warpSize", "u_warpAmount", "u_grainAmount", "u_grainSize", "u_seed"];
+export declare const VERTEX_SHADER = "attribute vec2 a_pos;void main() {gl_Position = vec4(a_pos, 0.0, 1.0);}";
+export declare const FULLSCREEN_QUAD: Float32Array<ArrayBuffer>;
+export declare function createShader(gl: WebGL2RenderingContext | WebGLRenderingContext, type: number, src: string): WebGLShader;
+export declare function createProgram(gl: WebGL2RenderingContext | WebGLRenderingContext, vsSrc: string, fsSrc: string): WebGLProgram;
+export declare function getUniform(gl: WebGL2RenderingContext | WebGLRenderingContext, program: WebGLProgram, name: string): WebGLUniformLocation;
+export declare function setupQuadBuffer(gl: WebGL2RenderingContext | WebGLRenderingContext, program: WebGLProgram): void;
+export declare function getCanvasSize(canvas: HTMLCanvasElement): {
+    width: number;
+    height: number;
+    dpr: number;
+};
+export declare const isBrowser: () => boolean;
+/**
+ * Uniform type metadata for WebGL setters
+ */
+export declare const UNIFORM_TYPES: Record<string, 'vec2' | 'vec3f' | 'vec2f' | 'i32' | 'f32'>;
+/**
+ * Set a WebGL uniform based on its type
+ */
+export declare function setUniform(gl: WebGL2RenderingContext, uniform: WebGLUniformLocation, key: string, value: any): void;

package/dist/utils.js

@@ -0,0 +1,115 @@
+export function hexToRgb(hex) {
+    hex = hex.replace('#', '');
+    if (hex.length === 3)
+        hex = hex.split('').map(c => c + c).join('');
+    const num = parseInt(hex, 16);
+    const r = ((num >> 16) & 255) / 255;
+    const g = ((num >> 8) & 255) / 255;
+    const b = (num & 255) / 255;
+    return [r, g, b];
+}
+export const SHADER_UNIFORMS = [
+    'u_resolution',
+    'u_time',
+    'u_count',
+    'u_colors',
+    'u_positions',
+    'u_radius',
+    'u_intensity',
+    'u_warpMode',
+    'u_warpSize',
+    'u_warpAmount',
+    'u_grainAmount',
+    'u_grainSize',
+    'u_seed'
+];
+export const VERTEX_SHADER = `attribute vec2 a_pos;void main() {gl_Position = vec4(a_pos, 0.0, 1.0);}`;
+export const FULLSCREEN_QUAD = new Float32Array([-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]);
+export function createShader(gl, type, src) {
+    const s = gl.createShader(type);
+    gl.shaderSource(s, src);
+    gl.compileShader(s);
+    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
+        const error = gl.getShaderInfoLog(s);
+        gl.deleteShader(s);
+        throw new Error(`Shader compile error: ${error}`);
+    }
+    return s;
+}
+export function createProgram(gl, vsSrc, fsSrc) {
+    const vs = createShader(gl, gl.VERTEX_SHADER, vsSrc);
+    const fs = createShader(gl, gl.FRAGMENT_SHADER, fsSrc);
+    const p = gl.createProgram();
+    gl.attachShader(p, vs);
+    gl.attachShader(p, fs);
+    gl.linkProgram(p);
+    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
+        const error = gl.getProgramInfoLog(p);
+        gl.deleteProgram(p);
+        throw new Error(`Program link error: ${error}`);
+    }
+    return p;
+}
+export function getUniform(gl, program, name) {
+    const loc = gl.getUniformLocation(program, name);
+    if (!loc)
+        throw new Error(`Uniform ${name} not found`);
+    return loc;
+}
+export function setupQuadBuffer(gl, program) {
+    const vbo = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+    gl.bufferData(gl.ARRAY_BUFFER, FULLSCREEN_QUAD, gl.STATIC_DRAW);
+    const a_pos = gl.getAttribLocation(program, 'a_pos');
+    gl.enableVertexAttribArray(a_pos);
+    gl.vertexAttribPointer(a_pos, 2, gl.FLOAT, false, 0, 0);
+}
+export function getCanvasSize(canvas) {
+    const dpr = Math.max(1, window.devicePixelRatio || 1);
+    const width = Math.floor(canvas.clientWidth * dpr);
+    const height = Math.floor(canvas.clientHeight * dpr);
+    return { width, height, dpr };
+}
+export const isBrowser = () => typeof window !== 'undefined' && typeof document !== 'undefined';
+/**
+ * Uniform type metadata for WebGL setters
+ */
+export const UNIFORM_TYPES = {
+    u_resolution: 'vec2',
+    u_colors: 'vec3f',
+    u_positions: 'vec2f',
+    u_count: 'i32',
+    u_warpMode: 'i32',
+    u_radius: 'f32',
+    u_intensity: 'f32',
+    u_warpSize: 'f32',
+    u_warpAmount: 'f32',
+    u_grainAmount: 'f32',
+    u_grainSize: 'f32',
+    u_seed: 'f32'
+};
+/**
+ * Set a WebGL uniform based on its type
+ */
+export function setUniform(gl, uniform, key, value) {
+    const type = UNIFORM_TYPES[key];
+    if (!type)
+        return;
+    switch (type) {
+        case 'vec2':
+            gl.uniform2f(uniform, value[0], value[1]);
+            break;
+        case 'vec3f':
+            gl.uniform3fv(uniform, value);
+            break;
+        case 'vec2f':
+            gl.uniform2fv(uniform, value);
+            break;
+        case 'i32':
+            gl.uniform1i(uniform, value);
+            break;
+        case 'f32':
+            gl.uniform1f(uniform, value);
+            break;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "chroma-noise",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -30,9 +30,7 @@
 		}
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0",
-		"ventoui-utils": "^0.0.2",
-		"@sveltejs/kit": "^2.0.0"
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^6.1.0",
@@ -45,22 +43,25 @@
 		"publint": "^0.3.13",
 		"svelte": "^5.39.5",
 		"svelte-check": "^4.3.2",
+		"svelte-fancy-transitions": "^0.0.7",
 		"typescript": "^5.9.2",
+		"ventoui-button": "^0.0.2",
+		"ventoui-slider": "^0.0.1",
+		"ventoui-styles": "^0.0.2",
 		"vite": "^7.1.7"
 	},
 	"keywords": [
-		"svelte", "simplex", "noise", "gradient", "chroma"
+		"svelte",
+		"simplex",
+		"noise",
+		"gradient",
+		"chroma",
+		"chroma-noise"
 	],
 	"pnpm": {
 		"onlyBuiltDependencies": [
 			"esbuild"
 		]
 	},
-	"packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac",
-	"dependencies": {
-		"ventoui-button": "^0.0.2",
-		"ventoui-slider": "^0.0.1",
-		"ventoui-styles": "^0.0.2",
-		"ventoui-utils": "^0.0.2"
-	}
+	"packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac"
 }

package/dist/gradient.frag.glsl

@@ -1,154 +0,0 @@
-#ifdef GL_ES
-precision mediump float;
-#endif
-
-#define MAX_POINTS 12
-
-uniform vec2 u_resolution;
-uniform float u_time;        // теперь это интегрированное animTime из компонента
-uniform int u_count;
-uniform vec3 u_colors[MAX_POINTS];
-uniform vec2 u_positions[MAX_POINTS];
-uniform float u_radius;
-uniform float u_intensity;
-uniform float u_grainAmount;
-uniform float u_grainSize;
-
-// warp uniforms
-uniform int u_warpMode; // 0 = none, 1 = waves, 2 = simplex, 3 = fbm, 4 = ridged
-uniform float u_warpSize;
-uniform float u_warpAmount;
-uniform float u_seed; // новый
-
-// --- Simplex (from Ashima / webgl-noise) ---
-vec3 permute(vec3 x) {
-    return mod(((x * 34.0) + 1.0) * x, 289.0);
-}
-float snoise(vec2 v) {
-    const vec4 C = vec4(0.211324865405187,  /* (3.0-sqrt(3.0))/6.0 */
-                        0.366025403784439,  /*  (sqrt(3.0)-1.0)/2.0 */
-                        -0.577350269189626, /* -1.0 + 2.0 * C.x */
-                        0.024390243902439); /* 1.0 / 41.0 */
-    vec2 i  = floor(v + dot(v, C.yy) );
-    vec2 x0 = v -   i + dot(i, C.xx);
-
-    vec2 i1;
-    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
-    vec4 x12 = x0.xyxy + C.xxzz;
-    x12.xy -= i1;
-
-    i = mod(i, 289.0);
-    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0) )
-                    + i.x + vec3(0.0, i1.x, 1.0) );
-
-    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
-    m = m * m;
-    m = m * m;
-
-    vec3 x = 2.0 * fract(p * C.www) - 1.0;
-    vec3 h = abs(x) - 0.5;
-    vec3 ox = floor(x + 0.5);
-    vec3 a0 = x - ox;
-
-    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
-
-    vec3 g;
-    g.x  = a0.x  * x0.x + h.x  * x0.y;
-    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
-
-    return 130.0 * dot(m, g);
-}
-
-// fbm helper
-float fbm(vec2 p) {
-    float f = 0.0;
-    float amp = 0.5;
-    for (int i = 0; i < 5; i++) {
-        f += amp * snoise(p);
-        p *= 2.0;
-        amp *= 0.5;
-    }
-    return f;
-}
-
-// Wave warp — теперь использует seed и animTime
-vec2 waveWarp(vec2 uv, float t, float seed) {
-    // phase field from noise so waves are not uniform / repeatless across seed
-    float phase = snoise(uv * (u_warpSize * 1.5 + 0.1) + vec2(seed * 5.0));
-    float w1 = sin((uv.y * u_warpSize * 10.0) + t * 0.6 + phase * 6.28318);
-    float w2 = cos((uv.x * u_warpSize * 8.0) + t * 0.4 - phase * 6.28318 * 0.5);
-    vec2 disp = vec2(w1, w2) * (u_warpAmount * 0.5);
-    // adjust for aspect
-    disp.x *= u_resolution.x / u_resolution.y;
-    return uv + disp;
-}
-
-void main() {
-    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
-    vec2 centered = uv - 0.5;
-    // keep aspect-correct uv for distance calculations later
-    vec2 aspectUV = uv;
-    aspectUV.x *= u_resolution.x / u_resolution.y;
-
-    // --- Handle warp modes (use u_time as smooth animTime, and u_seed to randomize field) ---
-    if (u_warpMode == 1) {
-        uv = waveWarp(uv, u_time, u_seed);
-    } else if (u_warpMode == 2) {
-        // Simplex single-octave with seed; animated slowly (u_time influences motion but smoothly)
-        vec2 noiseUv = uv * (u_warpSize * 4.0 + 0.001) + vec2(u_seed * 10.0, u_seed * 20.0);
-        float n = snoise(noiseUv + vec2(u_time * 0.05)); // slow drift
-        vec2 disp = vec2(n, snoise(noiseUv + vec2(12.34))) * u_warpAmount * 0.8;
-        disp.x *= u_resolution.x / u_resolution.y;
-        uv += disp;
-    } else if (u_warpMode == 3) {
-        // fbm turbulence
-        vec2 noiseUv = uv * (u_warpSize * 3.0) + vec2(u_seed * 7.0);
-        float f = fbm(noiseUv + vec2(u_time * 0.02));
-        vec2 disp = vec2(f, fbm(noiseUv + vec2(31.4))) * u_warpAmount;
-        disp.x *= u_resolution.x / u_resolution.y;
-        uv += disp;
-    } else if (u_warpMode == 4) {
-        // ridged noise variation
-        vec2 nUv = uv * (u_warpSize * 2.5) + vec2(u_seed * 9.0);
-        float r = 1.0 - abs(fbm(nUv));
-        vec2 disp = vec2(r, r * 0.5) * (u_warpAmount * 1.2);
-        disp.x *= u_resolution.x / u_resolution.y;
-        uv += disp;
-    }
-
-    // --- Grain calculation (apply animation BEFORE sampling the pseudo-random) ---
-    vec2 grainUv = gl_FragCoord.xy / u_resolution.xy;
-    // grainSize: bigger -> larger grains. so invert (1/size)
-    float grainScale = max(u_grainSize, 0.0001);
-    grainUv *= 1.0 / grainScale;
-    // classic hash -> value in [0,1)
-    float grain = fract(sin(dot(grainUv, vec2(12.9898, 78.233))) * 43758.5453);
-    grain = grain - 0.5; // center at 0
-
-    // --- Accumulate colors from points ---
-    vec3 accum = vec3(0.0);
-    float totalWeight = 0.0;
-    for (int i = 0; i < MAX_POINTS; ++i) {
-        if (i >= u_count) break;
-        vec2 p = u_positions[i];
-        vec2 diff = (uv - p);
-        diff.x *= u_resolution.x / u_resolution.y;
-        float d = length(diff);
-        float w = exp(- (d * d) / (u_radius * u_radius)); // base gaussian weight in (0,1]
-        // intensity now controls sharpness/contrast via power:
-        float intensity = max(0.001, u_intensity);
-        w = pow(w, intensity); // intensity >1 -> sharper peaks; <1 -> broader
-        accum += u_colors[i] * w;
-        totalWeight += w;
-    }
-    vec3 color = totalWeight > 0.0 ? accum / totalWeight : vec3(0.95);
-
-    // simple vignette
-    float vign = 1.0 - smoothstep(0.6, 0.9, length(centered));
-    color *= mix(0.98, 1.02, vign);
-
-    // add grain
-    color += grain * u_grainAmount;
-
-    gl_FragColor = vec4(color, 1.0);
-}

package/dist/gradient.vert.glsl

@@ -1,4 +0,0 @@
-attribute vec2 a_pos;
-void main() {
-gl_Position = vec4(a_pos, 0.0, 1.0);
-}