use-scroll-animate 4.7.0 → 4.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +1 -1
  3. package/README_ja.md +1 -1
  4. package/README_zh.md +1 -1
  5. package/dist/chunks/{index-tags-BQh_uGqH.cjs → index-tags-CIRY2KnU.cjs} +2 -2
  6. package/dist/chunks/{index-tags-BQh_uGqH.cjs.map → index-tags-CIRY2KnU.cjs.map} +1 -1
  7. package/dist/chunks/{index-tags-43Xtd01A.js → index-tags-Dh8nwXqw.js} +2 -2
  8. package/dist/chunks/{index-tags-43Xtd01A.js.map → index-tags-Dh8nwXqw.js.map} +1 -1
  9. package/dist/components/a11y.cjs +1 -1
  10. package/dist/components/a11y.d.cts +1 -1
  11. package/dist/components/a11y.d.ts +1 -1
  12. package/dist/components/a11y.js +1 -1
  13. package/dist/components/angular.cjs +1 -1
  14. package/dist/components/angular.d.cts +2 -1
  15. package/dist/components/angular.d.ts +2 -1
  16. package/dist/components/angular.js +1 -1
  17. package/dist/components/jsx.d.cts +1 -1
  18. package/dist/components/jsx.d.ts +1 -1
  19. package/dist/components/lazy.cjs +1 -1
  20. package/dist/components/lazy.d.cts +1 -1
  21. package/dist/components/lazy.d.ts +1 -1
  22. package/dist/components/lazy.js +1 -1
  23. package/dist/components/lite.cjs +184 -10
  24. package/dist/components/lite.cjs.map +1 -1
  25. package/dist/components/lite.js +177 -11
  26. package/dist/components/lite.js.map +1 -1
  27. package/dist/components/perf.cjs +1 -1
  28. package/dist/components/perf.d.cts +1 -1
  29. package/dist/components/perf.d.ts +1 -1
  30. package/dist/components/perf.js +1 -1
  31. package/dist/components/react.cjs +1 -1
  32. package/dist/components/react.js +1 -1
  33. package/dist/components/solid.cjs +1 -1
  34. package/dist/components/solid.d.cts +2 -1
  35. package/dist/components/solid.d.ts +2 -1
  36. package/dist/components/solid.js +1 -1
  37. package/dist/components/svelte.cjs +1 -1
  38. package/dist/components/svelte.d.cts +2 -1
  39. package/dist/components/svelte.d.ts +2 -1
  40. package/dist/components/svelte.js +1 -1
  41. package/dist/components/vue.cjs +1 -1
  42. package/dist/components/vue.d.cts +2 -1
  43. package/dist/components/vue.d.ts +2 -1
  44. package/dist/components/vue.js +1 -1
  45. package/dist/components/webgl.cjs +184 -10
  46. package/dist/components/webgl.cjs.map +1 -1
  47. package/dist/components/webgl.css +1 -1
  48. package/dist/components/webgl.d.cts +59 -5
  49. package/dist/components/webgl.d.ts +59 -5
  50. package/dist/components/webgl.js +178 -12
  51. package/dist/components/webgl.js.map +1 -1
  52. package/dist/components.cjs +9 -1
  53. package/dist/components.cjs.map +1 -1
  54. package/dist/components.css +1 -1
  55. package/dist/components.d.cts +60 -6
  56. package/dist/components.d.ts +60 -6
  57. package/dist/components.js +2 -2
  58. package/dist/components.umd.js +2 -2
  59. package/dist/components.umd.js.map +1 -1
  60. package/docs/ROADMAP.md +1 -1
  61. package/docs/components.md +7 -0
  62. package/package.json +1 -1
@@ -385,7 +385,7 @@ const COMPONENT_CATEGORIES = {
385
385
  timeline: ['usa-timeline'],
386
386
  gesture: ['usa-swipeable', 'usa-pinch-zoom'],
387
387
  svg: ['usa-draw', 'usa-morph', 'usa-mask-reveal', 'usa-anim-icon'],
388
- webgl: ['usa-shader', 'usa-distort', 'usa-liquid'],
388
+ webgl: ['usa-shader', 'usa-distort', 'usa-liquid', 'usa-post-fx'],
389
389
  depth: ['usa-cube', 'usa-depth'],
390
390
  layout: ['usa-auto-animate', 'usa-masonry'],
391
391
  packs: ['usa-pack'],
@@ -8950,6 +8950,12 @@ const SHADERS = {
8950
8950
  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.);}',
8951
8951
  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.);}',
8952
8952
  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.);}',
8953
+ // 4.8 particle presets (procedural, one quad: no buffers, no per-particle JS)
8954
+ 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.);}',
8955
+ 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.);}',
8956
+ 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.);}',
8957
+ 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.);}',
8958
+ 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.);}',
8953
8959
  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);}',
8954
8960
  };
8955
8961
  /** Full fragment source for a preset or custom body (adds the shared header). */
@@ -9009,9 +9015,10 @@ function glQuad(canvas, frag) {
9009
9015
  const U = (n) => g.getUniformLocation(prog, n);
9010
9016
  const uT = U('u_time'), uR = U('u_resolution'), uM = U('u_mouse'), uH = U('u_hover'), uRp = U('u_ripples');
9011
9017
  let tex = null;
9018
+ const extraLoc = {};
9012
9019
  const quad = {
9013
- resize() {
9014
- const dpr = Math.min(2, (typeof devicePixelRatio === 'number' && devicePixelRatio) || 1);
9020
+ resize(scale = 1) {
9021
+ const dpr = Math.min(2, (typeof devicePixelRatio === 'number' && devicePixelRatio) || 1) * Math.min(1, Math.max(0.25, scale));
9015
9022
  const w = Math.max(1, Math.round((canvas.clientWidth || 300) * dpr));
9016
9023
  const h = Math.max(1, Math.round((canvas.clientHeight || 150) * dpr));
9017
9024
  if (canvas.width !== w || canvas.height !== h)
@@ -9034,6 +9041,9 @@ function glQuad(canvas, frag) {
9034
9041
  g.uniform1f(uH, u.hover ?? 0);
9035
9042
  if (uRp)
9036
9043
  g.uniform4fv(uRp, new Float32Array((u.ripples ?? []).concat(Array(16).fill(0)).slice(0, 16)));
9044
+ if (u.extra)
9045
+ for (const [k, v] of Object.entries(u.extra))
9046
+ g.uniform1f((extraLoc[k] ?? (extraLoc[k] = U(k))), v);
9037
9047
  g.drawArrays(g.TRIANGLES, 0, 6);
9038
9048
  },
9039
9049
  dispose() {
@@ -9048,6 +9058,131 @@ function glQuad(canvas, frag) {
9048
9058
  return quad;
9049
9059
  }
9050
9060
 
9061
+ /**
9062
+ * 4.8 — WebGL preset library on `glQuad()`: particle presets (`snow`,
9063
+ * `fireflies`, `stars`, `bokeh`, `rain` — usable as `<usa-shader preset>`),
9064
+ * chainable post-processing passes for images (`<usa-post-fx>`), one CSS
9065
+ * fallback per preset, and an adaptive quality governor (fps + battery).
9066
+ */
9067
+ const PARTICLE_PRESETS = ['snow', 'fireflies', 'stars', 'bokeh', 'rain'];
9068
+ /** Post-processing passes: `vec3 fx(vec3 c, vec2 uv)` bodies, applied in order. `u_intensity` 0–1. */
9069
+ const POST_EFFECTS = {
9070
+ vignette: 'c*=mix(1.,smoothstep(.85,.25,length(uv-.5)),u_intensity);',
9071
+ grain: 'c+=(fract(sin(dot(uv*u_resolution+u_time,vec2(12.9898,78.233)))*43758.5453)-.5)*.18*u_intensity;',
9072
+ 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);',
9073
+ scanlines: 'c*=1.-.25*u_intensity*step(.5,fract(uv.y*u_resolution.y*.5));',
9074
+ 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;',
9075
+ 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;',
9076
+ 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;',
9077
+ duotone: 'float l=dot(c,vec3(.299,.587,.114));c=mix(c,mix(vec3(.12,.05,.35),vec3(1.,.55,.4),l),u_intensity);',
9078
+ 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);',
9079
+ };
9080
+ /** One fragment shader running the passes in order over `u_tex` (pixel-sampling passes read the source). */
9081
+ function postFxShader(effects) {
9082
+ const list = effects.filter((e) => POST_EFFECTS[e]);
9083
+ const body = list.map((e) => `{${POST_EFFECTS[e]}}`).join('');
9084
+ 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.);}`;
9085
+ }
9086
+ /** The unified CSS fallback (no WebGL / reduced data): a still background or image filter per preset. */
9087
+ const GL_FALLBACKS = {
9088
+ gradient: 'linear-gradient(120deg,#6366f1,#ec4899 50%,#22d3ee)',
9089
+ plasma: 'conic-gradient(from 90deg,#f43f5e,#a855f7,#06b6d4,#f43f5e)',
9090
+ waves: 'linear-gradient(#0a0f26,#1e3a8a)',
9091
+ aurora: 'radial-gradient(120% 60% at 30% 40%,#10b98155,transparent),radial-gradient(100% 50% at 70% 50%,#8b5cf655,transparent),#05070f',
9092
+ 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)',
9093
+ fireflies: 'radial-gradient(3px 3px at 25% 40%,#fde68a,transparent),radial-gradient(3px 3px at 65% 70%,#fde68a,transparent),#05090a',
9094
+ 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',
9095
+ bokeh: 'radial-gradient(40px 40px at 30% 40%,#f472b633,transparent),radial-gradient(60px 60px at 70% 60%,#60a5fa33,transparent),#140820',
9096
+ rain: 'repeating-linear-gradient(100deg,#ffffff10 0 1px,transparent 1px 14px),linear-gradient(#0a0f1a,#1a2133)',
9097
+ // post-fx fallbacks are CSS filters on the <img>
9098
+ 'post:duotone': 'grayscale(1) sepia(.6) hue-rotate(220deg) saturate(2)',
9099
+ 'post:vignette': 'brightness(.95) contrast(1.05)',
9100
+ 'post:crt': 'contrast(1.15) saturate(1.2)',
9101
+ 'post:bloom': 'brightness(1.08) saturate(1.15)',
9102
+ };
9103
+ /** CSS fallback for a shader preset / post effect list. */
9104
+ function glFallbackCss(preset, post = false) {
9105
+ if (post)
9106
+ return preset.split(/\s+/).map((e) => GL_FALLBACKS[`post:${e}`]).filter(Boolean).join(' ');
9107
+ return GL_FALLBACKS[preset] || GL_FALLBACKS.gradient;
9108
+ }
9109
+ /**
9110
+ * Adaptive quality for GL loops: measures fps, steps the resolution scale
9111
+ * down (1 → 0.5 → 0.35) after two slow seconds and back up after five good
9112
+ * ones, and caps the frame rate in battery-saver mode. Pure — feed it times.
9113
+ */
9114
+ function glGovernor(options = {}) {
9115
+ const { minFps = 40, saverFps = 30 } = options;
9116
+ const STEPS = [1, 0.5, 0.35];
9117
+ let step = 0;
9118
+ let frames = 0;
9119
+ let winStart = -1;
9120
+ let last = -Infinity;
9121
+ let slow = 0;
9122
+ let good = 0;
9123
+ let fps = 60;
9124
+ const g = {
9125
+ saver: false,
9126
+ get scale() {
9127
+ return Math.min(STEPS[step], g.saver ? 0.6 : 1);
9128
+ },
9129
+ get fps() {
9130
+ return fps;
9131
+ },
9132
+ tick(t) {
9133
+ if (winStart < 0)
9134
+ winStart = t;
9135
+ if (g.saver && t - last < 1000 / saverFps - 1)
9136
+ return false;
9137
+ last = t;
9138
+ frames++;
9139
+ if (t - winStart >= 1000) {
9140
+ fps = Math.round((frames * 1000) / (t - winStart));
9141
+ frames = 0;
9142
+ winStart = t;
9143
+ const before = g.scale;
9144
+ if (fps < minFps && !g.saver) {
9145
+ good = 0;
9146
+ if (++slow >= 2 && step < STEPS.length - 1)
9147
+ ((step++), (slow = 0));
9148
+ }
9149
+ else {
9150
+ slow = 0;
9151
+ if (++good >= 5 && step > 0)
9152
+ ((step--), (good = 0));
9153
+ }
9154
+ if (g.scale !== before)
9155
+ g.onScale?.(g.scale);
9156
+ }
9157
+ return true;
9158
+ },
9159
+ };
9160
+ return g;
9161
+ }
9162
+ /** Watch the Battery Status API (where available) and Save-Data; calls `cb(true)` in saver conditions. Returns a stop function. */
9163
+ function watchPowerSaver(cb) {
9164
+ let stopped = false;
9165
+ const nav = (typeof navigator !== 'undefined' ? navigator : {});
9166
+ const saveData = !!nav.connection?.saveData;
9167
+ if (saveData)
9168
+ cb(true);
9169
+ if (typeof nav.getBattery !== 'function')
9170
+ return () => undefined;
9171
+ let battery = null;
9172
+ const update = () => !stopped && cb(saveData || (!!battery && !battery.charging && battery.level <= 0.2));
9173
+ nav.getBattery().then((b) => {
9174
+ battery = b;
9175
+ update();
9176
+ b.addEventListener?.('levelchange', update);
9177
+ b.addEventListener?.('chargingchange', update);
9178
+ }, () => undefined);
9179
+ return () => {
9180
+ stopped = true;
9181
+ battery?.removeEventListener?.('levelchange', update);
9182
+ battery?.removeEventListener?.('chargingchange', update);
9183
+ };
9184
+ }
9185
+
9051
9186
  var css$2 = "";
9052
9187
 
9053
9188
  function make(kind) {
@@ -9061,15 +9196,23 @@ function make(kind) {
9061
9196
  this._hover = 0;
9062
9197
  this._hoverTo = 0;
9063
9198
  this._ripples = [];
9199
+ this._scale = 1;
9064
9200
  }
9065
9201
  static get observedAttributes() {
9066
- return kind === 'shader' ? ['preset', 'speed'] : ['src'];
9202
+ return kind === 'shader' ? ['preset', 'speed', 'quality'] : kind === 'post' ? ['effects', 'intensity', 'quality'] : ['src'];
9067
9203
  }
9068
9204
  get active() {
9069
9205
  return !!this._q;
9070
9206
  }
9071
9207
  fallback(reason) {
9072
9208
  this.setAttribute('data-fallback', reason);
9209
+ // 4.8 unified fallback: a still CSS rendering of the preset / effects
9210
+ if (reason !== 'off') {
9211
+ if (kind === 'shader')
9212
+ this.style.setProperty('--usa-gl-fallback', glFallbackCss(this.str('preset', 'gradient')));
9213
+ if (kind === 'post')
9214
+ this.style.setProperty('--usa-gl-filter', glFallbackCss(this.str('effects', 'vignette grain'), true) || 'none');
9215
+ }
9073
9216
  this._c?.remove();
9074
9217
  this._c = null;
9075
9218
  this._q?.dispose();
@@ -9087,12 +9230,13 @@ function make(kind) {
9087
9230
  mouse: this._mouse,
9088
9231
  hover: this._hover,
9089
9232
  ripples: this._ripples.flatMap((r) => [r.x, r.y, (t - r.t) / 1000, this.num('strength', 1)]),
9233
+ extra: kind === 'post' ? { u_intensity: clamp(this.num('intensity', 0.6), 0, 1) } : undefined,
9090
9234
  });
9091
9235
  }
9092
9236
  mount() {
9093
9237
  this.removeAttribute('data-fallback');
9094
9238
  const custom = this.querySelector('script[type="x-shader/x-fragment"]');
9095
- const frag = kind === 'shader' ? custom?.textContent || this.str('preset', 'gradient') : kind;
9239
+ const frag = kind === 'shader' ? custom?.textContent || this.str('preset', 'gradient') : kind === 'post' ? postFxShader(this.str('effects', 'vignette grain').split(/[\s,]+/)) : kind;
9096
9240
  const img = kind === 'shader' ? null : this.querySelector('img');
9097
9241
  if (kind !== 'shader' && !img)
9098
9242
  return this.fallback('no-image');
@@ -9117,7 +9261,7 @@ function make(kind) {
9117
9261
  }
9118
9262
  };
9119
9263
  const draw = () => {
9120
- q.resize();
9264
+ q.resize(this._scale);
9121
9265
  this.frame();
9122
9266
  };
9123
9267
  if (img && !(img.complete && img.naturalWidth)) {
@@ -9131,7 +9275,7 @@ function make(kind) {
9131
9275
  this.setAttribute('data-active', '');
9132
9276
  this.onCleanup(() => this.removeAttribute('data-active'));
9133
9277
  draw();
9134
- if (kind !== 'shader') {
9278
+ if (kind === 'distort' || kind === 'liquid') {
9135
9279
  const pos = (e) => {
9136
9280
  const r = this.getBoundingClientRect();
9137
9281
  this._mouse = [clamp((e.clientX - r.left) / (r.width || 1), 0, 1), clamp(1 - (e.clientY - r.top) / (r.height || 1), 0, 1)];
@@ -9148,7 +9292,7 @@ function make(kind) {
9148
9292
  // 4.0.1: also follow the element's own size (grid reflow, card expand…)
9149
9293
  if (typeof ResizeObserver !== 'undefined') {
9150
9294
  const ro = new ResizeObserver(() => {
9151
- q.resize();
9295
+ q.resize(this._scale);
9152
9296
  if (!this._id)
9153
9297
  this.frame();
9154
9298
  });
@@ -9157,9 +9301,20 @@ function make(kind) {
9157
9301
  }
9158
9302
  if (this.reduced)
9159
9303
  return; // one static frame, no loop
9304
+ // 4.8 adaptive quality: fps-driven resolution steps + battery saver frame cap
9305
+ const gov = glGovernor();
9306
+ const auto = this.str('quality', 'auto') !== 'high';
9307
+ gov.onScale = (sc) => {
9308
+ this._scale = sc;
9309
+ this.setAttribute('data-quality', String(sc));
9310
+ q.resize(sc);
9311
+ };
9312
+ if (auto)
9313
+ this.onCleanup(watchPowerSaver((saver) => ((gov.saver = saver), gov.onScale?.(gov.scale))));
9160
9314
  let visible = false;
9161
9315
  const loop = () => {
9162
- this.frame();
9316
+ if (!auto || gov.tick(now()))
9317
+ this.frame();
9163
9318
  this._id = raf(loop);
9164
9319
  };
9165
9320
  const sync = () => {
@@ -9170,7 +9325,7 @@ function make(kind) {
9170
9325
  };
9171
9326
  this.inView((v) => ((visible = v), sync()));
9172
9327
  this.listen(document, 'visibilitychange', sync);
9173
- this.listen(window, 'resize', () => q.resize(), { passive: true });
9328
+ this.listen(window, 'resize', () => q.resize(this._scale), { passive: true });
9174
9329
  this.onCleanup(() => caf(this._id));
9175
9330
  }
9176
9331
  };
@@ -9198,6 +9353,16 @@ function defineDistort(tag = 'usa-distort') {
9198
9353
  function defineLiquid(tag = 'usa-liquid') {
9199
9354
  return defineElement(tag, make('liquid'), { id: 'webgl', text: css$2 });
9200
9355
  }
9356
+ /**
9357
+ * `<usa-post-fx effects="vignette grain crt" intensity="0.6">` — GPU
9358
+ * post-processing over the `<img>` inside (4.8): `vignette` · `grain` ·
9359
+ * `chromatic` · `scanlines` · `crt` · `bloom` · `pixelate` · `duotone` ·
9360
+ * `glitch`, chained in order. `quality="high"` disables adaptive quality.
9361
+ * Fallback: the image with an approximate CSS filter.
9362
+ */
9363
+ function definePostFx(tag = 'usa-post-fx') {
9364
+ return defineElement(tag, make('post'), { id: 'webgl', text: css$2 });
9365
+ }
9201
9366
 
9202
9367
  /**
9203
9368
  * use-scroll-animate/components/webgl — lightweight canvas / WebGL (v3.4).
@@ -9210,6 +9375,7 @@ function defineWebglComponents() {
9210
9375
  defineShader();
9211
9376
  defineDistort();
9212
9377
  defineLiquid();
9378
+ definePostFx();
9213
9379
  }
9214
9380
 
9215
9381
  var css$1 = "";
@@ -10300,5 +10466,5 @@ function defineComponents(categories) {
10300
10466
  const STYLE_BASE = new URL('../', import.meta.url).href;
10301
10467
  onDemandStyles(STYLE_BASE);
10302
10468
 
10303
- export { ALL_TAGS, AMBIENT_EFFECTS, ANIM_ICONS, BRIDGE_PROTOCOL_VERSION, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, JOINING_SCRIPT, LIVE_REGION_IDS, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, MOTION_SENSITIVITY, MOTION_SENSITIVITY_LEVELS, MOTION_TOKENS, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, REVEAL_EFFECTS, SENSITIVITY_CSS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, STATIC_ALTERNATIVES, STYLE_BASE, TIMELINE_PRESETS, VARIANTS, activeAnimations, adaptKeyframes, adoptVariants, animationBudget, announce, applyMotionTokens, applyNativeSettings, applyPack, auditMotionA11y, autoAnimate, autoDegrade, burst, categoryOf, confetti, configureComponents, connectNativeShell, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, defineWebglComponents, detectNativeHost, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getMotionIntensity, getMotionSensitivity, getMotionTokens, glQuad, graphemes, haptic, importMotionTokens, interpolatePath, linearEasing, liveRegion, loadCategoryStyles, loadedStyles, loadingBar, masonryLayout, mergeMotionTokens, morphPath, morphTo, motionAllowed, motionToken, motionTokensToCss, motionTokensToJSON, motionTokensToVars, motionVar, onDemandStyles, onFrame, orientationToTilt, pageTransition, parseDuration, parseEasing, parseNativeSettings, pathsCompatible, pinchScale, postToNative, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolveDurationToken, resolveEasingToken, resolvePosition, resolveSpring, restoreMotionIntensity, restoreMotionSensitivity, revealKeyframes, rubberBand, schedulerStats, scrambleFrame, scrollToTarget, setAnimationBudget, setMotionIntensity, setMotionSensitivity, setVariant, shake, sharedTransition, smoothScroll, snapTo, splitOrder, splitText, splitTimeline, words as splitWords, spring, springEasing, springEffectKeyframes, springSamples, staticAlternative, stepSpring, supportsLinearEasing, supportsNativeScrub, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition };
10469
+ export { ALL_TAGS, AMBIENT_EFFECTS, ANIM_ICONS, BRIDGE_PROTOCOL_VERSION, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, GL_FALLBACKS, JOINING_SCRIPT, LIVE_REGION_IDS, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, MOTION_SENSITIVITY, MOTION_SENSITIVITY_LEVELS, MOTION_TOKENS, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, PARTICLE_PRESETS, POST_EFFECTS, REVEAL_EFFECTS, SENSITIVITY_CSS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, STATIC_ALTERNATIVES, STYLE_BASE, TIMELINE_PRESETS, VARIANTS, activeAnimations, adaptKeyframes, adoptVariants, animationBudget, announce, applyMotionTokens, applyNativeSettings, applyPack, auditMotionA11y, autoAnimate, autoDegrade, burst, categoryOf, confetti, configureComponents, connectNativeShell, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePostFx, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, defineWebglComponents, detectNativeHost, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getMotionIntensity, getMotionSensitivity, getMotionTokens, glFallbackCss, glGovernor, glQuad, graphemes, haptic, importMotionTokens, interpolatePath, linearEasing, liveRegion, loadCategoryStyles, loadedStyles, loadingBar, masonryLayout, mergeMotionTokens, morphPath, morphTo, motionAllowed, motionToken, motionTokensToCss, motionTokensToJSON, motionTokensToVars, motionVar, onDemandStyles, onFrame, orientationToTilt, pageTransition, parseDuration, parseEasing, parseNativeSettings, pathsCompatible, pinchScale, postFxShader, postToNative, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolveDurationToken, resolveEasingToken, resolvePosition, resolveSpring, restoreMotionIntensity, restoreMotionSensitivity, revealKeyframes, rubberBand, schedulerStats, scrambleFrame, scrollToTarget, setAnimationBudget, setMotionIntensity, setMotionSensitivity, setVariant, shake, sharedTransition, smoothScroll, snapTo, splitOrder, splitText, splitTimeline, words as splitWords, spring, springEasing, springEffectKeyframes, springSamples, staticAlternative, stepSpring, supportsLinearEasing, supportsNativeScrub, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition, watchPowerSaver };
10304
10470
  //# sourceMappingURL=lite.js.map