@webeach/gl-circular-progress 0.2.0

package/lib/esm/classes/CircularProgressLiquid/CircularProgressLiquid.js

@@ -0,0 +1,304 @@
+import { hexToCss } from '../../utils/hexToCss/hexToCss.js';
+import { BaseCircularProgress } from '../BaseCircularProgress/BaseCircularProgress.js';
+import fragmentShaderSource from './shaders/fragment.frag.js';
+import vertexShaderSource from './shaders/vertex.vert.js';
+
+/**
+ * A circular progress indicator with a liquid/water effect.
+ * Uses WebGL 2.0 for rendering.
+ *
+ * @example
+ * const instance = new CircularProgressLiquid(canvas, {
+ *   colors: [0x00c6ff, 0x0072ff],
+ *   progress: 0.6,
+ *   speed: 0.5,
+ *   thickness: 30,
+ *   volume: 0.5,
+ * });
+ *
+ * @see https://webeach.github.io/gl-circular-progress/CircularProgressLiquid.html - Live Demo
+ * @see https://github.com/webeach/gl-circular-progress/blob/main/docs/en/CircularProgressLiquid.md - Documentation
+ */
+class CircularProgressLiquid extends BaseCircularProgress {
+    extraState;
+    animationFrameId = null;
+    flowTime = 0.0;
+    gl = null;
+    gradientTexture = null;
+    lastFrameTime = 0;
+    locations = null;
+    program = null;
+    targetProgress = 0.0;
+    velocity = 0.0;
+    visualProgress = 0.0;
+    /**
+     * Creates an instance of CircularProgressLiquid.
+     *
+     * @param canvas - The HTMLCanvasElement to render on.
+     * @param options - Configuration options.
+     */
+    constructor(canvas, options) {
+        super(canvas, options);
+        this.extraState = {
+            volume: options.volume ?? 0,
+        };
+        this.targetProgress = this.state.progress;
+        this.visualProgress = this.state.progress;
+        this.animate = this.animate.bind(this);
+        this.initWebGL();
+        this.createGradientTexture();
+        this.resize();
+        this.startAnimation();
+    }
+    /**
+     * Cleans up WebGL resources and stops animation.
+     */
+    destroy() {
+        super.destroy();
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+        }
+        if (this.gl) {
+            if (this.program) {
+                this.gl.deleteProgram(this.program);
+            }
+            if (this.gradientTexture) {
+                this.gl.deleteTexture(this.gradientTexture);
+            }
+            // Note: We don't lose the context, but we clean up our resources
+        }
+    }
+    /**
+     * Gets the current volume.
+     */
+    get volume() {
+        return this.extraState.volume;
+    }
+    /**
+     * Sets the volume and updates rendering.
+     */
+    set volume(value) {
+        this.extraState.volume = Math.max(0, Math.min(1, value));
+        this.updateVolume();
+    }
+    /**
+     * Handles resizing of the canvas and updates WebGL viewport.
+     */
+    resize() {
+        if (!this.gl || !this.locations) {
+            return;
+        }
+        this.gl.viewport(0, 0, this.canvasWidth, this.canvasHeight);
+        this.gl.uniform2f(this.locations.uResolution, this.canvasWidth, this.canvasHeight);
+    }
+    /**
+     * Updates WebGL uniforms when colors change.
+     */
+    updateColors() {
+        this.createGradientTexture();
+    }
+    /**
+     * Updates the progress value.
+     *
+     * @param value - The new progress value (0.0 to 1.0).
+     */
+    updateProgress(value) {
+        this.targetProgress = value;
+    }
+    /**
+     * Updates WebGL uniforms when direction changes.
+     */
+    updateReversed() {
+        if (!this.gl || !this.locations) {
+            return;
+        }
+        this.gl.uniform1f(this.locations.uReversed, this.state.reversed ? 1.0 : 0.0);
+    }
+    /**
+     * Updates WebGL uniforms when speed changes.
+     */
+    updateSpeed() {
+        // Speed is used in animate loop, no uniform to update
+    }
+    /**
+     * Updates WebGL uniforms when start angle changes.
+     */
+    updateStartAngle() {
+        if (!this.gl || !this.locations) {
+            return;
+        }
+        const startAngleRad = this.state.startAngle * (Math.PI / 180.0);
+        this.gl.uniform1f(this.locations.uStartAngle, startAngleRad);
+    }
+    /**
+     * Updates WebGL uniforms when thickness changes.
+     */
+    updateThickness() {
+        // Thickness is calculated in animate loop based on canvas size, no direct uniform update needed
+    }
+    updateVolume() {
+        if (!this.gl || !this.locations) {
+            return;
+        }
+        this.gl.uniform1f(this.locations.uVolume, this.extraState.volume);
+    }
+    /**
+     * The main animation loop.
+     */
+    animate(time) {
+        if (this.isDestroyed || !this.gl || !this.locations) {
+            return;
+        }
+        if (!this.lastFrameTime) {
+            this.lastFrameTime = time;
+        }
+        const deltaTime = (time - this.lastFrameTime) * 0.001;
+        this.lastFrameTime = time;
+        // Update State
+        this.flowTime += deltaTime * this.state.speed;
+        const diff = this.targetProgress - this.visualProgress;
+        this.visualProgress += diff * 0.1;
+        this.velocity += (diff * 8.0 - this.velocity) * 0.2;
+        // Render
+        const startAngleRad = this.state.startAngle * (Math.PI / 180.0);
+        this.gl.uniform1f(this.locations.uFlowTime, this.flowTime);
+        this.gl.uniform1f(this.locations.uProgress, this.visualProgress);
+        this.gl.uniform1f(this.locations.uVelocity, this.velocity);
+        this.gl.uniform1f(this.locations.uReversed, this.state.reversed ? 1.0 : 0.0);
+        this.gl.uniform1f(this.locations.uStartAngle, startAngleRad);
+        this.gl.uniform1f(this.locations.uVolume, this.extraState.volume);
+        this.gl.uniform1i(this.locations.uGradientTexture, 0);
+        // Calculate Radius Uniforms
+        // The shader expects uOuterRadius and uInnerRadius in normalized coordinates (0.0 to 1.0 of half-width?)
+        // In the user code:
+        // radiusPx = canvas.width / 2
+        // outerR = 0.98
+        // thicknessRatio = scaledPxThickness / radiusPx
+        // innerR = outerR - thicknessRatio
+        // We need to be careful about aspect ratio. The shader corrects for aspect ratio:
+        // st.x *= u_resolution.x / u_resolution.y;
+        // So 'radius' is in UV space (0-1 approx).
+        const radiusPx = Math.min(this.canvasWidth, this.canvasHeight) / 2;
+        const outerR = 0.98; // Leave a small margin
+        const thicknessRatio = (this.state.thickness * this.dpr) / radiusPx;
+        const innerR = outerR - thicknessRatio;
+        this.gl.uniform1f(this.locations.uOuterRadius, outerR);
+        this.gl.uniform1f(this.locations.uInnerRadius, Math.max(0.0, innerR));
+        this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
+        this.animationFrameId = requestAnimationFrame(this.animate);
+    }
+    /**
+     * Creates the gradient texture from the colors option.
+     */
+    createGradientTexture() {
+        if (!this.gl) {
+            return;
+        }
+        this.gradientTexture = this.gl.createTexture();
+        this.gl.activeTexture(this.gl.TEXTURE0);
+        this.gl.bindTexture(this.gl.TEXTURE_2D, this.gradientTexture);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+        // Create gradient on a temporary 2D canvas
+        const gradientCanvas = document.createElement('canvas');
+        gradientCanvas.width = 256;
+        gradientCanvas.height = 1;
+        const ctx = gradientCanvas.getContext('2d');
+        if (ctx) {
+            const grad = ctx.createLinearGradient(0, 0, 256, 0);
+            const { colors } = this.state;
+            if (colors.length === 1) {
+                const color = hexToCss(colors[0]);
+                grad.addColorStop(0, color);
+                grad.addColorStop(1, color);
+            }
+            else {
+                colors.forEach((hex, index) => {
+                    const stop = index / (colors.length - 1);
+                    grad.addColorStop(stop, hexToCss(hex));
+                });
+            }
+            ctx.fillStyle = grad;
+            ctx.fillRect(0, 0, 256, 1);
+            this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, gradientCanvas);
+        }
+    }
+    /**
+     * Creates and compiles a shader.
+     */
+    createShader(type, source) {
+        if (!this.gl) {
+            return null;
+        }
+        const shader = this.gl.createShader(type);
+        if (!shader) {
+            return null;
+        }
+        this.gl.shaderSource(shader, source);
+        this.gl.compileShader(shader);
+        if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+            console.error(this.gl.getShaderInfoLog(shader));
+            this.gl.deleteShader(shader);
+            return null;
+        }
+        return shader;
+    }
+    /**
+     * Initializes WebGL context and shaders.
+     */
+    initWebGL() {
+        this.gl = this.canvas.getContext('webgl2', {
+            alpha: true,
+            antialias: true,
+        });
+        if (!this.gl) {
+            console.error('WebGL 2.0 is not supported');
+            return;
+        }
+        const vertexShader = this.createShader(this.gl.VERTEX_SHADER, vertexShaderSource);
+        const fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, fragmentShaderSource);
+        if (!vertexShader || !fragmentShader) {
+            return;
+        }
+        this.program = this.gl.createProgram();
+        if (!this.program) {
+            return;
+        }
+        this.gl.attachShader(this.program, vertexShader);
+        this.gl.attachShader(this.program, fragmentShader);
+        this.gl.linkProgram(this.program);
+        if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) {
+            console.error(this.gl.getProgramInfoLog(this.program));
+            return;
+        }
+        this.gl.useProgram(this.program);
+        // Setup Geometry (Full Quad)
+        const positionBuffer = this.gl.createBuffer();
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), this.gl.STATIC_DRAW);
+        const posLoc = this.gl.getAttribLocation(this.program, 'a_position');
+        this.gl.enableVertexAttribArray(posLoc);
+        this.gl.vertexAttribPointer(posLoc, 2, this.gl.FLOAT, false, 0, 0);
+        // Get Uniform Locations
+        this.locations = {
+            uFlowTime: this.gl.getUniformLocation(this.program, 'u_flowTime'),
+            uGradientTexture: this.gl.getUniformLocation(this.program, 'u_gradientTexture'),
+            uInnerRadius: this.gl.getUniformLocation(this.program, 'u_innerRadius'),
+            uOuterRadius: this.gl.getUniformLocation(this.program, 'u_outerRadius'),
+            uProgress: this.gl.getUniformLocation(this.program, 'u_progress'),
+            uResolution: this.gl.getUniformLocation(this.program, 'u_resolution'),
+            uReversed: this.gl.getUniformLocation(this.program, 'u_reversed'),
+            uStartAngle: this.gl.getUniformLocation(this.program, 'u_startAngle'),
+            uVelocity: this.gl.getUniformLocation(this.program, 'u_velocity'),
+            uVolume: this.gl.getUniformLocation(this.program, 'u_volume'),
+        };
+    }
+    startAnimation() {
+        this.animationFrameId = requestAnimationFrame(this.animate);
+    }
+}
+
+export { CircularProgressLiquid };
+//# sourceMappingURL=CircularProgressLiquid.js.map

package/lib/esm/classes/CircularProgressLiquid/CircularProgressLiquid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgressLiquid.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/classes/CircularProgressLiquid/index.js

@@ -0,0 +1,2 @@
+export { CircularProgressLiquid } from './CircularProgressLiquid.js';
+//# sourceMappingURL=index.js.map

package/lib/esm/classes/CircularProgressLiquid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/esm/classes/CircularProgressLiquid/shaders/fragment.frag.js

@@ -0,0 +1,4 @@
+var fragmentShaderSource = "#version 300 es\nprecision mediump float;in vec2 v_uv;out vec4 fragColor;uniform float u_flowTime;uniform float u_progress;uniform float u_velocity;uniform vec2 u_resolution;uniform sampler2D u_gradientTexture;uniform float u_innerRadius;uniform float u_outerRadius;uniform float u_reversed;uniform float u_startAngle;uniform float u_volume;\n#define PI 3.14159265359\n#define TWO_PI 6.28318530718\nfloat random(in vec2 st){return fract(sin(dot(st.xy,vec2(12.9898,78.233)))*43758.5453123);}void main(){vec2 st=v_uv*2.0-1.0;st.x*=u_resolution.x/u_resolution.y;float radius=length(st);float absAngle=atan(st.x,st.y);if(absAngle<0.0)absAngle+=TWO_PI;float relAngle=absAngle-u_startAngle;relAngle=mod(relAngle,TWO_PI);if(relAngle<0.0)relAngle+=TWO_PI;if(u_reversed>0.5){relAngle=TWO_PI-relAngle;}float angle=mod(relAngle,TWO_PI);float centerRadius=(u_innerRadius+u_outerRadius)*0.5;float trackWidth=u_outerRadius-u_innerRadius;float safeTrackWidth=max(trackWidth,0.001);float progressAngle=u_progress*TWO_PI;float flowProfile=1.0-pow(abs(radius-centerRadius)/(safeTrackWidth*0.5),2.0);flowProfile=clamp(flowProfile,0.0,1.0);float pressureBulge=u_velocity*flowProfile*1.0;float ripples=sin(radius*40.0-u_flowTime*15.0)*0.03*abs(u_velocity);float activeBoundary=progressAngle+pressureBulge+ripples;float halfWidth=safeTrackWidth*0.5;float trackCenter=centerRadius;float capRadius=halfWidth;float roundingFactor=1.0;if(u_progress>0.9){roundingFactor=(1.0-u_progress)*10.0;}float effectiveCapRadius=capRadius*roundingFactor;float dEnd=(activeBoundary-angle)*trackCenter;float dStart=angle*trackCenter;float dSide=halfWidth-abs(radius-trackCenter);float headRounding=1.0;if(dEnd<effectiveCapRadius&&dSide<effectiveCapRadius){float cx=effectiveCapRadius-dEnd;float cy=effectiveCapRadius-dSide;float cornerDist=sqrt(cx*cx+cy*cy);headRounding=1.0-smoothstep(effectiveCapRadius-0.005,effectiveCapRadius+0.005,cornerDist);}float tailRounding=1.0;if(dStart<effectiveCapRadius&&dSide<effectiveCapRadius){float cx=effectiveCapRadius-dStart;float cy=effectiveCapRadius-dSide;float cornerDist=sqrt(cx*cx+cy*cy);tailRounding=1.0-smoothstep(effectiveCapRadius-0.005,effectiveCapRadius+0.005,cornerDist);}float roundingAlpha=headRounding*tailRounding;float fill=smoothstep(0.0,0.02,activeBoundary-angle);if(u_progress>0.99)fill=1.0;if(u_progress<0.02&&angle>6.0)fill=0.0;float ringAlpha=smoothstep(u_innerRadius-0.01,u_innerRadius,radius)-smoothstep(u_outerRadius,u_outerRadius+0.01,radius);float t=angle/TWO_PI;vec3 waterColor=texture(u_gradientTexture,vec2(t,0.5)).rgb;float flowLines=sin(angle*20.0-u_flowTime*5.0)*sin(radius*100.0)*0.1;waterColor+=vec3(flowLines);float distToHead=abs(angle-activeBoundary);float foamThickness=0.02+abs(u_velocity)*0.15;float foam=smoothstep(foamThickness,0.0,distToHead)*fill;float foamSuppress=1.0-smoothstep(0.95,1.0,u_progress);foam*=foamSuppress;float sparkle=random(v_uv*vec2(100.0,100.0)+u_flowTime);foam*=(0.8+0.5*sparkle);vec3 finalColor=mix(waterColor,vec3(1.0),foam);float trackCenterDist=abs(radius-centerRadius)/(safeTrackWidth*0.5);float cylinderNormalZ=sqrt(1.0-trackCenterDist*trackCenterDist);float specular=pow(cylinderNormalZ,3.0)*0.4;float edgeShadow=smoothstep(0.8,1.0,trackCenterDist);vec3 lightedColor=finalColor+vec3(specular);lightedColor*=(1.0-edgeShadow*0.5);finalColor=mix(finalColor,lightedColor,u_volume);float finalAlpha=ringAlpha*fill*roundingAlpha;fragColor=vec4(finalColor,finalAlpha);}";
+
+export { fragmentShaderSource as default };
+//# sourceMappingURL=fragment.frag.js.map

package/lib/esm/classes/CircularProgressLiquid/shaders/fragment.frag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fragment.frag.js","sources":["../../../../../src/classes/CircularProgressLiquid/shaders/fragment.frag"],"sourcesContent":["#version 300 es\nprecision mediump float;\n\nin vec2 v_uv;\nout vec4 fragColor;\n\nuniform float u_flowTime;\nuniform float u_progress;\nuniform float u_velocity;\nuniform vec2 u_resolution;\nuniform sampler2D u_gradientTexture;\nuniform float u_innerRadius;\nuniform float u_outerRadius;\n\nuniform float u_reversed;\nuniform float u_startAngle;\nuniform float u_volume; // New uniform for 3D/Lens effect\n\n#define PI 3.14159265359\n#define TWO_PI 6.28318530718\n\nfloat random(in vec2 st) {\n    return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);\n}\n\nvoid main() {\n    vec2 st = v_uv * 2.0 - 1.0;\n    st.x *= u_resolution.x / u_resolution.y;\n\n    float radius = length(st);\n\n    // --- ANGLE CALCULATION ---\n    float absAngle = atan(st.x, st.y);\n    if (absAngle < 0.0) absAngle += TWO_PI;\n\n    float relAngle = absAngle - u_startAngle;\n    relAngle = mod(relAngle, TWO_PI);\n    if (relAngle < 0.0) relAngle += TWO_PI;\n\n    if (u_reversed > 0.5) {\n        relAngle = TWO_PI - relAngle;\n    }\n\n    float angle = mod(relAngle, TWO_PI);\n\n    float centerRadius = (u_innerRadius + u_outerRadius) * 0.5;\n    float trackWidth = u_outerRadius - u_innerRadius;\n    float safeTrackWidth = max(trackWidth, 0.001);\n    float progressAngle = u_progress * TWO_PI;\n\n    // --- PHYSICS ---\n    // Calculate physics first so activeBoundary can be used in rounded caps for the head\n    float flowProfile = 1.0 - pow(abs(radius - centerRadius) / (safeTrackWidth * 0.5), 2.0);\n    flowProfile = clamp(flowProfile, 0.0, 1.0);\n\n    float pressureBulge = u_velocity * flowProfile * 1.0;\n    float ripples = sin(radius * 40.0 - u_flowTime * 15.0) * 0.03 * abs(u_velocity);\n\n    float activeBoundary = progressAngle + pressureBulge + ripples;\n\n    // --- ROUNDED CAPS (BORDER RADIUS) ---\n    // Logic adapted from Fire shader\n    float halfWidth = safeTrackWidth * 0.5;\n    float trackCenter = centerRadius;\n    \n    // Arc length at center radius\n    // We want full rounding when progress is small, and diminishing rounding as it approaches 100%\n    float capRadius = halfWidth; // Full rounding radius\n    \n    float roundingFactor = 1.0;\n    if (u_progress > 0.9) {\n        roundingFactor = (1.0 - u_progress) * 10.0; // 1.0 at 0.9, 0.0 at 1.0\n    }\n    \n    float effectiveCapRadius = capRadius * roundingFactor;\n    \n    // Use activeBoundary for the Head to allow bulge/stretch\n    float dEnd = (activeBoundary - angle) * trackCenter;\n    float dStart = angle * trackCenter;\n    float dSide = halfWidth - abs(radius - trackCenter);\n    \n    // Head Rounding\n    float headRounding = 1.0;\n    if (dEnd < effectiveCapRadius && dSide < effectiveCapRadius) {\n        float cx = effectiveCapRadius - dEnd;\n        float cy = effectiveCapRadius - dSide;\n        float cornerDist = sqrt(cx*cx + cy*cy);\n        headRounding = 1.0 - smoothstep(effectiveCapRadius - 0.005, effectiveCapRadius + 0.005, cornerDist);\n    }\n    \n    // Tail Rounding\n    float tailRounding = 1.0;\n    if (dStart < effectiveCapRadius && dSide < effectiveCapRadius) {\n        float cx = effectiveCapRadius - dStart;\n        float cy = effectiveCapRadius - dSide;\n        float cornerDist = sqrt(cx*cx + cy*cy);\n        tailRounding = 1.0 - smoothstep(effectiveCapRadius - 0.005, effectiveCapRadius + 0.005, cornerDist);\n    }\n    \n    float roundingAlpha = headRounding * tailRounding;\n\n    // --- FILL ---\n    float fill = smoothstep(0.0, 0.02, activeBoundary - angle);\n    if (u_progress > 0.99) fill = 1.0;\n    if (u_progress < 0.02 && angle > 6.0) fill = 0.0;\n\n    // --- COLOR ---\n    float ringAlpha = smoothstep(u_innerRadius - 0.01, u_innerRadius, radius) -\n                      smoothstep(u_outerRadius, u_outerRadius + 0.01, radius);\n\n    float t = angle / TWO_PI;\n    vec3 waterColor = texture(u_gradientTexture, vec2(t, 0.5)).rgb;\n\n    float flowLines = sin(angle * 20.0 - u_flowTime * 5.0) * sin(radius * 100.0) * 0.1;\n    waterColor += vec3(flowLines);\n\n    // --- FOAM ---\n    float distToHead = abs(angle - activeBoundary);\n    float foamThickness = 0.02 + abs(u_velocity) * 0.15;\n    float foam = smoothstep(foamThickness, 0.0, distToHead) * fill;\n    float foamSuppress = 1.0 - smoothstep(0.95, 1.0, u_progress);\n    foam *= foamSuppress;\n\n    float sparkle = random(v_uv * vec2(100.0, 100.0) + u_flowTime);\n    foam *= (0.8 + 0.5 * sparkle);\n\n    vec3 finalColor = mix(waterColor, vec3(1.0), foam);\n\n    // --- VOLUME / 3D LENS EFFECT ---\n    // Calculate a \"bulge\" factor based on distance from center of the track\n    float trackCenterDist = abs(radius - centerRadius) / (safeTrackWidth * 0.5); // 0 at center, 1 at edges\n    \n    // Simple lighting approximation\n    // Light comes from top-left (let's say). \n    // We can compute a normal-like vector.\n    // Ideally, we want the center of the track to be brighter (specular highlight) \n    // and edges to be slightly darker or refractive.\n    \n    // 1. Fake refraction/distortion at edges: already somewhat covered by flowProfile usage?\n    // Let's just add a specular highlight for \"volume\".\n    \n    float cylinderNormalZ = sqrt(1.0 - trackCenterDist * trackCenterDist); // 1.0 at center, 0.0 at edges (semi-circle profile)\n    \n    // Specular highlight running along the center of the tube\n    // Light direction assumption: perpendicular to screen? Or fixed directional?\n    // Let's do a simple \"glossy tube\" look.\n    float specular = pow(cylinderNormalZ, 3.0) * 0.4;\n    \n    // Shadowing at edges\n    float edgeShadow = smoothstep(0.8, 1.0, trackCenterDist);\n    \n    // Apply volume effect based on u_volume intensity\n    // If u_volume is 0, we just use finalColor.\n    // If u_volume is 1, we apply full lighting.\n    \n    vec3 lightedColor = finalColor + vec3(specular); // Add highlight\n    lightedColor *= (1.0 - edgeShadow * 0.5); // Darken edges\n    \n    finalColor = mix(finalColor, lightedColor, u_volume);\n\n    // --- TRANSPARENT BACKGROUND ---\n    float finalAlpha = ringAlpha * fill * roundingAlpha;\n\n    fragColor = vec4(finalColor, finalAlpha);\n}\n"],"names":[],"mappings":"AAAA,2BAAe,62GAA62G;;;;"}

package/lib/esm/classes/CircularProgressLiquid/shaders/vertex.vert.js

@@ -0,0 +1,4 @@
+var vertexShaderSource = "#version 300 es\nin vec2 a_position;out vec2 v_uv;void main(){v_uv=a_position*0.5+0.5;gl_Position=vec4(a_position,0.0,1.0);}";
+
+export { vertexShaderSource as default };
+//# sourceMappingURL=vertex.vert.js.map

package/lib/esm/classes/CircularProgressLiquid/shaders/vertex.vert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertex.vert.js","sources":["../../../../../src/classes/CircularProgressLiquid/shaders/vertex.vert"],"sourcesContent":["#version 300 es\nin vec2 a_position;\nout vec2 v_uv;\n\nvoid main() {\n    v_uv = a_position * 0.5 + 0.5;\n    gl_Position = vec4(a_position, 0.0, 1.0);\n}\n"],"names":[],"mappings":"AAAA,yBAAe,8HAA8H;;;;"}

package/lib/esm/index.js

@@ -0,0 +1,3 @@
+export { CircularProgressLiquid } from './classes/CircularProgressLiquid/CircularProgressLiquid.js';
+export { CircularProgressFire } from './classes/CircularProgressFire/CircularProgressFire.js';
+//# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/lib/esm/utils/hexToCss/hexToCss.js

@@ -0,0 +1,20 @@
+/**
+ * Converts a hexadecimal color number to a CSS color string.
+ *
+ * @param hex - The hexadecimal color number (e.g., 0xFF5733).
+ * @returns The CSS color string in #RRGGBB format.
+ *
+ * @example
+ * const cssColor = hexToCss(0xFF5733);
+ * // Returns '#ff5733'
+ *
+ * @example
+ * const cssColor = hexToCss(0x0000FF);
+ * // Returns '#0000ff'
+ */
+function hexToCss(hex) {
+    return '#' + hex.toString(16).padStart(6, '0');
+}
+
+export { hexToCss };
+//# sourceMappingURL=hexToCss.js.map

package/lib/esm/utils/hexToCss/hexToCss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hexToCss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/lib/types/classes/BaseCircularProgress/BaseCircularProgress.d.ts

@@ -0,0 +1,113 @@
+import { Mutable } from '../../types/core';
+import type { BaseCircularProgressOptions } from './types';
+/**
+ * Abstract base class for circular progress indicators.
+ * Handles common state and lifecycle management.
+ */
+export declare abstract class BaseCircularProgress {
+    protected readonly state: Required<Mutable<BaseCircularProgressOptions>>;
+    protected canvas: HTMLCanvasElement;
+    protected canvasHeight: number;
+    protected canvasWidth: number;
+    protected dpr: number;
+    protected isDestroyed: boolean;
+    protected resizeObserver: ResizeObserver | null;
+    /**
+     * Creates an instance of BaseCircularProgress.
+     *
+     * @param canvas - The HTMLCanvasElement to render on.
+     * @param options - Configuration options.
+     */
+    protected constructor(canvas: HTMLCanvasElement, options: BaseCircularProgressOptions);
+    /**
+     * Cleans up resources, event listeners, and stops animations.
+     * Must be called when the instance is no longer needed.
+     */
+    destroy(): void;
+    /**
+     * Gets the current colors array.
+     */
+    get colors(): [number, ...number[]];
+    /**
+     * Sets the colors array and updates rendering.
+     */
+    set colors(value: readonly [number, ...number[]]);
+    /**
+     * Gets the current progress value.
+     */
+    get progress(): number;
+    /**
+     * Sets the progress value.
+     */
+    set progress(value: number);
+    /**
+     * Gets whether the progress fills in reverse direction.
+     */
+    get reversed(): boolean;
+    /**
+     * Sets the reverse direction flag and updates rendering.
+     */
+    set reversed(value: boolean);
+    /**
+     * Gets the current animation speed.
+     */
+    get speed(): number;
+    /**
+     * Sets the animation speed and updates rendering.
+     */
+    set speed(value: number);
+    /**
+     * Gets the current start angle in degrees.
+     */
+    get startAngle(): number;
+    /**
+     * Sets the start angle and updates rendering.
+     */
+    set startAngle(value: number);
+    /**
+     * Gets the current thickness in pixels.
+     */
+    get thickness(): number;
+    /**
+     * Sets the thickness and updates rendering.
+     */
+    set thickness(value: number);
+    /**
+     * Handles canvas resize events from ResizeObserver.
+     * Updates canvas dimensions with devicePixelRatio and calls resize().
+     */
+    protected handleResize(): void;
+    /**
+     * Handles rendering updates when canvas is resized.
+     * Should be implemented by subclasses to adjust WebGL viewport and uniforms.
+     */
+    protected abstract resize(): void;
+    /**
+     * Updates WebGL uniforms when colors change.
+     * Should regenerate gradient textures or update color uniforms.
+     */
+    protected abstract updateColors(): void;
+    /**
+     * Updates the progress value.
+     *
+     * @param value - The new progress value (0.0 to 1.0).
+     */
+    protected abstract updateProgress(value: number): void;
+    /**
+     * Updates WebGL uniforms when direction changes.
+     */
+    protected abstract updateReversed(): void;
+    /**
+     * Updates WebGL uniforms when speed changes.
+     */
+    protected abstract updateSpeed(): void;
+    /**
+     * Updates WebGL uniforms when start angle changes.
+     */
+    protected abstract updateStartAngle(): void;
+    /**
+     * Updates WebGL uniforms when thickness changes.
+     */
+    protected abstract updateThickness(): void;
+}
+//# sourceMappingURL=BaseCircularProgress.d.ts.map

package/lib/types/classes/BaseCircularProgress/BaseCircularProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseCircularProgress.d.ts","sourceRoot":"","sources":["../../../../src/classes/BaseCircularProgress/BaseCircularProgress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAS3C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAE3D;;;GAGG;AACH,8BAAsB,oBAAoB;IACxC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,2BAA2B,CAAC,CAAC,CAAC;IAEzE,SAAS,CAAC,MAAM,EAAE,iBAAiB,CAAC;IACpC,SAAS,CAAC,YAAY,EAAE,MAAM,CAAK;IACnC,SAAS,CAAC,WAAW,EAAE,MAAM,CAAK;IAClC,SAAS,CAAC,GAAG,EAAE,MAAM,CAAK;IAC1B,SAAS,CAAC,WAAW,EAAE,OAAO,CAAS;IACvC,SAAS,CAAC,cAAc,EAAE,cAAc,GAAG,IAAI,CAAQ;IAEvD;;;;;OAKG;IACH,SAAS,aACP,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,2BAA2B;IAsBtC;;;OAGG;IACI,OAAO,IAAI,IAAI;IAWtB;;OAEG;IACH,IAAW,MAAM,IAAI,CAAC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC,CAEzC;IAED;;OAEG;IACH,IAAW,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC,EAGtD;IAED;;OAEG;IACH,IAAW,QAAQ,IAAI,MAAM,CAE5B;IAED;;OAEG;IACH,IAAW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAIhC;IAED;;OAEG;IACH,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED;;OAEG;IACH,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IAED;;OAEG;IACH,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED;;OAEG;IACH,IAAW,KAAK,CAAC,KAAK,EAAE,MAAM,EAG7B;IAED;;OAEG;IACH,IAAW,UAAU,IAAI,MAAM,CAE9B;IAED;;OAEG;IACH,IAAW,UAAU,CAAC,KAAK,EAAE,MAAM,EAGlC;IAED;;OAEG;IACH,IAAW,SAAS,IAAI,MAAM,CAE7B;IAED;;OAEG;IACH,IAAW,SAAS,CAAC,KAAK,EAAE,MAAM,EAGjC;IACD;;;OAGG;IACH,SAAS,CAAC,YAAY,IAAI,IAAI;IAoB9B;;;OAGG;IACH,SAAS,CAAC,QAAQ,CAAC,MAAM,IAAI,IAAI;IAEjC;;;OAGG;IACH,SAAS,CAAC,QAAQ,CAAC,YAAY,IAAI,IAAI;IAEvC;;;;OAIG;IACH,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAEtD;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,cAAc,IAAI,IAAI;IAEzC;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI;IAEtC;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,gBAAgB,IAAI,IAAI;IAE3C;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,IAAI;CAC3C"}

package/lib/types/classes/BaseCircularProgress/constants.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Default colors (Black).
+ */
+export declare const DEFAULT_COLORS: number[];
+/**
+ * Default reversed state (false).
+ */
+export declare const DEFAULT_REVERSED = false;
+/**
+ * Default animation speed (1.0).
+ */
+export declare const DEFAULT_SPEED = 1;
+/**
+ * Default start angle (0 degrees).
+ */
+export declare const DEFAULT_START_ANGLE = 0;
+/**
+ * Default thickness (10px).
+ */
+export declare const DEFAULT_THICKNESS = 10;
+//# sourceMappingURL=constants.d.ts.map

package/lib/types/classes/BaseCircularProgress/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/classes/BaseCircularProgress/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,cAAc,UAAa,CAAC;AAEzC;;GAEG;AACH,eAAO,MAAM,gBAAgB,QAAQ,CAAC;AAEtC;;GAEG;AACH,eAAO,MAAM,aAAa,IAAM,CAAC;AAEjC;;GAEG;AACH,eAAO,MAAM,mBAAmB,IAAI,CAAC;AAErC;;GAEG;AACH,eAAO,MAAM,iBAAiB,KAAK,CAAC"}

package/lib/types/classes/BaseCircularProgress/index.d.ts

@@ -0,0 +1,3 @@
+export { BaseCircularProgress } from './BaseCircularProgress';
+export type { BaseCircularProgressOptions } from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/types/classes/BaseCircularProgress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/classes/BaseCircularProgress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC"}

package/lib/types/classes/BaseCircularProgress/types.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Options for the BaseCircularProgress class.
+ */
+export type BaseCircularProgressOptions = {
+    /**
+     * Array of colors in hex format (e.g., 0x000000).
+     * Used for gradients or solid colors.
+     * @default [0x000000]
+     */
+    readonly colors: readonly [number, ...number[]];
+    /**
+     * The initial progress value (0.0 to 1.0).
+     * @default 0
+     */
+    readonly progress?: number;
+    /**
+     * Whether the progress should fill in the reverse direction.
+     * @default false
+     */
+    readonly reversed?: boolean;
+    /**
+     * The animation speed or flow speed.
+     * Arbitrary unit depending on implementation.
+     * @default 1.0
+     */
+    readonly speed?: number;
+    /**
+     * The starting angle of the progress in degrees.
+     * 0 is usually the top or right depending on implementation.
+     * @default 0
+     */
+    readonly startAngle?: number;
+    /**
+     * The thickness of the progress ring in pixels.
+     * Relative to the canvas size.
+     * @default 10
+     */
+    readonly thickness?: number;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/types/classes/BaseCircularProgress/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/classes/BaseCircularProgress/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,2BAA2B,GAAG;IACxC;;;;OAIG;IACH,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC;IAEhD;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAExB;;;;OAIG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAE7B;;;;OAIG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC"}