chroma-noise 0.0.1 → 0.0.2

package/README.md

@@ -2,11 +2,15 @@
 
 Gradient noise for Svelte 5.
 
-At an early stage of development.
+### New in 0.0.2
+- types
+- new modes: swirl and radial waves
+- removed unused dependencies
 
-### Roadmap
-- [] docs
-- [] optimization
 
 ### Site & playground
-https://chromanoise.netlify.app
+https://chromanoise.netlify.app
+
+### Roadmap
+- [] docs
+- [] fix grain size option

package/dist/Gradient.svelte

@@ -1,221 +1,177 @@
-<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 vert from './gradient.vert.glsl?raw';
+	import frag from './gradient.frag.glsl?raw';
+	import { hexToRgb } from 'ventoui-utils';
+	import { onMount, onDestroy } from 'svelte';
+	import type { Warp, Grain, GradientOptions } from './index.js';
+
+	let {
+		points = [],
+		radius = 0.6,
+		intensity = 1.0,
+		warp: initialWarp = {},
+		speed = 1.0,
+		grain: initialGrain = {},
+		maxPoints = 12,
+		seed = Math.random(),
+		...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 });
+	const browser = () => typeof window !== 'undefined' && typeof document !== 'undefined';
+
+	let canvas: HTMLCanvasElement | undefined = $state();
+	let gl: WebGLRenderingContext | undefined = $state();
+	let program: WebGLProgram | undefined = $state();
+
+	let uniforms: Record<string, WebGLUniformLocation> = {} as Record<string, WebGLUniformLocation>;
+	let frameId: number;
+	let running = true;
+	let lastTime = 0;
+	let animTime = 0;
+
+	const shaderUniforms = ['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'
+	];
+
+	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(uniforms.u_resolution, canvas.width, canvas.height);
+
+		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);
+		}
+
+		gl.uniform3fv(uniforms.u_colors, colorsArr);
+		gl.uniform2fv(uniforms.u_positions, posArr);
+		gl.uniform1i(uniforms.u_count, Math.min(points.length, maxPoints));
+		gl.uniform1f(uniforms.u_radius, radius);
+		gl.uniform1f(uniforms.u_intensity, intensity);
+		gl.uniform1i(uniforms.u_warpMode, warp.mode);
+		gl.uniform1f(uniforms.u_warpSize, warp.size);
+		gl.uniform1f(uniforms.u_warpAmount, warp.amount);
+		gl.uniform1f(uniforms.u_grainAmount, grain.amount);
+		gl.uniform1f(uniforms.u_grainSize, grain.size);
+		gl.uniform1f(uniforms.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 * speed;
+
+		resizeCanvasToDisplaySize();
+		gl.viewport(0, 0, canvas.width, canvas.height);
+		gl.clearColor(0, 0, 0, 0);
+		gl.clear(gl.COLOR_BUFFER_BIT);
+
+		gl.useProgram(program);
+		gl.uniform1f(uniforms.u_time, animTime);
+		updateUniforms();
+		gl.drawArrays(gl.TRIANGLES, 0, 6);
+
+		if (running) frameId = requestAnimationFrame(render);
+	}
+
+	function getUniform(gl: WebGLRenderingContext, program: WebGLProgram, name: string): WebGLUniformLocation {
+		const loc = gl.getUniformLocation(program, name);
+		if (!loc) throw new Error(`Uniform ${name} not found`);
+		return loc;
+	}
+
+	onMount(() => {
+		if (!canvas || !browser) return;
+		gl = canvas.getContext('webgl', { antialias: true })!;
+		if (!gl) return console.warn('WebGL not supported');
+
+		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);
+
+		for (const name of shaderUniforms) {
+			uniforms[name] = getUniform(gl, program, name);
+		}
+
+		frameId = requestAnimationFrame(render);
+		window.addEventListener('resize', updateUniforms);
+	});
+
+	onDestroy(() => {
+		running = false;
+		if (!canvas || !browser) return;
+		if (frameId) cancelAnimationFrame(frameId);
+		window.removeEventListener('resize', updateUniforms);
+	});
+
+	$effect(() => {
+		if (gl && program) updateUniforms();
+	});
+</script>
+
+<canvas bind:this={canvas} {...rest}></canvas>
+
+<style>
+	canvas { width: 100%; height: 100%; display: block; }
+</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, {}, "">;
 type Gradient = ReturnType<typeof Gradient>;
 export default Gradient;

package/dist/gradient.frag.glsl

@@ -5,7 +5,7 @@ precision mediump float;
 #define MAX_POINTS 12
 
 uniform vec2 u_resolution;
-uniform float u_time;        // теперь это интегрированное animTime из компонента
+uniform float u_time;
 uniform int u_count;
 uniform vec3 u_colors[MAX_POINTS];
 uniform vec2 u_positions[MAX_POINTS];
@@ -13,53 +13,37 @@ 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 int u_warpMode;
 uniform float u_warpSize;
 uniform float u_warpAmount;
-uniform float u_seed; // новый
+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);
+    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 * m;
-
+    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.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;
@@ -71,84 +55,101 @@ float fbm(vec2 p) {
     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
+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);
-    // adjust for aspect
     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) * u_warpAmount;
+    float c = cos(angle) * u_warpAmount;
+    centered = vec2(c * centered.x - s * centered.y, s * centered.x + c * centered.y);
+    centered.x *= u_resolution.x / u_resolution.y;
+    return centered + 0.5;
+}
+
+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) * u_warpAmount;
+    r += wave;
+    vec2 p;
+    p.x = r * cos(theta);
+    p.y = r * sin(theta);
+    p.x *= u_resolution.x / u_resolution.y;
+    return p + 0.5;
+}
+
+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;
-    // 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;
-    }
+    uv = applyWarp(uv);
 
-    // --- 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
+    float g = grain(gl_FragCoord.xy / u_resolution.xy);
 
-    // --- 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);
+        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)); // 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
+        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);
 
-    // simple vignette
+    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);
-
-    // add grain
-    color += grain * u_grainAmount;
-
+    color += g * u_grainAmount;
     gl_FragColor = vec4(color, 1.0);
 }

package/dist/index.d.ts

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

package/dist/types.d.ts

@@ -0,0 +1,52 @@
+/**
+ * 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;
+}
+/**
+ * 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;
+}

package/dist/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "chroma-noise",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -31,8 +31,7 @@
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0",
-		"ventoui-utils": "^0.0.2",
-		"@sveltejs/kit": "^2.0.0"
+		"ventoui-utils": "^0.0.2"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^6.1.0",
@@ -45,22 +44,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"
 }