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.
- package/CHANGELOG.md +10 -0
- package/README.md +1 -1
- package/README_ja.md +1 -1
- package/README_zh.md +1 -1
- package/dist/chunks/{index-tags-BQh_uGqH.cjs → index-tags-CIRY2KnU.cjs} +2 -2
- package/dist/chunks/{index-tags-BQh_uGqH.cjs.map → index-tags-CIRY2KnU.cjs.map} +1 -1
- package/dist/chunks/{index-tags-43Xtd01A.js → index-tags-Dh8nwXqw.js} +2 -2
- package/dist/chunks/{index-tags-43Xtd01A.js.map → index-tags-Dh8nwXqw.js.map} +1 -1
- package/dist/components/a11y.cjs +1 -1
- package/dist/components/a11y.d.cts +1 -1
- package/dist/components/a11y.d.ts +1 -1
- package/dist/components/a11y.js +1 -1
- package/dist/components/angular.cjs +1 -1
- package/dist/components/angular.d.cts +2 -1
- package/dist/components/angular.d.ts +2 -1
- package/dist/components/angular.js +1 -1
- package/dist/components/jsx.d.cts +1 -1
- package/dist/components/jsx.d.ts +1 -1
- package/dist/components/lazy.cjs +1 -1
- package/dist/components/lazy.d.cts +1 -1
- package/dist/components/lazy.d.ts +1 -1
- package/dist/components/lazy.js +1 -1
- package/dist/components/lite.cjs +184 -10
- package/dist/components/lite.cjs.map +1 -1
- package/dist/components/lite.js +177 -11
- package/dist/components/lite.js.map +1 -1
- package/dist/components/perf.cjs +1 -1
- package/dist/components/perf.d.cts +1 -1
- package/dist/components/perf.d.ts +1 -1
- package/dist/components/perf.js +1 -1
- package/dist/components/react.cjs +1 -1
- package/dist/components/react.js +1 -1
- package/dist/components/solid.cjs +1 -1
- package/dist/components/solid.d.cts +2 -1
- package/dist/components/solid.d.ts +2 -1
- package/dist/components/solid.js +1 -1
- package/dist/components/svelte.cjs +1 -1
- package/dist/components/svelte.d.cts +2 -1
- package/dist/components/svelte.d.ts +2 -1
- package/dist/components/svelte.js +1 -1
- package/dist/components/vue.cjs +1 -1
- package/dist/components/vue.d.cts +2 -1
- package/dist/components/vue.d.ts +2 -1
- package/dist/components/vue.js +1 -1
- package/dist/components/webgl.cjs +184 -10
- package/dist/components/webgl.cjs.map +1 -1
- package/dist/components/webgl.css +1 -1
- package/dist/components/webgl.d.cts +59 -5
- package/dist/components/webgl.d.ts +59 -5
- package/dist/components/webgl.js +178 -12
- package/dist/components/webgl.js.map +1 -1
- package/dist/components.cjs +9 -1
- package/dist/components.cjs.map +1 -1
- package/dist/components.css +1 -1
- package/dist/components.d.cts +60 -6
- package/dist/components.d.ts +60 -6
- package/dist/components.js +2 -2
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/docs/ROADMAP.md +1 -1
- package/docs/components.md +7 -0
- package/package.json +1 -1
package/dist/components/lite.js
CHANGED
|
@@ -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
|
|
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
|
-
|
|
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
|