use-scroll-animate 4.6.0 → 4.8.0

package/dist/components/webgl.cjs

@@ -12,6 +12,12 @@ const SHADERS = {
     waves: 'void main(){vec2 u=v_uv;float t=u_time*.4;float w=0.;for(int i=0;i<4;i++){float f=float(i)+1.;w+=sin(u.x*6.*f+t*f)*.08/f;}float l=smoothstep(.0,.02,abs(u.y-.5-w));vec3 col=mix(vec3(.2,.5,1.),vec3(.04,.06,.15),l)+vec3(.1,.0,.2)*u.y;gl_FragColor=vec4(col,1.);}',
     aurora: 'void main(){vec2 u=v_uv;float t=u_time*.2;float b=0.;for(int i=0;i<3;i++){float f=float(i);b+=.4/abs((u.y-.6+.15*sin(u.x*3.+t+f*1.7))*(8.+f*4.));}vec3 col=vec3(.02,.03,.08)+b*mix(vec3(.1,.9,.6),vec3(.6,.3,1.),u.x)*.35;gl_FragColor=vec4(col,1.);}',
     distort: 'void main(){vec2 u=v_uv;vec2 d=u-u_mouse;float r=length(d);float k=u_hover*.08*exp(-r*r*18.);u-=normalize(d+1e-4)*k;float s=u_hover*.006;vec3 col=vec3(texture2D(u_tex,u+vec2(s,0.)).r,texture2D(u_tex,u).g,texture2D(u_tex,u-vec2(s,0.)).b);gl_FragColor=vec4(col,1.);}',
+    // 4.8 particle presets (procedural, one quad: no buffers, no per-particle JS)
+    snow: 'float h(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}void main(){vec2 u=v_uv;u.x*=u_resolution.x/max(u_resolution.y,1.);vec3 col=mix(vec3(.05,.08,.16),vec3(.12,.16,.3),v_uv.y);for(int l=0;l<3;l++){float s=8.+float(l)*7.;vec2 q=u*s;q.y+=u_time*(.6+float(l)*.35);q.x+=sin(q.y*.7+float(l))*.3;vec2 id=floor(q);vec2 f=fract(q)-.5;float r=h(id);if(r>.6){vec2 o=vec2(h(id+3.)-.5,h(id+7.)-.5)*.6;float d=length(f-o);col+=smoothstep(.09-float(l)*.02,0.,d)*(.5+.5*r);}}gl_FragColor=vec4(col,1.);}',
+    fireflies: 'float h(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}void main(){vec2 u=v_uv;u.x*=u_resolution.x/max(u_resolution.y,1.);vec3 col=vec3(.02,.04,.03);for(int l=0;l<2;l++){vec2 q=u*(5.+float(l)*4.);vec2 id=floor(q);vec2 f=fract(q)-.5;float r=h(id+float(l)*13.);vec2 o=.35*vec2(sin(u_time*(.4+r)+r*6.28),cos(u_time*(.3+r)+r*12.));float d=length(f-o);float tw=.5+.5*sin(u_time*3.*r+r*20.);col+=vec3(1.,.85,.3)*smoothstep(.12,0.,d)*tw*step(.45,r);}gl_FragColor=vec4(col,1.);}',
+    stars: 'float h(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}void main(){vec2 c=v_uv-.5;c.x*=u_resolution.x/max(u_resolution.y,1.);vec3 col=vec3(.01,.01,.04);for(int l=0;l<4;l++){float z=fract(float(l)*.25+u_time*.05);float sc=mix(20.,.5,z);vec2 q=c*sc+float(l)*7.;vec2 id=floor(q);vec2 f=fract(q)-.5;float r=h(id);float d=length(f-(vec2(h(id+1.),h(id+2.))-.5)*.7);col+=vec3(.8,.9,1.)*smoothstep(.06,0.,d)*step(.8,r)*smoothstep(0.,.5,z)*smoothstep(1.,.8,z)*2.;}gl_FragColor=vec4(col,1.);}',
+    bokeh: 'float h(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}void main(){vec2 u=v_uv;u.x*=u_resolution.x/max(u_resolution.y,1.);vec3 col=mix(vec3(.08,.03,.12),vec3(.02,.05,.12),v_uv.y);for(int l=0;l<3;l++){vec2 q=u*(2.5+float(l)*1.5);q.y-=u_time*.05*(1.+float(l));vec2 id=floor(q);vec2 f=fract(q)-.5;float r=h(id+float(l)*5.);float d=length(f-(vec2(h(id+4.),h(id+9.))-.5)*.5);vec3 tint=.5+.5*cos(r*6.28+vec3(0.,2.,4.));col+=tint*smoothstep(.3,.26,d)*.18*step(.35,r);}gl_FragColor=vec4(col,1.);}',
+    rain: 'float h(float n){return fract(sin(n)*43758.5453);}void main(){vec2 u=v_uv;vec3 col=mix(vec3(.04,.06,.1),vec3(.1,.13,.2),u.y);float n=floor(u.x*120.);float sp=.8+h(n)*1.2;float y=fract(u.y+u_time*sp+h(n+1.));float drop=smoothstep(.0,.08,y)*smoothstep(.16,.08,y)*step(.7,h(n+2.));col+=vec3(.5,.6,.8)*drop*.6;gl_FragColor=vec4(col,1.);}',
     liquid: 'void main(){vec2 u=v_uv;vec2 o=vec2(0.);for(int i=0;i<4;i++){vec4 r=u_ripples[i];if(r.w>0.){float d=distance(u,r.xy);float w=sin(d*60.-r.z*12.)*exp(-d*6.)*exp(-r.z*1.6)*r.w*.02;o+=normalize(u-r.xy+1e-4)*w;}}o+=vec2(sin(u.y*10.+u_time),cos(u.x*10.+u_time))*.002*u_hover;gl_FragColor=texture2D(u_tex,u+o);}',
 };
 /** Full fragment source for a preset or custom body (adds the shared header). */
@@ -71,9 +77,10 @@ function glQuad(canvas, frag) {
     const U = (n) => g.getUniformLocation(prog, n);
     const uT = U('u_time'), uR = U('u_resolution'), uM = U('u_mouse'), uH = U('u_hover'), uRp = U('u_ripples');
     let tex = null;
+    const extraLoc = {};
     const quad = {
-        resize() {
-            const dpr = Math.min(2, (typeof devicePixelRatio === 'number' && devicePixelRatio) || 1);
+        resize(scale = 1) {
+            const dpr = Math.min(2, (typeof devicePixelRatio === 'number' && devicePixelRatio) || 1) * Math.min(1, Math.max(0.25, scale));
             const w = Math.max(1, Math.round((canvas.clientWidth || 300) * dpr));
             const h = Math.max(1, Math.round((canvas.clientHeight || 150) * dpr));
             if (canvas.width !== w || canvas.height !== h)
@@ -96,6 +103,9 @@ function glQuad(canvas, frag) {
             g.uniform1f(uH, u.hover ?? 0);
             if (uRp)
                 g.uniform4fv(uRp, new Float32Array((u.ripples ?? []).concat(Array(16).fill(0)).slice(0, 16)));
+            if (u.extra)
+                for (const [k, v] of Object.entries(u.extra))
+                    g.uniform1f((extraLoc[k] ?? (extraLoc[k] = U(k))), v);
             g.drawArrays(g.TRIANGLES, 0, 6);
         },
         dispose() {
@@ -110,7 +120,132 @@ function glQuad(canvas, frag) {
     return quad;
 }
 
-var css = "usa-shader,usa-distort,usa-liquid{display:block;position:relative;isolation:isolate;overflow:hidden}usa-shader{background:linear-gradient(120deg,#6366f1,#ec4899 50%,#22d3ee)}usa-shader>canvas.usa-gl{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}usa-distort>canvas.usa-gl,usa-liquid>canvas.usa-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}usa-distort>img,usa-liquid>img{display:block;width:100%;height:auto}usa-distort[data-active]>img,usa-liquid[data-active]>img{visibility:hidden}usa-distort[data-fallback]>img{transition:transform 0.6s cubic-bezier(0.22,1,0.36,1),filter 0.6s}usa-distort[data-fallback]:hover>img{transform:scale(1.04);filter:saturate(1.2)}@media (prefers-reduced-motion:reduce){usa-distort[data-fallback]:hover>img{transform:none}}";
+/**
+ * 4.8 — WebGL preset library on `glQuad()`: particle presets (`snow`,
+ * `fireflies`, `stars`, `bokeh`, `rain` — usable as `<usa-shader preset>`),
+ * chainable post-processing passes for images (`<usa-post-fx>`), one CSS
+ * fallback per preset, and an adaptive quality governor (fps + battery).
+ */
+const PARTICLE_PRESETS = ['snow', 'fireflies', 'stars', 'bokeh', 'rain'];
+/** Post-processing passes: `vec3 fx(vec3 c, vec2 uv)` bodies, applied in order. `u_intensity` 0–1. */
+const POST_EFFECTS = {
+    vignette: 'c*=mix(1.,smoothstep(.85,.25,length(uv-.5)),u_intensity);',
+    grain: 'c+=(fract(sin(dot(uv*u_resolution+u_time,vec2(12.9898,78.233)))*43758.5453)-.5)*.18*u_intensity;',
+    chromatic: 'float s=.008*u_intensity;c=vec3(texture2D(u_tex,uv+vec2(s,0.)).r,c.g,texture2D(u_tex,uv-vec2(s,0.)).b);',
+    scanlines: 'c*=1.-.25*u_intensity*step(.5,fract(uv.y*u_resolution.y*.5));',
+    crt: 'vec2 d=uv-.5;float r=dot(d,d);c*=1.-.6*u_intensity*r;c*=.92+.08*sin(uv.y*u_resolution.y*3.14159);c.r*=1.+.05*u_intensity;',
+    bloom: 'vec3 b=vec3(0.);for(int i=0;i<8;i++){float a=float(i)*.785;b+=max(texture2D(u_tex,uv+vec2(cos(a),sin(a))*.012).rgb-.6,0.);}c+=b*.35*u_intensity;',
+    pixelate: 'float px=mix(1.,48.,u_intensity);vec2 g=floor(uv*u_resolution/px)*px/u_resolution;c=texture2D(u_tex,g+.5*px/u_resolution).rgb;',
+    duotone: 'float l=dot(c,vec3(.299,.587,.114));c=mix(c,mix(vec3(.12,.05,.35),vec3(1.,.55,.4),l),u_intensity);',
+    glitch: 'float k=step(.97,fract(sin(floor(uv.y*24.)+floor(u_time*6.))*4375.5));c=mix(c,texture2D(u_tex,uv+vec2(k*.04*u_intensity,0.)).rgb,k);',
+};
+/** One fragment shader running the passes in order over `u_tex` (pixel-sampling passes read the source). */
+function postFxShader(effects) {
+    const list = effects.filter((e) => POST_EFFECTS[e]);
+    const body = list.map((e) => `{${POST_EFFECTS[e]}}`).join('');
+    return `uniform float u_intensity;void main(){vec2 uv=v_uv;vec3 c=texture2D(u_tex,uv).rgb;${body}gl_FragColor=vec4(clamp(c,0.,1.),1.);}`;
+}
+/** The unified CSS fallback (no WebGL / reduced data): a still background or image filter per preset. */
+const GL_FALLBACKS = {
+    gradient: 'linear-gradient(120deg,#6366f1,#ec4899 50%,#22d3ee)',
+    plasma: 'conic-gradient(from 90deg,#f43f5e,#a855f7,#06b6d4,#f43f5e)',
+    waves: 'linear-gradient(#0a0f26,#1e3a8a)',
+    aurora: 'radial-gradient(120% 60% at 30% 40%,#10b98155,transparent),radial-gradient(100% 50% at 70% 50%,#8b5cf655,transparent),#05070f',
+    snow: 'radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(2px 2px at 70% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#fff,transparent),linear-gradient(#0d1428,#1f2a4d)',
+    fireflies: 'radial-gradient(3px 3px at 25% 40%,#fde68a,transparent),radial-gradient(3px 3px at 65% 70%,#fde68a,transparent),#05090a',
+    stars: 'radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 80% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 50% 70%,#cfe0ff,transparent),#02020a',
+    bokeh: 'radial-gradient(40px 40px at 30% 40%,#f472b633,transparent),radial-gradient(60px 60px at 70% 60%,#60a5fa33,transparent),#140820',
+    rain: 'repeating-linear-gradient(100deg,#ffffff10 0 1px,transparent 1px 14px),linear-gradient(#0a0f1a,#1a2133)',
+    // post-fx fallbacks are CSS filters on the <img>
+    'post:duotone': 'grayscale(1) sepia(.6) hue-rotate(220deg) saturate(2)',
+    'post:vignette': 'brightness(.95) contrast(1.05)',
+    'post:crt': 'contrast(1.15) saturate(1.2)',
+    'post:bloom': 'brightness(1.08) saturate(1.15)',
+};
+/** CSS fallback for a shader preset / post effect list. */
+function glFallbackCss(preset, post = false) {
+    if (post)
+        return preset.split(/\s+/).map((e) => GL_FALLBACKS[`post:${e}`]).filter(Boolean).join(' ');
+    return GL_FALLBACKS[preset] || GL_FALLBACKS.gradient;
+}
+/**
+ * Adaptive quality for GL loops: measures fps, steps the resolution scale
+ * down (1 → 0.5 → 0.35) after two slow seconds and back up after five good
+ * ones, and caps the frame rate in battery-saver mode. Pure — feed it times.
+ */
+function glGovernor(options = {}) {
+    const { minFps = 40, saverFps = 30 } = options;
+    const STEPS = [1, 0.5, 0.35];
+    let step = 0;
+    let frames = 0;
+    let winStart = -1;
+    let last = -Infinity;
+    let slow = 0;
+    let good = 0;
+    let fps = 60;
+    const g = {
+        saver: false,
+        get scale() {
+            return Math.min(STEPS[step], g.saver ? 0.6 : 1);
+        },
+        get fps() {
+            return fps;
+        },
+        tick(t) {
+            if (winStart < 0)
+                winStart = t;
+            if (g.saver && t - last < 1000 / saverFps - 1)
+                return false;
+            last = t;
+            frames++;
+            if (t - winStart >= 1000) {
+                fps = Math.round((frames * 1000) / (t - winStart));
+                frames = 0;
+                winStart = t;
+                const before = g.scale;
+                if (fps < minFps && !g.saver) {
+                    good = 0;
+                    if (++slow >= 2 && step < STEPS.length - 1)
+                        ((step++), (slow = 0));
+                }
+                else {
+                    slow = 0;
+                    if (++good >= 5 && step > 0)
+                        ((step--), (good = 0));
+                }
+                if (g.scale !== before)
+                    g.onScale?.(g.scale);
+            }
+            return true;
+        },
+    };
+    return g;
+}
+/** Watch the Battery Status API (where available) and Save-Data; calls `cb(true)` in saver conditions. Returns a stop function. */
+function watchPowerSaver(cb) {
+    let stopped = false;
+    const nav = (typeof navigator !== 'undefined' ? navigator : {});
+    const saveData = !!nav.connection?.saveData;
+    if (saveData)
+        cb(true);
+    if (typeof nav.getBattery !== 'function')
+        return () => undefined;
+    let battery = null;
+    const update = () => !stopped && cb(saveData || (!!battery && !battery.charging && battery.level <= 0.2));
+    nav.getBattery().then((b) => {
+        battery = b;
+        update();
+        b.addEventListener?.('levelchange', update);
+        b.addEventListener?.('chargingchange', update);
+    }, () => undefined);
+    return () => {
+        stopped = true;
+        battery?.removeEventListener?.('levelchange', update);
+        battery?.removeEventListener?.('chargingchange', update);
+    };
+}
+
+var css = "usa-shader,usa-distort,usa-liquid,usa-post-fx{display:block;position:relative;isolation:isolate;overflow:hidden}usa-shader{background:linear-gradient(120deg,#6366f1,#ec4899 50%,#22d3ee)}usa-shader>canvas.usa-gl{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}usa-distort>canvas.usa-gl,usa-liquid>canvas.usa-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}usa-distort>img,usa-liquid>img{display:block;width:100%;height:auto}usa-distort[data-active]>img,usa-liquid[data-active]>img{visibility:hidden}usa-distort[data-fallback]>img{transition:transform 0.6s cubic-bezier(0.22,1,0.36,1),filter 0.6s}usa-distort[data-fallback]:hover>img{transform:scale(1.04);filter:saturate(1.2)}@media (prefers-reduced-motion:reduce){usa-distort[data-fallback]:hover>img{transform:none}}usa-shader[data-fallback]{background:var(--usa-gl-fallback,linear-gradient(120deg,#6366f1,#ec4899 50%,#22d3ee))}usa-post-fx>canvas.usa-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}usa-post-fx>img{display:block;width:100%;height:auto}usa-post-fx[data-active]>img{visibility:hidden}usa-post-fx[data-fallback]>img{filter:var(--usa-gl-filter,none)}";
 
 function make(kind) {
     return (Base) => class extends Base {
@@ -123,15 +258,23 @@ function make(kind) {
             this._hover = 0;
             this._hoverTo = 0;
             this._ripples = [];
+            this._scale = 1;
         }
         static get observedAttributes() {
-            return kind === 'shader' ? ['preset', 'speed'] : ['src'];
+            return kind === 'shader' ? ['preset', 'speed', 'quality'] : kind === 'post' ? ['effects', 'intensity', 'quality'] : ['src'];
         }
         get active() {
             return !!this._q;
         }
         fallback(reason) {
             this.setAttribute('data-fallback', reason);
+            // 4.8 unified fallback: a still CSS rendering of the preset / effects
+            if (reason !== 'off') {
+                if (kind === 'shader')
+                    this.style.setProperty('--usa-gl-fallback', glFallbackCss(this.str('preset', 'gradient')));
+                if (kind === 'post')
+                    this.style.setProperty('--usa-gl-filter', glFallbackCss(this.str('effects', 'vignette grain'), true) || 'none');
+            }
             this._c?.remove();
             this._c = null;
             this._q?.dispose();
@@ -149,12 +292,13 @@ function make(kind) {
                 mouse: this._mouse,
                 hover: this._hover,
                 ripples: this._ripples.flatMap((r) => [r.x, r.y, (t - r.t) / 1000, this.num('strength', 1)]),
+                extra: kind === 'post' ? { u_intensity: base.clamp(this.num('intensity', 0.6), 0, 1) } : undefined,
             });
         }
         mount() {
             this.removeAttribute('data-fallback');
             const custom = this.querySelector('script[type="x-shader/x-fragment"]');
-            const frag = kind === 'shader' ? custom?.textContent || this.str('preset', 'gradient') : kind;
+            const frag = kind === 'shader' ? custom?.textContent || this.str('preset', 'gradient') : kind === 'post' ? postFxShader(this.str('effects', 'vignette grain').split(/[\s,]+/)) : kind;
             const img = kind === 'shader' ? null : this.querySelector('img');
             if (kind !== 'shader' && !img)
                 return this.fallback('no-image');
@@ -179,7 +323,7 @@ function make(kind) {
                 }
             };
             const draw = () => {
-                q.resize();
+                q.resize(this._scale);
                 this.frame();
             };
             if (img && !(img.complete && img.naturalWidth)) {
@@ -193,7 +337,7 @@ function make(kind) {
             this.setAttribute('data-active', '');
             this.onCleanup(() => this.removeAttribute('data-active'));
             draw();
-            if (kind !== 'shader') {
+            if (kind === 'distort' || kind === 'liquid') {
                 const pos = (e) => {
                     const r = this.getBoundingClientRect();
                     this._mouse = [base.clamp((e.clientX - r.left) / (r.width || 1), 0, 1), base.clamp(1 - (e.clientY - r.top) / (r.height || 1), 0, 1)];
@@ -210,7 +354,7 @@ function make(kind) {
             // 4.0.1: also follow the element's own size (grid reflow, card expand…)
             if (typeof ResizeObserver !== 'undefined') {
                 const ro = new ResizeObserver(() => {
-                    q.resize();
+                    q.resize(this._scale);
                     if (!this._id)
                         this.frame();
                 });
@@ -219,9 +363,20 @@ function make(kind) {
             }
             if (this.reduced)
                 return; // one static frame, no loop
+            // 4.8 adaptive quality: fps-driven resolution steps + battery saver frame cap
+            const gov = glGovernor();
+            const auto = this.str('quality', 'auto') !== 'high';
+            gov.onScale = (sc) => {
+                this._scale = sc;
+                this.setAttribute('data-quality', String(sc));
+                q.resize(sc);
+            };
+            if (auto)
+                this.onCleanup(watchPowerSaver((saver) => ((gov.saver = saver), gov.onScale?.(gov.scale))));
             let visible = false;
             const loop = () => {
-                this.frame();
+                if (!auto || gov.tick(base.now()))
+                    this.frame();
                 this._id = base.raf(loop);
             };
             const sync = () => {
@@ -232,7 +387,7 @@ function make(kind) {
             };
             this.inView((v) => ((visible = v), sync()));
             this.listen(document, 'visibilitychange', sync);
-            this.listen(window, 'resize', () => q.resize(), { passive: true });
+            this.listen(window, 'resize', () => q.resize(this._scale), { passive: true });
             this.onCleanup(() => base.caf(this._id));
         }
     };
@@ -260,6 +415,16 @@ function defineDistort(tag = 'usa-distort') {
 function defineLiquid(tag = 'usa-liquid') {
     return base.defineElement(tag, make('liquid'), { id: 'webgl', text: css });
 }
+/**
+ * `<usa-post-fx effects="vignette grain crt" intensity="0.6">` — GPU
+ * post-processing over the `<img>` inside (4.8): `vignette` · `grain` ·
+ * `chromatic` · `scanlines` · `crt` · `bloom` · `pixelate` · `duotone` ·
+ * `glitch`, chained in order. `quality="high"` disables adaptive quality.
+ * Fallback: the image with an approximate CSS filter.
+ */
+function definePostFx(tag = 'usa-post-fx') {
+    return base.defineElement(tag, make('post'), { id: 'webgl', text: css });
+}
 
 /**
  * use-scroll-animate/components/webgl — lightweight canvas / WebGL (v3.4).
@@ -272,16 +437,25 @@ function defineWebglComponents() {
     defineShader();
     defineDistort();
     defineLiquid();
+    definePostFx();
 }
 
 exports.configureComponents = base.configureComponents;
 exports.prefersReducedMotion = base.prefersReducedMotion;
+exports.GL_FALLBACKS = GL_FALLBACKS;
+exports.PARTICLE_PRESETS = PARTICLE_PRESETS;
+exports.POST_EFFECTS = POST_EFFECTS;
 exports.SHADERS = SHADERS;
 exports.defineDistort = defineDistort;
 exports.defineLiquid = defineLiquid;
+exports.definePostFx = definePostFx;
 exports.defineShader = defineShader;
 exports.defineWebglComponents = defineWebglComponents;
 exports.fragmentSource = fragmentSource;
+exports.glFallbackCss = glFallbackCss;
+exports.glGovernor = glGovernor;
 exports.glQuad = glQuad;
+exports.postFxShader = postFxShader;
 exports.supportsWebGL = supportsWebGL;
+exports.watchPowerSaver = watchPowerSaver;
 //# sourceMappingURL=webgl.cjs.map

package/dist/components/webgl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"webgl.cjs","sources":["../../src/components/webgl/gl.ts","../../src/components/webgl/elements.ts","../../src/components/webgl/index.ts"],"sourcesContent":["/** Minimal WebGL runner: one full-canvas quad, one fragment shader, optional image texture. */\n\nexport const VERTEX = 'attribute vec2 p;varying vec2 v_uv;void main(){v_uv=p*.5+.5;gl_Position=vec4(p,0.,1.);}';\nconst HEAD = 'precision mediump float;varying vec2 v_uv;uniform float u_time;uniform vec2 u_resolution;uniform vec2 u_mouse;uniform float u_hover;uniform sampler2D u_tex;uniform vec4 u_ripples[4];\\n';\n\n/** Built-in fragment shaders (bodies; uniforms `u_time`, `u_resolution`, `u_mouse` 0–1, `u_hover` 0–1, `u_tex`, `u_ripples[4]` = x, y, age, strength). */\nexport const SHADERS: Record<string, string> = {\n  gradient: 'void main(){vec2 u=v_uv;float t=u_time*.15;vec3 a=vec3(.39,.4,.95),b=vec3(.93,.29,.6),c=vec3(.13,.83,.93);float k=.5+.5*sin(u.x*3.+t*2.)*cos(u.y*2.-t);vec3 col=mix(mix(a,b,u.x+.2*sin(t)),c,k*.6);gl_FragColor=vec4(col,1.);}',\n  plasma: 'void main(){vec2 u=v_uv*4.;float t=u_time*.6;float v=sin(u.x+t)+sin(u.y+t*.7)+sin(u.x+u.y+t*.5)+sin(length(u-2.+vec2(sin(t),cos(t)))*2.);vec3 col=.5+.5*cos(v+vec3(0.,2.,4.));gl_FragColor=vec4(col,1.);}',\n  waves: 'void main(){vec2 u=v_uv;float t=u_time*.4;float w=0.;for(int i=0;i<4;i++){float f=float(i)+1.;w+=sin(u.x*6.*f+t*f)*.08/f;}float l=smoothstep(.0,.02,abs(u.y-.5-w));vec3 col=mix(vec3(.2,.5,1.),vec3(.04,.06,.15),l)+vec3(.1,.0,.2)*u.y;gl_FragColor=vec4(col,1.);}',\n  aurora: 'void main(){vec2 u=v_uv;float t=u_time*.2;float b=0.;for(int i=0;i<3;i++){float f=float(i);b+=.4/abs((u.y-.6+.15*sin(u.x*3.+t+f*1.7))*(8.+f*4.));}vec3 col=vec3(.02,.03,.08)+b*mix(vec3(.1,.9,.6),vec3(.6,.3,1.),u.x)*.35;gl_FragColor=vec4(col,1.);}',\n  distort: 'void main(){vec2 u=v_uv;vec2 d=u-u_mouse;float r=length(d);float k=u_hover*.08*exp(-r*r*18.);u-=normalize(d+1e-4)*k;float s=u_hover*.006;vec3 col=vec3(texture2D(u_tex,u+vec2(s,0.)).r,texture2D(u_tex,u).g,texture2D(u_tex,u-vec2(s,0.)).b);gl_FragColor=vec4(col,1.);}',\n  liquid: 'void main(){vec2 u=v_uv;vec2 o=vec2(0.);for(int i=0;i<4;i++){vec4 r=u_ripples[i];if(r.w>0.){float d=distance(u,r.xy);float w=sin(d*60.-r.z*12.)*exp(-d*6.)*exp(-r.z*1.6)*r.w*.02;o+=normalize(u-r.xy+1e-4)*w;}}o+=vec2(sin(u.y*10.+u_time),cos(u.x*10.+u_time))*.002*u_hover;gl_FragColor=texture2D(u_tex,u+o);}',\n};\n\n/** Full fragment source for a preset or custom body (adds the shared header). */\nexport function fragmentSource(body: string): string {\n  const src = SHADERS[body] || body;\n  return /precision\\s+\\w+\\s+float/.test(src) ? src : HEAD + src;\n}\n\n/** `true` when the browser can create a WebGL context (cached). */\nlet support: boolean | undefined;\nexport function supportsWebGL(): boolean {\n  if (support !== undefined) return support;\n  try {\n    const c = typeof document !== 'undefined' ? document.createElement('canvas') : null;\n    support = !!(c && (c.getContext('webgl') || c.getContext('experimental-webgl')));\n  } catch {\n    support = false;\n  }\n  return support;\n}\n\nexport interface GLQuad {\n  /** Draw a frame with these uniform values. */\n  render(u: { time?: number; mouse?: [number, number]; hover?: number; ripples?: number[] }): void;\n  /** Resize the drawing buffer to the canvas' CSS size × DPR (≤ 2). */\n  resize(): void;\n  /** Upload an image as `u_tex`. */\n  texture(img: TexImageSource): void;\n  dispose(): void;\n}\n\n/** Compile `frag` on a full-canvas quad, or `null` when WebGL / compilation is unavailable. */\nexport function glQuad(canvas: HTMLCanvasElement, frag: string): GLQuad | null {\n  let gl: WebGLRenderingContext | null = null;\n  try {\n    gl = (canvas.getContext('webgl', { premultipliedAlpha: false, antialias: false }) || canvas.getContext('experimental-webgl')) as WebGLRenderingContext | null;\n  } catch {\n    gl = null;\n  }\n  if (!gl) return null;\n  const g = gl;\n  const sh = (type: number, src: string) => {\n    const s = g.createShader(type)!;\n    g.shaderSource(s, src);\n    g.compileShader(s);\n    return g.getShaderParameter(s, g.COMPILE_STATUS) ? s : null;\n  };\n  const vs = sh(g.VERTEX_SHADER, VERTEX);\n  const fs = sh(g.FRAGMENT_SHADER, fragmentSource(frag));\n  if (!vs || !fs) return null;\n  const prog = g.createProgram()!;\n  g.attachShader(prog, vs);\n  g.attachShader(prog, fs);\n  g.linkProgram(prog);\n  if (!g.getProgramParameter(prog, g.LINK_STATUS)) return null;\n  g.useProgram(prog);\n  const buf = g.createBuffer();\n  g.bindBuffer(g.ARRAY_BUFFER, buf);\n  g.bufferData(g.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), g.STATIC_DRAW);\n  const loc = g.getAttribLocation(prog, 'p');\n  g.enableVertexAttribArray(loc);\n  g.vertexAttribPointer(loc, 2, g.FLOAT, false, 0, 0);\n  const U = (n: string) => g.getUniformLocation(prog, n);\n  const uT = U('u_time'), uR = U('u_resolution'), uM = U('u_mouse'), uH = U('u_hover'), uRp = U('u_ripples');\n  let tex: WebGLTexture | null = null;\n  const quad: GLQuad = {\n    resize() {\n      const dpr = Math.min(2, (typeof devicePixelRatio === 'number' && devicePixelRatio) || 1);\n      const w = Math.max(1, Math.round((canvas.clientWidth || 300) * dpr));\n      const h = Math.max(1, Math.round((canvas.clientHeight || 150) * dpr));\n      if (canvas.width !== w || canvas.height !== h) ((canvas.width = w), (canvas.height = h));\n      g.viewport(0, 0, w, h);\n    },\n    texture(img) {\n      tex = tex || g.createTexture();\n      g.bindTexture(g.TEXTURE_2D, tex);\n      g.pixelStorei(g.UNPACK_FLIP_Y_WEBGL, true);\n      g.texParameteri(g.TEXTURE_2D, g.TEXTURE_WRAP_S, g.CLAMP_TO_EDGE);\n      g.texParameteri(g.TEXTURE_2D, g.TEXTURE_WRAP_T, g.CLAMP_TO_EDGE);\n      g.texParameteri(g.TEXTURE_2D, g.TEXTURE_MIN_FILTER, g.LINEAR);\n      g.texImage2D(g.TEXTURE_2D, 0, g.RGBA, g.RGBA, g.UNSIGNED_BYTE, img);\n    },\n    render(u) {\n      g.uniform1f(uT, u.time ?? 0);\n      g.uniform2f(uR, canvas.width, canvas.height);\n      g.uniform2f(uM, ...(u.mouse ?? [0.5, 0.5]));\n      g.uniform1f(uH, u.hover ?? 0);\n      if (uRp) g.uniform4fv(uRp, new Float32Array((u.ripples ?? []).concat(Array(16).fill(0)).slice(0, 16)));\n      g.drawArrays(g.TRIANGLES, 0, 6);\n    },\n    dispose() {\n      g.deleteProgram(prog);\n      g.deleteBuffer(buf);\n      if (tex) g.deleteTexture(tex);\n      g.getExtension('WEBGL_lose_context')?.loseContext();\n    },\n  };\n  quad.resize();\n  return quad;\n}\n","import { defineElement, raf, caf, now, clamp, type UsaElement, getBase } from '../base';\n\ntype BaseCtor = ReturnType<typeof getBase>;\nimport { glQuad, type GLQuad } from './gl';\nimport css from './webgl.css?raw';\n\n/**\n * Shared shell for the WebGL elements: a canvas over (or behind) the\n * content that renders only while visible and the tab is shown, a DPR cap\n * of 2, and a graceful fallback (`data-fallback`) when WebGL, the shader\n * or the image (CORS) is unavailable — the original content / CSS stays.\n */\nexport interface UsaGLElement extends UsaElement {\n  /** `true` once WebGL rendering is active (otherwise the CSS fallback shows). */\n  readonly active: boolean;\n}\n\ntype Kind = 'shader' | 'distort' | 'liquid';\n\nfunction make(kind: Kind) {\n  return (Base: BaseCtor): CustomElementConstructor =>\n    class extends Base {\n      static get observedAttributes(): string[] {\n        return kind === 'shader' ? ['preset', 'speed'] : ['src'];\n      }\n      private _q: GLQuad | null = null;\n      private _c: HTMLCanvasElement | null = null;\n      private _id = 0;\n      private _mouse: [number, number] = [0.5, 0.5];\n      private _hover = 0;\n      private _hoverTo = 0;\n      private _ripples: { x: number; y: number; t: number }[] = [];\n\n      get active(): boolean {\n        return !!this._q;\n      }\n\n      private fallback(reason: string): void {\n        this.setAttribute('data-fallback', reason);\n        this._c?.remove();\n        this._c = null;\n        this._q?.dispose();\n        this._q = null;\n      }\n\n      private frame(): void {\n        const q = this._q;\n        if (!q) return;\n        this._hover += (this._hoverTo - this._hover) * 0.12;\n        const t = now();\n        this._ripples = this._ripples.filter((r) => t - r.t < 2500);\n        q.render({\n          time: (t / 1000) * this.num('speed', 1),\n          mouse: this._mouse,\n          hover: this._hover,\n          ripples: this._ripples.flatMap((r) => [r.x, r.y, (t - r.t) / 1000, this.num('strength', 1)]),\n        });\n      }\n\n      mount(): void {\n        this.removeAttribute('data-fallback');\n        const custom = this.querySelector('script[type=\"x-shader/x-fragment\"]');\n        const frag = kind === 'shader' ? custom?.textContent || this.str('preset', 'gradient') : kind;\n        const img = kind === 'shader' ? null : (this.querySelector('img') as HTMLImageElement | null);\n        if (kind !== 'shader' && !img) return this.fallback('no-image');\n        const c = (this._c = document.createElement('canvas'));\n        c.setAttribute('aria-hidden', 'true');\n        c.className = 'usa-gl';\n        this.prepend(c);\n        const q = (this._q = glQuad(c, frag));\n        if (!q) return this.fallback('webgl');\n        this.onCleanup(() => this.fallback('off'));\n        const start = () => {\n          if (!img) return true;\n          try {\n            q.texture(img);\n            return true;\n          } catch {\n            this.fallback('image');\n            return false;\n          }\n        };\n        const draw = () => {\n          q.resize();\n          this.frame();\n        };\n        if (img && !(img.complete && img.naturalWidth)) {\n          if (!img.crossOrigin && /^https?:/.test(img.src) && !img.src.startsWith(location.origin)) img.crossOrigin = 'anonymous';\n          this.listen(img, 'load', () => start() && draw());\n          this.listen(img, 'error', () => this.fallback('image'));\n        } else if (!start()) return;\n        this.setAttribute('data-active', '');\n        this.onCleanup(() => this.removeAttribute('data-active'));\n        draw();\n        if (kind !== 'shader') {\n          const pos = (e: PointerEvent) => {\n            const r = this.getBoundingClientRect();\n            this._mouse = [clamp((e.clientX - r.left) / (r.width || 1), 0, 1), clamp(1 - (e.clientY - r.top) / (r.height || 1), 0, 1)];\n          };\n          this.listen(this, 'pointermove', pos);\n          this.listen(this, 'pointerenter', (e: PointerEvent) => (pos(e), (this._hoverTo = 1)));\n          this.listen(this, 'pointerleave', () => (this._hoverTo = 0));\n          if (kind === 'liquid')\n            this.listen(this, 'pointerdown', (e: PointerEvent) => {\n              pos(e);\n              this._ripples = [...this._ripples.slice(-3), { x: this._mouse[0], y: this._mouse[1], t: now() }];\n            });\n        }\n        // 4.0.1: also follow the element's own size (grid reflow, card expand…)\n        if (typeof ResizeObserver !== 'undefined') {\n          const ro = new ResizeObserver(() => {\n            q.resize();\n            if (!this._id) this.frame();\n          });\n          ro.observe(this);\n          this.onCleanup(() => ro.disconnect());\n        }\n        if (this.reduced) return; // one static frame, no loop\n        let visible = false;\n        const loop = () => {\n          this.frame();\n          this._id = raf(loop);\n        };\n        const sync = () => {\n          caf(this._id);\n          this._id = 0;\n          if (visible && !document.hidden) this._id = raf(loop);\n        };\n        this.inView((v: boolean) => ((visible = v), sync()));\n        this.listen(document, 'visibilitychange', sync);\n        this.listen(window, 'resize', () => q.resize(), { passive: true });\n        this.onCleanup(() => caf(this._id));\n      }\n    };\n}\n\n/**\n * `<usa-shader>` — GPU shader background behind its content. `preset`\n * (`gradient` · `plasma` · `waves` · `aurora`) or your own fragment shader in\n * `<script type=\"x-shader/x-fragment\">` (uniforms `u_time`, `u_resolution`,\n * `u_mouse`, `v_uv`); `speed`. Without WebGL: the element's CSS background.\n */\nexport function defineShader(tag = 'usa-shader'): CustomElementConstructor | undefined {\n  return defineElement(tag, make('shader'), { id: 'webgl', text: css });\n}\n\n/**\n * `<usa-distort>` — hover distortion + RGB split on the `<img>` inside,\n * following the pointer. Without WebGL / CORS: a gentle CSS zoom.\n */\nexport function defineDistort(tag = 'usa-distort'): CustomElementConstructor | undefined {\n  return defineElement(tag, make('distort'), { id: 'webgl', text: css });\n}\n\n/**\n * `<usa-liquid>` — liquid image: clicks / taps send ripples through the\n * `<img>` inside, hover adds a gentle wobble; `strength`. Fallback: plain image.\n */\nexport function defineLiquid(tag = 'usa-liquid'): CustomElementConstructor | undefined {\n  return defineElement(tag, make('liquid'), { id: 'webgl', text: css });\n}\n","/**\n * use-scroll-animate/components/webgl — lightweight canvas / WebGL (v3.4).\n * `<usa-shader>` (shader backgrounds), `<usa-distort>` (hover image\n * distortion), `<usa-liquid>` (ripple images) on a tiny single-quad runner\n * (`glQuad()`), with graceful fallbacks when WebGL is unavailable.\n */\nimport { defineShader, defineDistort, defineLiquid, type UsaGLElement } from './elements';\n\nexport { defineShader, defineDistort, defineLiquid };\nexport { glQuad, supportsWebGL, fragmentSource, SHADERS } from './gl';\nexport type { GLQuad } from './gl';\nexport type { UsaGLElement };\nexport { configureComponents, prefersReducedMotion } from '../base';\nexport type { ComponentsConfig, UsaElement } from '../base';\n\n/** Register every component of this category under its default tag. */\nexport function defineWebglComponents(): void {\n  defineShader();\n  defineDistort();\n  defineLiquid();\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'usa-shader': UsaGLElement;\n    'usa-distort': UsaGLElement;\n    'usa-liquid': UsaGLElement;\n  }\n}\n"],"names":["now","clamp","raf","caf","defineElement"],"mappings":";;;;AAAA;AAEO,MAAM,MAAM,GAAG,yFAAyF;AAC/G,MAAM,IAAI,GAAG,0LAA0L;AAEvM;AACO,MAAM,OAAO,GAA2B;AAC7C,IAAA,QAAQ,EAAE,gOAAgO;AAC1O,IAAA,MAAM,EAAE,2MAA2M;AACnN,IAAA,KAAK,EAAE,oQAAoQ;AAC3Q,IAAA,MAAM,EAAE,uPAAuP;AAC/P,IAAA,OAAO,EAAE,0QAA0Q;AACnR,IAAA,MAAM,EAAE,kTAAkT;;AAG5T;AACM,SAAU,cAAc,CAAC,IAAY,EAAA;IACzC,MAAM,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI;AACjC,IAAA,OAAO,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG;AAC/D;AAEA;AACA,IAAI,OAA4B;SAChB,aAAa,GAAA;IAC3B,IAAI,OAAO,KAAK,SAAS;AAAE,QAAA,OAAO,OAAO;AACzC,IAAA,IAAI;AACF,QAAA,MAAM,CAAC,GAAG,OAAO,QAAQ,KAAK,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,IAAI;QACnF,OAAO,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAClF;AAAE,IAAA,MAAM;QACN,OAAO,GAAG,KAAK;IACjB;AACA,IAAA,OAAO,OAAO;AAChB;AAYA;AACM,SAAU,MAAM,CAAC,MAAyB,EAAE,IAAY,EAAA;IAC5D,IAAI,EAAE,GAAiC,IAAI;AAC3C,IAAA,IAAI;QACF,EAAE,IAAI,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,kBAAkB,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,IAAI,MAAM,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAiC;IAC/J;AAAE,IAAA,MAAM;QACN,EAAE,GAAG,IAAI;IACX;AACA,IAAA,IAAI,CAAC,EAAE;AAAE,QAAA,OAAO,IAAI;IACpB,MAAM,CAAC,GAAG,EAAE;AACZ,IAAA,MAAM,EAAE,GAAG,CAAC,IAAY,EAAE,GAAW,KAAI;QACvC,MAAM,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,IAAI,CAAE;AAC/B,QAAA,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,GAAG,CAAC;AACtB,QAAA,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC;AAClB,QAAA,OAAO,CAAC,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,IAAI;AAC7D,IAAA,CAAC;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,MAAM,CAAC;AACtC,IAAA,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;AACtD,IAAA,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE;AAAE,QAAA,OAAO,IAAI;AAC3B,IAAA,MAAM,IAAI,GAAG,CAAC,CAAC,aAAa,EAAG;AAC/B,IAAA,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC;AACxB,IAAA,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC;AACxB,IAAA,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC;IACnB,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC,CAAC,WAAW,CAAC;AAAE,QAAA,OAAO,IAAI;AAC5D,IAAA,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC;AAClB,IAAA,MAAM,GAAG,GAAG,CAAC,CAAC,YAAY,EAAE;IAC5B,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,EAAE,GAAG,CAAC;IACjC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,EAAE,IAAI,YAAY,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC;IACzG,MAAM,GAAG,GAAG,CAAC,CAAC,iBAAiB,CAAC,IAAI,EAAE,GAAG,CAAC;AAC1C,IAAA,CAAC,CAAC,uBAAuB,CAAC,GAAG,CAAC;AAC9B,IAAA,CAAC,CAAC,mBAAmB,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;AACnD,IAAA,MAAM,CAAC,GAAG,CAAC,CAAS,KAAK,CAAC,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC,CAAC;AACtD,IAAA,MAAM,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,cAAc,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,SAAS,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,SAAS,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,WAAW,CAAC;IAC1G,IAAI,GAAG,GAAwB,IAAI;AACnC,IAAA,MAAM,IAAI,GAAW;QACnB,MAAM,GAAA;AACJ,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,OAAO,gBAAgB,KAAK,QAAQ,IAAI,gBAAgB,KAAK,CAAC,CAAC;YACxF,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC;YACpE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC;YACrE,IAAI,MAAM,CAAC,KAAK,KAAK,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;AAAE,gBAAA,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;YACvF,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QACxB,CAAC;AACD,QAAA,OAAO,CAAC,GAAG,EAAA;AACT,YAAA,GAAG,GAAG,GAAG,IAAI,CAAC,CAAC,aAAa,EAAE;YAC9B,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,EAAE,GAAG,CAAC;YAChC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,mBAAmB,EAAE,IAAI,CAAC;AAC1C,YAAA,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,aAAa,CAAC;AAChE,YAAA,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,aAAa,CAAC;AAChE,YAAA,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,kBAAkB,EAAE,CAAC,CAAC,MAAM,CAAC;YAC7D,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,aAAa,EAAE,GAAG,CAAC;QACrE,CAAC;AACD,QAAA,MAAM,CAAC,CAAC,EAAA;YACN,CAAC,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC;AAC5B,YAAA,CAAC,CAAC,SAAS,CAAC,EAAE,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;AAC5C,YAAA,CAAC,CAAC,SAAS,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;YAC3C,CAAC,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;AAC7B,YAAA,IAAI,GAAG;AAAE,gBAAA,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;YACtG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC;QACjC,CAAC;QACD,OAAO,GAAA;AACL,YAAA,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC;AACrB,YAAA,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC;AACnB,YAAA,IAAI,GAAG;AAAE,gBAAA,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC;YAC7B,CAAC,CAAC,YAAY,CAAC,oBAAoB,CAAC,EAAE,WAAW,EAAE;QACrD,CAAC;KACF;IACD,IAAI,CAAC,MAAM,EAAE;AACb,IAAA,OAAO,IAAI;AACb;;;;AC7FA,SAAS,IAAI,CAAC,IAAU,EAAA;AACtB,IAAA,OAAO,CAAC,IAAc,KACpB,cAAc,IAAI,CAAA;AAAlB,QAAA,WAAA,GAAA;;YAIU,IAAA,CAAA,EAAE,GAAkB,IAAI;YACxB,IAAA,CAAA,EAAE,GAA6B,IAAI;YACnC,IAAA,CAAA,GAAG,GAAG,CAAC;AACP,YAAA,IAAA,CAAA,MAAM,GAAqB,CAAC,GAAG,EAAE,GAAG,CAAC;YACrC,IAAA,CAAA,MAAM,GAAG,CAAC;YACV,IAAA,CAAA,QAAQ,GAAG,CAAC;YACZ,IAAA,CAAA,QAAQ,GAA0C,EAAE;QAsG9D;AA/GE,QAAA,WAAW,kBAAkB,GAAA;AAC3B,YAAA,OAAO,IAAI,KAAK,QAAQ,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;QAC1D;AASA,QAAA,IAAI,MAAM,GAAA;AACR,YAAA,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE;QAClB;AAEQ,QAAA,QAAQ,CAAC,MAAc,EAAA;AAC7B,YAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;AAC1C,YAAA,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE;AACjB,YAAA,IAAI,CAAC,EAAE,GAAG,IAAI;AACd,YAAA,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE;AAClB,YAAA,IAAI,CAAC,EAAE,GAAG,IAAI;QAChB;QAEQ,KAAK,GAAA;AACX,YAAA,MAAM,CAAC,GAAG,IAAI,CAAC,EAAE;AACjB,YAAA,IAAI,CAAC,CAAC;gBAAE;AACR,YAAA,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI;AACnD,YAAA,MAAM,CAAC,GAAGA,QAAG,EAAE;YACf,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;YAC3D,CAAC,CAAC,MAAM,CAAC;AACP,gBAAA,IAAI,EAAE,CAAC,CAAC,GAAG,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC;gBACvC,KAAK,EAAE,IAAI,CAAC,MAAM;gBAClB,KAAK,EAAE,IAAI,CAAC,MAAM;AAClB,gBAAA,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;AAC7F,aAAA,CAAC;QACJ;QAEA,KAAK,GAAA;AACH,YAAA,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC;YACrC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,oCAAoC,CAAC;YACvE,MAAM,IAAI,GAAG,IAAI,KAAK,QAAQ,GAAG,MAAM,EAAE,WAAW,IAAI,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,IAAI;AAC7F,YAAA,MAAM,GAAG,GAAG,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAI,IAAI,CAAC,aAAa,CAAC,KAAK,CAA6B;AAC7F,YAAA,IAAI,IAAI,KAAK,QAAQ,IAAI,CAAC,GAAG;AAAE,gBAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC;AAC/D,YAAA,MAAM,CAAC,IAAI,IAAI,CAAC,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AACtD,YAAA,CAAC,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;AACrC,YAAA,CAAC,CAAC,SAAS,GAAG,QAAQ;AACtB,YAAA,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;AACf,YAAA,MAAM,CAAC,IAAI,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;AACrC,YAAA,IAAI,CAAC,CAAC;AAAE,gBAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;AACrC,YAAA,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YAC1C,MAAM,KAAK,GAAG,MAAK;AACjB,gBAAA,IAAI,CAAC,GAAG;AAAE,oBAAA,OAAO,IAAI;AACrB,gBAAA,IAAI;AACF,oBAAA,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC;AACd,oBAAA,OAAO,IAAI;gBACb;AAAE,gBAAA,MAAM;AACN,oBAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;AACtB,oBAAA,OAAO,KAAK;gBACd;AACF,YAAA,CAAC;YACD,MAAM,IAAI,GAAG,MAAK;gBAChB,CAAC,CAAC,MAAM,EAAE;gBACV,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,CAAC;AACD,YAAA,IAAI,GAAG,IAAI,EAAE,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,YAAY,CAAC,EAAE;gBAC9C,IAAI,CAAC,GAAG,CAAC,WAAW,IAAI,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC;AAAE,oBAAA,GAAG,CAAC,WAAW,GAAG,WAAW;AACvH,gBAAA,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC;AACjD,gBAAA,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YACzD;iBAAO,IAAI,CAAC,KAAK,EAAE;gBAAE;AACrB,YAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;AACpC,YAAA,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;AACzD,YAAA,IAAI,EAAE;AACN,YAAA,IAAI,IAAI,KAAK,QAAQ,EAAE;AACrB,gBAAA,MAAM,GAAG,GAAG,CAAC,CAAe,KAAI;AAC9B,oBAAA,MAAM,CAAC,GAAG,IAAI,CAAC,qBAAqB,EAAE;oBACtC,IAAI,CAAC,MAAM,GAAG,CAACC,UAAK,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEA,UAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAC5H,gBAAA,CAAC;gBACD,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,EAAE,GAAG,CAAC;gBACrC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,EAAE,CAAC,CAAe,MAAM,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC;AACrF,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,EAAE,OAAO,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;gBAC5D,IAAI,IAAI,KAAK,QAAQ;oBACnB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC,CAAe,KAAI;wBACnD,GAAG,CAAC,CAAC,CAAC;AACN,wBAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAED,QAAG,EAAE,EAAE,CAAC;AAClG,oBAAA,CAAC,CAAC;YACN;;AAEA,YAAA,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;AACzC,gBAAA,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,MAAK;oBACjC,CAAC,CAAC,MAAM,EAAE;oBACV,IAAI,CAAC,IAAI,CAAC,GAAG;wBAAE,IAAI,CAAC,KAAK,EAAE;AAC7B,gBAAA,CAAC,CAAC;AACF,gBAAA,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;gBAChB,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,UAAU,EAAE,CAAC;YACvC;YACA,IAAI,IAAI,CAAC,OAAO;AAAE,gBAAA,OAAO;YACzB,IAAI,OAAO,GAAG,KAAK;YACnB,MAAM,IAAI,GAAG,MAAK;gBAChB,IAAI,CAAC,KAAK,EAAE;AACZ,gBAAA,IAAI,CAAC,GAAG,GAAGE,QAAG,CAAC,IAAI,CAAC;AACtB,YAAA,CAAC;YACD,MAAM,IAAI,GAAG,MAAK;AAChB,gBAAAC,QAAG,CAAC,IAAI,CAAC,GAAG,CAAC;AACb,gBAAA,IAAI,CAAC,GAAG,GAAG,CAAC;AACZ,gBAAA,IAAI,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM;AAAE,oBAAA,IAAI,CAAC,GAAG,GAAGD,QAAG,CAAC,IAAI,CAAC;AACvD,YAAA,CAAC;AACD,YAAA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAU,MAAM,CAAC,OAAO,GAAG,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC;YACpD,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,kBAAkB,EAAE,IAAI,CAAC;YAC/C,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAClE,YAAA,IAAI,CAAC,SAAS,CAAC,MAAMC,QAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACrC;KACD;AACL;AAEA;;;;;AAKG;AACG,SAAU,YAAY,CAAC,GAAG,GAAG,YAAY,EAAA;AAC7C,IAAA,OAAOC,kBAAa,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;AACvE;AAEA;;;AAGG;AACG,SAAU,aAAa,CAAC,GAAG,GAAG,aAAa,EAAA;AAC/C,IAAA,OAAOA,kBAAa,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;AACxE;AAEA;;;AAGG;AACG,SAAU,YAAY,CAAC,GAAG,GAAG,YAAY,EAAA;AAC7C,IAAA,OAAOA,kBAAa,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;AACvE;;AChKA;;;;;AAKG;AAUH;SACgB,qBAAqB,GAAA;AACnC,IAAA,YAAY,EAAE;AACd,IAAA,aAAa,EAAE;AACf,IAAA,YAAY,EAAE;AAChB;;;;;;;;;;;;;"}
+{"version":3,"file":"webgl.cjs","sources":["../../src/components/webgl/gl.ts","../../src/components/webgl/presets.ts","../../src/components/webgl/elements.ts","../../src/components/webgl/index.ts"],"sourcesContent":["/** Minimal WebGL runner: one full-canvas quad, one fragment shader, optional image texture. */\n\nexport const VERTEX = 'attribute vec2 p;varying vec2 v_uv;void main(){v_uv=p*.5+.5;gl_Position=vec4(p,0.,1.);}';\nconst HEAD = 'precision mediump float;varying vec2 v_uv;uniform float u_time;uniform vec2 u_resolution;uniform vec2 u_mouse;uniform float u_hover;uniform sampler2D u_tex;uniform vec4 u_ripples[4];\\n';\n\n/** Built-in fragment shaders (bodies; uniforms `u_time`, `u_resolution`, `u_mouse` 0–1, `u_hover` 0–1, `u_tex`, `u_ripples[4]` = x, y, age, strength). */\nexport const SHADERS: Record<string, string> = {\n  gradient: 'void main(){vec2 u=v_uv;float t=u_time*.15;vec3 a=vec3(.39,.4,.95),b=vec3(.93,.29,.6),c=vec3(.13,.83,.93);float k=.5+.5*sin(u.x*3.+t*2.)*cos(u.y*2.-t);vec3 col=mix(mix(a,b,u.x+.2*sin(t)),c,k*.6);gl_FragColor=vec4(col,1.);}',\n  plasma: 'void main(){vec2 u=v_uv*4.;float t=u_time*.6;float v=sin(u.x+t)+sin(u.y+t*.7)+sin(u.x+u.y+t*.5)+sin(length(u-2.+vec2(sin(t),cos(t)))*2.);vec3 col=.5+.5*cos(v+vec3(0.,2.,4.));gl_FragColor=vec4(col,1.);}',\n  waves: 'void main(){vec2 u=v_uv;float t=u_time*.4;float w=0.;for(int i=0;i<4;i++){float f=float(i)+1.;w+=sin(u.x*6.*f+t*f)*.08/f;}float l=smoothstep(.0,.02,abs(u.y-.5-w));vec3 col=mix(vec3(.2,.5,1.),vec3(.04,.06,.15),l)+vec3(.1,.0,.2)*u.y;gl_FragColor=vec4(col,1.);}',\n  aurora: 'void main(){vec2 u=v_uv;float t=u_time*.2;float b=0.;for(int i=0;i<3;i++){float f=float(i);b+=.4/abs((u.y-.6+.15*sin(u.x*3.+t+f*1.7))*(8.+f*4.));}vec3 col=vec3(.02,.03,.08)+b*mix(vec3(.1,.9,.6),vec3(.6,.3,1.),u.x)*.35;gl_FragColor=vec4(col,1.);}',\n  distort: 'void main(){vec2 u=v_uv;vec2 d=u-u_mouse;float r=length(d);float k=u_hover*.08*exp(-r*r*18.);u-=normalize(d+1e-4)*k;float s=u_hover*.006;vec3 col=vec3(texture2D(u_tex,u+vec2(s,0.)).r,texture2D(u_tex,u).g,texture2D(u_tex,u-vec2(s,0.)).b);gl_FragColor=vec4(col,1.);}',\n  // 4.8 particle presets (procedural, one quad: no buffers, no per-particle JS)\n  snow: 'float h(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}void main(){vec2 u=v_uv;u.x*=u_resolution.x/max(u_resolution.y,1.);vec3 col=mix(vec3(.05,.08,.16),vec3(.12,.16,.3),v_uv.y);for(int l=0;l<3;l++){float s=8.+float(l)*7.;vec2 q=u*s;q.y+=u_time*(.6+float(l)*.35);q.x+=sin(q.y*.7+float(l))*.3;vec2 id=floor(q);vec2 f=fract(q)-.5;float r=h(id);if(r>.6){vec2 o=vec2(h(id+3.)-.5,h(id+7.)-.5)*.6;float d=length(f-o);col+=smoothstep(.09-float(l)*.02,0.,d)*(.5+.5*r);}}gl_FragColor=vec4(col,1.);}',\n  fireflies: 'float h(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}void main(){vec2 u=v_uv;u.x*=u_resolution.x/max(u_resolution.y,1.);vec3 col=vec3(.02,.04,.03);for(int l=0;l<2;l++){vec2 q=u*(5.+float(l)*4.);vec2 id=floor(q);vec2 f=fract(q)-.5;float r=h(id+float(l)*13.);vec2 o=.35*vec2(sin(u_time*(.4+r)+r*6.28),cos(u_time*(.3+r)+r*12.));float d=length(f-o);float tw=.5+.5*sin(u_time*3.*r+r*20.);col+=vec3(1.,.85,.3)*smoothstep(.12,0.,d)*tw*step(.45,r);}gl_FragColor=vec4(col,1.);}',\n  stars: 'float h(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}void main(){vec2 c=v_uv-.5;c.x*=u_resolution.x/max(u_resolution.y,1.);vec3 col=vec3(.01,.01,.04);for(int l=0;l<4;l++){float z=fract(float(l)*.25+u_time*.05);float sc=mix(20.,.5,z);vec2 q=c*sc+float(l)*7.;vec2 id=floor(q);vec2 f=fract(q)-.5;float r=h(id);float d=length(f-(vec2(h(id+1.),h(id+2.))-.5)*.7);col+=vec3(.8,.9,1.)*smoothstep(.06,0.,d)*step(.8,r)*smoothstep(0.,.5,z)*smoothstep(1.,.8,z)*2.;}gl_FragColor=vec4(col,1.);}',\n  bokeh: 'float h(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}void main(){vec2 u=v_uv;u.x*=u_resolution.x/max(u_resolution.y,1.);vec3 col=mix(vec3(.08,.03,.12),vec3(.02,.05,.12),v_uv.y);for(int l=0;l<3;l++){vec2 q=u*(2.5+float(l)*1.5);q.y-=u_time*.05*(1.+float(l));vec2 id=floor(q);vec2 f=fract(q)-.5;float r=h(id+float(l)*5.);float d=length(f-(vec2(h(id+4.),h(id+9.))-.5)*.5);vec3 tint=.5+.5*cos(r*6.28+vec3(0.,2.,4.));col+=tint*smoothstep(.3,.26,d)*.18*step(.35,r);}gl_FragColor=vec4(col,1.);}',\n  rain: 'float h(float n){return fract(sin(n)*43758.5453);}void main(){vec2 u=v_uv;vec3 col=mix(vec3(.04,.06,.1),vec3(.1,.13,.2),u.y);float n=floor(u.x*120.);float sp=.8+h(n)*1.2;float y=fract(u.y+u_time*sp+h(n+1.));float drop=smoothstep(.0,.08,y)*smoothstep(.16,.08,y)*step(.7,h(n+2.));col+=vec3(.5,.6,.8)*drop*.6;gl_FragColor=vec4(col,1.);}',\n  liquid: 'void main(){vec2 u=v_uv;vec2 o=vec2(0.);for(int i=0;i<4;i++){vec4 r=u_ripples[i];if(r.w>0.){float d=distance(u,r.xy);float w=sin(d*60.-r.z*12.)*exp(-d*6.)*exp(-r.z*1.6)*r.w*.02;o+=normalize(u-r.xy+1e-4)*w;}}o+=vec2(sin(u.y*10.+u_time),cos(u.x*10.+u_time))*.002*u_hover;gl_FragColor=texture2D(u_tex,u+o);}',\n};\n\n/** Full fragment source for a preset or custom body (adds the shared header). */\nexport function fragmentSource(body: string): string {\n  const src = SHADERS[body] || body;\n  return /precision\\s+\\w+\\s+float/.test(src) ? src : HEAD + src;\n}\n\n/** `true` when the browser can create a WebGL context (cached). */\nlet support: boolean | undefined;\nexport function supportsWebGL(): boolean {\n  if (support !== undefined) return support;\n  try {\n    const c = typeof document !== 'undefined' ? document.createElement('canvas') : null;\n    support = !!(c && (c.getContext('webgl') || c.getContext('experimental-webgl')));\n  } catch {\n    support = false;\n  }\n  return support;\n}\n\nexport interface GLQuad {\n  /** Draw a frame with these uniform values (`extra`: any other float uniforms by name, 4.8). */\n  render(u: { time?: number; mouse?: [number, number]; hover?: number; ripples?: number[]; extra?: Record<string, number> }): void;\n  /** Resize the drawing buffer to the canvas' CSS size × DPR (≤ 2) × `scale` (4.8 adaptive quality). */\n  resize(scale?: number): void;\n  /** Upload an image as `u_tex`. */\n  texture(img: TexImageSource): void;\n  dispose(): void;\n}\n\n/** Compile `frag` on a full-canvas quad, or `null` when WebGL / compilation is unavailable. */\nexport function glQuad(canvas: HTMLCanvasElement, frag: string): GLQuad | null {\n  let gl: WebGLRenderingContext | null = null;\n  try {\n    gl = (canvas.getContext('webgl', { premultipliedAlpha: false, antialias: false }) || canvas.getContext('experimental-webgl')) as WebGLRenderingContext | null;\n  } catch {\n    gl = null;\n  }\n  if (!gl) return null;\n  const g = gl;\n  const sh = (type: number, src: string) => {\n    const s = g.createShader(type)!;\n    g.shaderSource(s, src);\n    g.compileShader(s);\n    return g.getShaderParameter(s, g.COMPILE_STATUS) ? s : null;\n  };\n  const vs = sh(g.VERTEX_SHADER, VERTEX);\n  const fs = sh(g.FRAGMENT_SHADER, fragmentSource(frag));\n  if (!vs || !fs) return null;\n  const prog = g.createProgram()!;\n  g.attachShader(prog, vs);\n  g.attachShader(prog, fs);\n  g.linkProgram(prog);\n  if (!g.getProgramParameter(prog, g.LINK_STATUS)) return null;\n  g.useProgram(prog);\n  const buf = g.createBuffer();\n  g.bindBuffer(g.ARRAY_BUFFER, buf);\n  g.bufferData(g.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), g.STATIC_DRAW);\n  const loc = g.getAttribLocation(prog, 'p');\n  g.enableVertexAttribArray(loc);\n  g.vertexAttribPointer(loc, 2, g.FLOAT, false, 0, 0);\n  const U = (n: string) => g.getUniformLocation(prog, n);\n  const uT = U('u_time'), uR = U('u_resolution'), uM = U('u_mouse'), uH = U('u_hover'), uRp = U('u_ripples');\n  let tex: WebGLTexture | null = null;\n  const extraLoc: Record<string, WebGLUniformLocation | null> = {};\n  const quad: GLQuad = {\n    resize(scale = 1) {\n      const dpr = Math.min(2, (typeof devicePixelRatio === 'number' && devicePixelRatio) || 1) * Math.min(1, Math.max(0.25, scale));\n      const w = Math.max(1, Math.round((canvas.clientWidth || 300) * dpr));\n      const h = Math.max(1, Math.round((canvas.clientHeight || 150) * dpr));\n      if (canvas.width !== w || canvas.height !== h) ((canvas.width = w), (canvas.height = h));\n      g.viewport(0, 0, w, h);\n    },\n    texture(img) {\n      tex = tex || g.createTexture();\n      g.bindTexture(g.TEXTURE_2D, tex);\n      g.pixelStorei(g.UNPACK_FLIP_Y_WEBGL, true);\n      g.texParameteri(g.TEXTURE_2D, g.TEXTURE_WRAP_S, g.CLAMP_TO_EDGE);\n      g.texParameteri(g.TEXTURE_2D, g.TEXTURE_WRAP_T, g.CLAMP_TO_EDGE);\n      g.texParameteri(g.TEXTURE_2D, g.TEXTURE_MIN_FILTER, g.LINEAR);\n      g.texImage2D(g.TEXTURE_2D, 0, g.RGBA, g.RGBA, g.UNSIGNED_BYTE, img);\n    },\n    render(u) {\n      g.uniform1f(uT, u.time ?? 0);\n      g.uniform2f(uR, canvas.width, canvas.height);\n      g.uniform2f(uM, ...(u.mouse ?? [0.5, 0.5]));\n      g.uniform1f(uH, u.hover ?? 0);\n      if (uRp) g.uniform4fv(uRp, new Float32Array((u.ripples ?? []).concat(Array(16).fill(0)).slice(0, 16)));\n      if (u.extra) for (const [k, v] of Object.entries(u.extra)) g.uniform1f((extraLoc[k] ??= U(k)), v);\n      g.drawArrays(g.TRIANGLES, 0, 6);\n    },\n    dispose() {\n      g.deleteProgram(prog);\n      g.deleteBuffer(buf);\n      if (tex) g.deleteTexture(tex);\n      g.getExtension('WEBGL_lose_context')?.loseContext();\n    },\n  };\n  quad.resize();\n  return quad;\n}\n","/**\n * 4.8 — WebGL preset library on `glQuad()`: particle presets (`snow`,\n * `fireflies`, `stars`, `bokeh`, `rain` — usable as `<usa-shader preset>`),\n * chainable post-processing passes for images (`<usa-post-fx>`), one CSS\n * fallback per preset, and an adaptive quality governor (fps + battery).\n */\nexport const PARTICLE_PRESETS = ['snow', 'fireflies', 'stars', 'bokeh', 'rain'] as const;\nexport type ParticlePreset = (typeof PARTICLE_PRESETS)[number];\n\n/** Post-processing passes: `vec3 fx(vec3 c, vec2 uv)` bodies, applied in order. `u_intensity` 0–1. */\nexport const POST_EFFECTS: Record<string, string> = {\n  vignette: 'c*=mix(1.,smoothstep(.85,.25,length(uv-.5)),u_intensity);',\n  grain: 'c+=(fract(sin(dot(uv*u_resolution+u_time,vec2(12.9898,78.233)))*43758.5453)-.5)*.18*u_intensity;',\n  chromatic: 'float s=.008*u_intensity;c=vec3(texture2D(u_tex,uv+vec2(s,0.)).r,c.g,texture2D(u_tex,uv-vec2(s,0.)).b);',\n  scanlines: 'c*=1.-.25*u_intensity*step(.5,fract(uv.y*u_resolution.y*.5));',\n  crt: 'vec2 d=uv-.5;float r=dot(d,d);c*=1.-.6*u_intensity*r;c*=.92+.08*sin(uv.y*u_resolution.y*3.14159);c.r*=1.+.05*u_intensity;',\n  bloom: 'vec3 b=vec3(0.);for(int i=0;i<8;i++){float a=float(i)*.785;b+=max(texture2D(u_tex,uv+vec2(cos(a),sin(a))*.012).rgb-.6,0.);}c+=b*.35*u_intensity;',\n  pixelate: 'float px=mix(1.,48.,u_intensity);vec2 g=floor(uv*u_resolution/px)*px/u_resolution;c=texture2D(u_tex,g+.5*px/u_resolution).rgb;',\n  duotone: 'float l=dot(c,vec3(.299,.587,.114));c=mix(c,mix(vec3(.12,.05,.35),vec3(1.,.55,.4),l),u_intensity);',\n  glitch: 'float k=step(.97,fract(sin(floor(uv.y*24.)+floor(u_time*6.))*4375.5));c=mix(c,texture2D(u_tex,uv+vec2(k*.04*u_intensity,0.)).rgb,k);',\n};\nexport type PostEffect = keyof typeof POST_EFFECTS;\n\n/** One fragment shader running the passes in order over `u_tex` (pixel-sampling passes read the source). */\nexport function postFxShader(effects: string[]): string {\n  const list = effects.filter((e) => POST_EFFECTS[e]);\n  const body = list.map((e) => `{${POST_EFFECTS[e]}}`).join('');\n  return `uniform float u_intensity;void main(){vec2 uv=v_uv;vec3 c=texture2D(u_tex,uv).rgb;${body}gl_FragColor=vec4(clamp(c,0.,1.),1.);}`;\n}\n\n/** The unified CSS fallback (no WebGL / reduced data): a still background or image filter per preset. */\nexport const GL_FALLBACKS: Record<string, string> = {\n  gradient: 'linear-gradient(120deg,#6366f1,#ec4899 50%,#22d3ee)',\n  plasma: 'conic-gradient(from 90deg,#f43f5e,#a855f7,#06b6d4,#f43f5e)',\n  waves: 'linear-gradient(#0a0f26,#1e3a8a)',\n  aurora: 'radial-gradient(120% 60% at 30% 40%,#10b98155,transparent),radial-gradient(100% 50% at 70% 50%,#8b5cf655,transparent),#05070f',\n  snow: 'radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(2px 2px at 70% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#fff,transparent),linear-gradient(#0d1428,#1f2a4d)',\n  fireflies: 'radial-gradient(3px 3px at 25% 40%,#fde68a,transparent),radial-gradient(3px 3px at 65% 70%,#fde68a,transparent),#05090a',\n  stars: 'radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 80% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 50% 70%,#cfe0ff,transparent),#02020a',\n  bokeh: 'radial-gradient(40px 40px at 30% 40%,#f472b633,transparent),radial-gradient(60px 60px at 70% 60%,#60a5fa33,transparent),#140820',\n  rain: 'repeating-linear-gradient(100deg,#ffffff10 0 1px,transparent 1px 14px),linear-gradient(#0a0f1a,#1a2133)',\n  // post-fx fallbacks are CSS filters on the <img>\n  'post:duotone': 'grayscale(1) sepia(.6) hue-rotate(220deg) saturate(2)',\n  'post:vignette': 'brightness(.95) contrast(1.05)',\n  'post:crt': 'contrast(1.15) saturate(1.2)',\n  'post:bloom': 'brightness(1.08) saturate(1.15)',\n};\n\n/** CSS fallback for a shader preset / post effect list. */\nexport function glFallbackCss(preset: string, post = false): string {\n  if (post) return preset.split(/\\s+/).map((e) => GL_FALLBACKS[`post:${e}`]).filter(Boolean).join(' ');\n  return GL_FALLBACKS[preset] || GL_FALLBACKS.gradient;\n}\n\nexport interface GLGovernorOptions {\n  /** Below this fps quality drops (default 40). */\n  minFps?: number;\n  /** Frame-rate cap on battery saver / low battery (default 30). */\n  saverFps?: number;\n}\n\nexport interface GLGovernor {\n  /** Feed a frame time (ms); returns `true` when this frame should render. */\n  tick(t: number): boolean;\n  /** Current resolution scale (1 → 0.5 → 0.35). */\n  readonly scale: number;\n  /** Measured fps over the last second. */\n  readonly fps: number;\n  /** Battery saver / low battery: renders at `saverFps` and scale ≤ 0.6. */\n  saver: boolean;\n  /** Called when `scale` changes (resize the canvas). */\n  onScale?: (scale: number) => void;\n}\n\n/**\n * Adaptive quality for GL loops: measures fps, steps the resolution scale\n * down (1 → 0.5 → 0.35) after two slow seconds and back up after five good\n * ones, and caps the frame rate in battery-saver mode. Pure — feed it times.\n */\nexport function glGovernor(options: GLGovernorOptions = {}): GLGovernor {\n  const { minFps = 40, saverFps = 30 } = options;\n  const STEPS = [1, 0.5, 0.35];\n  let step = 0;\n  let frames = 0;\n  let winStart = -1;\n  let last = -Infinity;\n  let slow = 0;\n  let good = 0;\n  let fps = 60;\n  const g: GLGovernor = {\n    saver: false,\n    get scale() {\n      return Math.min(STEPS[step], g.saver ? 0.6 : 1);\n    },\n    get fps() {\n      return fps;\n    },\n    tick(t: number) {\n      if (winStart < 0) winStart = t;\n      if (g.saver && t - last < 1000 / saverFps - 1) return false;\n      last = t;\n      frames++;\n      if (t - winStart >= 1000) {\n        fps = Math.round((frames * 1000) / (t - winStart));\n        frames = 0;\n        winStart = t;\n        const before = g.scale;\n        if (fps < minFps && !g.saver) {\n          good = 0;\n          if (++slow >= 2 && step < STEPS.length - 1) ((step++), (slow = 0));\n        } else {\n          slow = 0;\n          if (++good >= 5 && step > 0) ((step--), (good = 0));\n        }\n        if (g.scale !== before) g.onScale?.(g.scale);\n      }\n      return true;\n    },\n  };\n  return g;\n}\n\n/** Watch the Battery Status API (where available) and Save-Data; calls `cb(true)` in saver conditions. Returns a stop function. */\nexport function watchPowerSaver(cb: (saver: boolean) => void): () => void {\n  let stopped = false;\n  const nav = (typeof navigator !== 'undefined' ? navigator : {}) as any;\n  const saveData = !!nav.connection?.saveData;\n  if (saveData) cb(true);\n  if (typeof nav.getBattery !== 'function') return () => undefined;\n  let battery: any = null;\n  const update = () => !stopped && cb(saveData || (!!battery && !battery.charging && battery.level <= 0.2));\n  nav.getBattery().then((b: any) => {\n    battery = b;\n    update();\n    b.addEventListener?.('levelchange', update);\n    b.addEventListener?.('chargingchange', update);\n  }, () => undefined);\n  return () => {\n    stopped = true;\n    battery?.removeEventListener?.('levelchange', update);\n    battery?.removeEventListener?.('chargingchange', update);\n  };\n}\n","import { defineElement, raf, caf, now, clamp, type UsaElement, getBase } from '../base';\n\ntype BaseCtor = ReturnType<typeof getBase>;\nimport { glQuad, type GLQuad } from './gl';\nimport { postFxShader, glFallbackCss, glGovernor, watchPowerSaver } from './presets';\nimport css from './webgl.css?raw';\n\n/**\n * Shared shell for the WebGL elements: a canvas over (or behind) the\n * content that renders only while visible and the tab is shown, a DPR cap\n * of 2, and a graceful fallback (`data-fallback`) when WebGL, the shader\n * or the image (CORS) is unavailable — the original content / CSS stays.\n */\nexport interface UsaGLElement extends UsaElement {\n  /** `true` once WebGL rendering is active (otherwise the CSS fallback shows). */\n  readonly active: boolean;\n}\n\ntype Kind = 'shader' | 'distort' | 'liquid' | 'post';\n\nfunction make(kind: Kind) {\n  return (Base: BaseCtor): CustomElementConstructor =>\n    class extends Base {\n      static get observedAttributes(): string[] {\n        return kind === 'shader' ? ['preset', 'speed', 'quality'] : kind === 'post' ? ['effects', 'intensity', 'quality'] : ['src'];\n      }\n      private _q: GLQuad | null = null;\n      private _c: HTMLCanvasElement | null = null;\n      private _id = 0;\n      private _mouse: [number, number] = [0.5, 0.5];\n      private _hover = 0;\n      private _hoverTo = 0;\n      private _ripples: { x: number; y: number; t: number }[] = [];\n\n      get active(): boolean {\n        return !!this._q;\n      }\n\n      private _scale = 1;\n\n      private fallback(reason: string): void {\n        this.setAttribute('data-fallback', reason);\n        // 4.8 unified fallback: a still CSS rendering of the preset / effects\n        if (reason !== 'off') {\n          if (kind === 'shader') this.style.setProperty('--usa-gl-fallback', glFallbackCss(this.str('preset', 'gradient')));\n          if (kind === 'post') this.style.setProperty('--usa-gl-filter', glFallbackCss(this.str('effects', 'vignette grain'), true) || 'none');\n        }\n        this._c?.remove();\n        this._c = null;\n        this._q?.dispose();\n        this._q = null;\n      }\n\n      private frame(): void {\n        const q = this._q;\n        if (!q) return;\n        this._hover += (this._hoverTo - this._hover) * 0.12;\n        const t = now();\n        this._ripples = this._ripples.filter((r) => t - r.t < 2500);\n        q.render({\n          time: (t / 1000) * this.num('speed', 1),\n          mouse: this._mouse,\n          hover: this._hover,\n          ripples: this._ripples.flatMap((r) => [r.x, r.y, (t - r.t) / 1000, this.num('strength', 1)]),\n          extra: kind === 'post' ? { u_intensity: clamp(this.num('intensity', 0.6), 0, 1) } : undefined,\n        });\n      }\n\n      mount(): void {\n        this.removeAttribute('data-fallback');\n        const custom = this.querySelector('script[type=\"x-shader/x-fragment\"]');\n        const frag = kind === 'shader' ? custom?.textContent || this.str('preset', 'gradient') : kind === 'post' ? postFxShader(this.str('effects', 'vignette grain').split(/[\\s,]+/)) : kind;\n        const img = kind === 'shader' ? null : (this.querySelector('img') as HTMLImageElement | null);\n        if (kind !== 'shader' && !img) return this.fallback('no-image');\n        const c = (this._c = document.createElement('canvas'));\n        c.setAttribute('aria-hidden', 'true');\n        c.className = 'usa-gl';\n        this.prepend(c);\n        const q = (this._q = glQuad(c, frag));\n        if (!q) return this.fallback('webgl');\n        this.onCleanup(() => this.fallback('off'));\n        const start = () => {\n          if (!img) return true;\n          try {\n            q.texture(img);\n            return true;\n          } catch {\n            this.fallback('image');\n            return false;\n          }\n        };\n        const draw = () => {\n          q.resize(this._scale);\n          this.frame();\n        };\n        if (img && !(img.complete && img.naturalWidth)) {\n          if (!img.crossOrigin && /^https?:/.test(img.src) && !img.src.startsWith(location.origin)) img.crossOrigin = 'anonymous';\n          this.listen(img, 'load', () => start() && draw());\n          this.listen(img, 'error', () => this.fallback('image'));\n        } else if (!start()) return;\n        this.setAttribute('data-active', '');\n        this.onCleanup(() => this.removeAttribute('data-active'));\n        draw();\n        if (kind === 'distort' || kind === 'liquid') {\n          const pos = (e: PointerEvent) => {\n            const r = this.getBoundingClientRect();\n            this._mouse = [clamp((e.clientX - r.left) / (r.width || 1), 0, 1), clamp(1 - (e.clientY - r.top) / (r.height || 1), 0, 1)];\n          };\n          this.listen(this, 'pointermove', pos);\n          this.listen(this, 'pointerenter', (e: PointerEvent) => (pos(e), (this._hoverTo = 1)));\n          this.listen(this, 'pointerleave', () => (this._hoverTo = 0));\n          if (kind === 'liquid')\n            this.listen(this, 'pointerdown', (e: PointerEvent) => {\n              pos(e);\n              this._ripples = [...this._ripples.slice(-3), { x: this._mouse[0], y: this._mouse[1], t: now() }];\n            });\n        }\n        // 4.0.1: also follow the element's own size (grid reflow, card expand…)\n        if (typeof ResizeObserver !== 'undefined') {\n          const ro = new ResizeObserver(() => {\n            q.resize(this._scale);\n            if (!this._id) this.frame();\n          });\n          ro.observe(this);\n          this.onCleanup(() => ro.disconnect());\n        }\n        if (this.reduced) return; // one static frame, no loop\n        // 4.8 adaptive quality: fps-driven resolution steps + battery saver frame cap\n        const gov = glGovernor();\n        const auto = this.str('quality', 'auto') !== 'high';\n        gov.onScale = (sc) => {\n          this._scale = sc;\n          this.setAttribute('data-quality', String(sc));\n          q.resize(sc);\n        };\n        if (auto) this.onCleanup(watchPowerSaver((saver) => ((gov.saver = saver), gov.onScale?.(gov.scale))));\n        let visible = false;\n        const loop = () => {\n          if (!auto || gov.tick(now())) this.frame();\n          this._id = raf(loop);\n        };\n        const sync = () => {\n          caf(this._id);\n          this._id = 0;\n          if (visible && !document.hidden) this._id = raf(loop);\n        };\n        this.inView((v: boolean) => ((visible = v), sync()));\n        this.listen(document, 'visibilitychange', sync);\n        this.listen(window, 'resize', () => q.resize(this._scale), { passive: true });\n        this.onCleanup(() => caf(this._id));\n      }\n    };\n}\n\n/**\n * `<usa-shader>` — GPU shader background behind its content. `preset`\n * (`gradient` · `plasma` · `waves` · `aurora`) or your own fragment shader in\n * `<script type=\"x-shader/x-fragment\">` (uniforms `u_time`, `u_resolution`,\n * `u_mouse`, `v_uv`); `speed`. Without WebGL: the element's CSS background.\n */\nexport function defineShader(tag = 'usa-shader'): CustomElementConstructor | undefined {\n  return defineElement(tag, make('shader'), { id: 'webgl', text: css });\n}\n\n/**\n * `<usa-distort>` — hover distortion + RGB split on the `<img>` inside,\n * following the pointer. Without WebGL / CORS: a gentle CSS zoom.\n */\nexport function defineDistort(tag = 'usa-distort'): CustomElementConstructor | undefined {\n  return defineElement(tag, make('distort'), { id: 'webgl', text: css });\n}\n\n/**\n * `<usa-liquid>` — liquid image: clicks / taps send ripples through the\n * `<img>` inside, hover adds a gentle wobble; `strength`. Fallback: plain image.\n */\nexport function defineLiquid(tag = 'usa-liquid'): CustomElementConstructor | undefined {\n  return defineElement(tag, make('liquid'), { id: 'webgl', text: css });\n}\n\n/**\n * `<usa-post-fx effects=\"vignette grain crt\" intensity=\"0.6\">` — GPU\n * post-processing over the `<img>` inside (4.8): `vignette` · `grain` ·\n * `chromatic` · `scanlines` · `crt` · `bloom` · `pixelate` · `duotone` ·\n * `glitch`, chained in order. `quality=\"high\"` disables adaptive quality.\n * Fallback: the image with an approximate CSS filter.\n */\nexport function definePostFx(tag = 'usa-post-fx'): CustomElementConstructor | undefined {\n  return defineElement(tag, make('post'), { id: 'webgl', text: css });\n}\n","/**\n * use-scroll-animate/components/webgl — lightweight canvas / WebGL (v3.4).\n * `<usa-shader>` (shader backgrounds), `<usa-distort>` (hover image\n * distortion), `<usa-liquid>` (ripple images) on a tiny single-quad runner\n * (`glQuad()`), with graceful fallbacks when WebGL is unavailable.\n */\nimport { defineShader, defineDistort, defineLiquid, definePostFx, type UsaGLElement } from './elements';\n\nexport { defineShader, defineDistort, defineLiquid, definePostFx };\nexport { PARTICLE_PRESETS, POST_EFFECTS, postFxShader, GL_FALLBACKS, glFallbackCss, glGovernor, watchPowerSaver } from './presets';\nexport type { ParticlePreset, PostEffect, GLGovernor, GLGovernorOptions } from './presets';\nexport { glQuad, supportsWebGL, fragmentSource, SHADERS } from './gl';\nexport type { GLQuad } from './gl';\nexport type { UsaGLElement };\nexport { configureComponents, prefersReducedMotion } from '../base';\nexport type { ComponentsConfig, UsaElement } from '../base';\n\n/** Register every component of this category under its default tag. */\nexport function defineWebglComponents(): void {\n  defineShader();\n  defineDistort();\n  defineLiquid();\n  definePostFx();\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'usa-shader': UsaGLElement;\n    'usa-distort': UsaGLElement;\n    'usa-liquid': UsaGLElement;\n    'usa-post-fx': UsaGLElement;\n  }\n}\n"],"names":["now","clamp","raf","caf","defineElement"],"mappings":"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"}

package/dist/components/webgl.css

@@ -1,3 +1,3 @@
 /* use-scroll-animate/components/webgl */
 .usa-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
-usa-shader,usa-distort,usa-liquid{display:block;position:relative;isolation:isolate;overflow:hidden}usa-shader{background:linear-gradient(120deg,#6366f1,#ec4899 50%,#22d3ee)}usa-shader>canvas.usa-gl{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}usa-distort>canvas.usa-gl,usa-liquid>canvas.usa-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}usa-distort>img,usa-liquid>img{display:block;width:100%;height:auto}usa-distort[data-active]>img,usa-liquid[data-active]>img{visibility:hidden}usa-distort[data-fallback]>img{transition:transform 0.6s cubic-bezier(0.22,1,0.36,1),filter 0.6s}usa-distort[data-fallback]:hover>img{transform:scale(1.04);filter:saturate(1.2)}@media (prefers-reduced-motion:reduce){usa-distort[data-fallback]:hover>img{transform:none}}
+usa-shader,usa-distort,usa-liquid,usa-post-fx{display:block;position:relative;isolation:isolate;overflow:hidden}usa-shader{background:linear-gradient(120deg,#6366f1,#ec4899 50%,#22d3ee)}usa-shader>canvas.usa-gl{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}usa-distort>canvas.usa-gl,usa-liquid>canvas.usa-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}usa-distort>img,usa-liquid>img{display:block;width:100%;height:auto}usa-distort[data-active]>img,usa-liquid[data-active]>img{visibility:hidden}usa-distort[data-fallback]>img{transition:transform 0.6s cubic-bezier(0.22,1,0.36,1),filter 0.6s}usa-distort[data-fallback]:hover>img{transform:scale(1.04);filter:saturate(1.2)}@media (prefers-reduced-motion:reduce){usa-distort[data-fallback]:hover>img{transform:none}}usa-shader[data-fallback]{background:var(--usa-gl-fallback,linear-gradient(120deg,#6366f1,#ec4899 50%,#22d3ee))}usa-post-fx>canvas.usa-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}usa-post-fx>img{display:block;width:100%;height:auto}usa-post-fx[data-active]>img{visibility:hidden}usa-post-fx[data-fallback]>img{filter:var(--usa-gl-filter,none)}

package/dist/components/webgl.d.cts

@@ -80,6 +80,58 @@ declare function defineDistort(tag?: string): CustomElementConstructor | undefin
  * `<img>` inside, hover adds a gentle wobble; `strength`. Fallback: plain image.
  */
 declare function defineLiquid(tag?: string): CustomElementConstructor | undefined;
+/**
+ * `<usa-post-fx effects="vignette grain crt" intensity="0.6">` — GPU
+ * post-processing over the `<img>` inside (4.8): `vignette` · `grain` ·
+ * `chromatic` · `scanlines` · `crt` · `bloom` · `pixelate` · `duotone` ·
+ * `glitch`, chained in order. `quality="high"` disables adaptive quality.
+ * Fallback: the image with an approximate CSS filter.
+ */
+declare function definePostFx(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * 4.8 — WebGL preset library on `glQuad()`: particle presets (`snow`,
+ * `fireflies`, `stars`, `bokeh`, `rain` — usable as `<usa-shader preset>`),
+ * chainable post-processing passes for images (`<usa-post-fx>`), one CSS
+ * fallback per preset, and an adaptive quality governor (fps + battery).
+ */
+declare const PARTICLE_PRESETS: readonly ["snow", "fireflies", "stars", "bokeh", "rain"];
+type ParticlePreset = (typeof PARTICLE_PRESETS)[number];
+/** Post-processing passes: `vec3 fx(vec3 c, vec2 uv)` bodies, applied in order. `u_intensity` 0–1. */
+declare const POST_EFFECTS: Record<string, string>;
+type PostEffect = keyof typeof POST_EFFECTS;
+/** One fragment shader running the passes in order over `u_tex` (pixel-sampling passes read the source). */
+declare function postFxShader(effects: string[]): string;
+/** The unified CSS fallback (no WebGL / reduced data): a still background or image filter per preset. */
+declare const GL_FALLBACKS: Record<string, string>;
+/** CSS fallback for a shader preset / post effect list. */
+declare function glFallbackCss(preset: string, post?: boolean): string;
+interface GLGovernorOptions {
+    /** Below this fps quality drops (default 40). */
+    minFps?: number;
+    /** Frame-rate cap on battery saver / low battery (default 30). */
+    saverFps?: number;
+}
+interface GLGovernor {
+    /** Feed a frame time (ms); returns `true` when this frame should render. */
+    tick(t: number): boolean;
+    /** Current resolution scale (1 → 0.5 → 0.35). */
+    readonly scale: number;
+    /** Measured fps over the last second. */
+    readonly fps: number;
+    /** Battery saver / low battery: renders at `saverFps` and scale ≤ 0.6. */
+    saver: boolean;
+    /** Called when `scale` changes (resize the canvas). */
+    onScale?: (scale: number) => void;
+}
+/**
+ * Adaptive quality for GL loops: measures fps, steps the resolution scale
+ * down (1 → 0.5 → 0.35) after two slow seconds and back up after five good
+ * ones, and caps the frame rate in battery-saver mode. Pure — feed it times.
+ */
+declare function glGovernor(options?: GLGovernorOptions): GLGovernor;
+/** Watch the Battery Status API (where available) and Save-Data; calls `cb(true)` in saver conditions. Returns a stop function. */
+declare function watchPowerSaver(cb: (saver: boolean) => void): () => void;
 
 /** Built-in fragment shaders (bodies; uniforms `u_time`, `u_resolution`, `u_mouse` 0–1, `u_hover` 0–1, `u_tex`, `u_ripples[4]` = x, y, age, strength). */
 declare const SHADERS: Record<string, string>;
@@ -87,15 +139,16 @@ declare const SHADERS: Record<string, string>;
 declare function fragmentSource(body: string): string;
 declare function supportsWebGL(): boolean;
 interface GLQuad {
-    /** Draw a frame with these uniform values. */
+    /** Draw a frame with these uniform values (`extra`: any other float uniforms by name, 4.8). */
     render(u: {
         time?: number;
         mouse?: [number, number];
         hover?: number;
         ripples?: number[];
+        extra?: Record<string, number>;
     }): void;
-    /** Resize the drawing buffer to the canvas' CSS size × DPR (≤ 2). */
-    resize(): void;
+    /** Resize the drawing buffer to the canvas' CSS size × DPR (≤ 2) × `scale` (4.8 adaptive quality). */
+    resize(scale?: number): void;
     /** Upload an image as `u_tex`. */
     texture(img: TexImageSource): void;
     dispose(): void;
@@ -117,8 +170,9 @@ declare global {
         'usa-shader': UsaGLElement;
         'usa-distort': UsaGLElement;
         'usa-liquid': UsaGLElement;
+        'usa-post-fx': UsaGLElement;
     }
 }
 
-export { SHADERS, configureComponents, defineDistort, defineLiquid, defineShader, defineWebglComponents, fragmentSource, glQuad, prefersReducedMotion, supportsWebGL };
-export type { ComponentsConfig, GLQuad, UsaElement, UsaGLElement };
+export { GL_FALLBACKS, PARTICLE_PRESETS, POST_EFFECTS, SHADERS, configureComponents, defineDistort, defineLiquid, definePostFx, defineShader, defineWebglComponents, fragmentSource, glFallbackCss, glGovernor, glQuad, postFxShader, prefersReducedMotion, supportsWebGL, watchPowerSaver };
+export type { ComponentsConfig, GLGovernor, GLGovernorOptions, GLQuad, ParticlePreset, PostEffect, UsaElement, UsaGLElement };