@factorialco/f0-react 1.391.0 → 1.392.1
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/dist/{DataCollectionStorageProvider-6el79_MC.js → DataCollectionStorageProvider-DTCCd5RJ.js} +1 -1
- package/dist/{F0AiChat-nPbqtFaA.js → F0AiChat-h8gS_RRF.js} +5 -0
- package/dist/F0HILActionConfirmation-5F-_yw3W.js +1937 -0
- package/dist/ai.d.ts +96 -5
- package/dist/ai.js +23 -22
- package/dist/experimental.d.ts +5 -5
- package/dist/experimental.js +4 -4
- package/dist/f0.d.ts +96 -5
- package/dist/f0.js +14 -13
- package/dist/i18n-provider-defaults.d.ts +5 -5
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/dist/F0HILActionConfirmation-B5UWkFgg.js +0 -1386
|
@@ -0,0 +1,1937 @@
|
|
|
1
|
+
import { jsx as q, jsxs as le } from "react/jsx-runtime";
|
|
2
|
+
import { useInsertionEffect as ze, createContext as Xe, useContext as Ye, useRef as B, useEffect as ie, useState as Ue, useCallback as $e, useMemo as qe } from "react";
|
|
3
|
+
import { G as He, J as Ke, K as je, M as Qe, N as Me, Q as Je, R as Ze, V as et, W as tt, X as nt, Y as Ne, Z as rt, _ as ot, $ as it, a0 as st, a1 as at, a2 as ct, a3 as ut, a4 as se, a5 as lt, a6 as ft, a7 as ht, a8 as dt, a9 as mt, aa as pt, ab as fe, ac as gt } from "./F0AiChat-h8gS_RRF.js";
|
|
4
|
+
import { useTrackVolume as vt } from "@livekit/components-react";
|
|
5
|
+
function wt(t, e, n) {
|
|
6
|
+
ze(() => t.on(e, n), [t, e, n]);
|
|
7
|
+
}
|
|
8
|
+
function ue(t) {
|
|
9
|
+
return typeof t == "object" && !Array.isArray(t);
|
|
10
|
+
}
|
|
11
|
+
function Oe(t, e, n, r) {
|
|
12
|
+
return typeof t == "string" && ue(e) ? He(t, n, r) : t instanceof NodeList ? Array.from(t) : Array.isArray(t) ? t : [t];
|
|
13
|
+
}
|
|
14
|
+
function Tt(t, e, n) {
|
|
15
|
+
return t * (e + 1);
|
|
16
|
+
}
|
|
17
|
+
function he(t, e, n, r) {
|
|
18
|
+
return typeof e == "number" ? e : e.startsWith("-") || e.startsWith("+") ? Math.max(0, t + parseFloat(e)) : e === "<" ? n : r.get(e) ?? t;
|
|
19
|
+
}
|
|
20
|
+
const yt = (t, e, n) => {
|
|
21
|
+
const r = e - t;
|
|
22
|
+
return ((n - t) % r + r) % r + t;
|
|
23
|
+
};
|
|
24
|
+
function Be(t, e) {
|
|
25
|
+
return Ke(t) ? t[yt(0, t.length, e)] : t;
|
|
26
|
+
}
|
|
27
|
+
function Et(t, e, n) {
|
|
28
|
+
for (let r = 0; r < t.length; r++) {
|
|
29
|
+
const o = t[r];
|
|
30
|
+
o.at > e && o.at < n && (Qe(t, o), r--);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
function bt(t, e, n, r, o, c) {
|
|
34
|
+
Et(t, o, c);
|
|
35
|
+
for (let m = 0; m < e.length; m++)
|
|
36
|
+
t.push({
|
|
37
|
+
value: e[m],
|
|
38
|
+
at: je(o, c, r[m]),
|
|
39
|
+
easing: Be(n, m)
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
function At(t, e) {
|
|
43
|
+
for (let n = 0; n < t.length; n++)
|
|
44
|
+
t[n] = t[n] / (e + 1);
|
|
45
|
+
}
|
|
46
|
+
function Rt(t, e) {
|
|
47
|
+
return t.at === e.at ? t.value === null ? 1 : e.value === null ? -1 : 0 : t.at - e.at;
|
|
48
|
+
}
|
|
49
|
+
const xt = "easeInOut", St = 20;
|
|
50
|
+
function Lt(t, { defaultTransition: e = {}, ...n } = {}, r, o) {
|
|
51
|
+
const c = e.duration || 0.3, m = /* @__PURE__ */ new Map(), E = /* @__PURE__ */ new Map(), g = {}, R = /* @__PURE__ */ new Map();
|
|
52
|
+
let p = 0, v = 0, x = 0;
|
|
53
|
+
for (let l = 0; l < t.length; l++) {
|
|
54
|
+
const T = t[l];
|
|
55
|
+
if (typeof T == "string") {
|
|
56
|
+
R.set(T, v);
|
|
57
|
+
continue;
|
|
58
|
+
} else if (!Array.isArray(T)) {
|
|
59
|
+
R.set(T.name, he(v, T.at, p, R));
|
|
60
|
+
continue;
|
|
61
|
+
}
|
|
62
|
+
let [F, d, S = {}] = T;
|
|
63
|
+
S.at !== void 0 && (v = he(v, S.at, p, R));
|
|
64
|
+
let I = 0;
|
|
65
|
+
const U = (y, w, _, P = 0, V = 0) => {
|
|
66
|
+
const A = It(y), { delay: f = 0, times: C = Je(A), type: O = "keyframes", repeat: W, repeatType: k, repeatDelay: H = 0, ...z } = w;
|
|
67
|
+
let { ease: M = e.ease || "easeOut", duration: L } = w;
|
|
68
|
+
const N = typeof f == "function" ? f(P, V) : f, K = A.length, Z = tt(O) ? O : o?.[O];
|
|
69
|
+
if (K <= 2 && Z) {
|
|
70
|
+
let j = 100;
|
|
71
|
+
if (K === 2 && Ft(A)) {
|
|
72
|
+
const J = A[1] - A[0];
|
|
73
|
+
j = Math.abs(J);
|
|
74
|
+
}
|
|
75
|
+
const Q = { ...z };
|
|
76
|
+
L !== void 0 && (Q.duration = nt(L));
|
|
77
|
+
const ee = Ze(Q, j, Z);
|
|
78
|
+
M = ee.ease, L = ee.duration;
|
|
79
|
+
}
|
|
80
|
+
L ?? (L = c);
|
|
81
|
+
const $ = v + N;
|
|
82
|
+
C.length === 1 && C[0] === 0 && (C[1] = 1);
|
|
83
|
+
const ne = C.length - A.length;
|
|
84
|
+
if (ne > 0 && et(C, ne), A.length === 1 && A.unshift(null), W) {
|
|
85
|
+
Ne(W < St, "Repeat count too high, must be less than 20"), L = Tt(L, W);
|
|
86
|
+
const j = [...A], Q = [...C];
|
|
87
|
+
M = Array.isArray(M) ? [...M] : [M];
|
|
88
|
+
const ee = [...M];
|
|
89
|
+
for (let J = 0; J < W; J++) {
|
|
90
|
+
A.push(...j);
|
|
91
|
+
for (let i = 0; i < j.length; i++)
|
|
92
|
+
C.push(Q[i] + (J + 1)), M.push(i === 0 ? "linear" : Be(ee, i - 1));
|
|
93
|
+
}
|
|
94
|
+
At(C, W);
|
|
95
|
+
}
|
|
96
|
+
const re = $ + L;
|
|
97
|
+
bt(_, A, M, C, $, re), I = Math.max(N + L, I), x = Math.max(re, x);
|
|
98
|
+
};
|
|
99
|
+
if (Me(F)) {
|
|
100
|
+
const y = de(F, E);
|
|
101
|
+
U(d, S, me("default", y));
|
|
102
|
+
} else {
|
|
103
|
+
const y = Oe(F, d, r, g), w = y.length;
|
|
104
|
+
for (let _ = 0; _ < w; _++) {
|
|
105
|
+
d = d, S = S;
|
|
106
|
+
const P = y[_], V = de(P, E);
|
|
107
|
+
for (const A in d)
|
|
108
|
+
U(d[A], _t(S, A), me(A, V), _, w);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
p = v, v += I;
|
|
112
|
+
}
|
|
113
|
+
return E.forEach((l, T) => {
|
|
114
|
+
for (const F in l) {
|
|
115
|
+
const d = l[F];
|
|
116
|
+
d.sort(Rt);
|
|
117
|
+
const S = [], I = [], U = [];
|
|
118
|
+
for (let w = 0; w < d.length; w++) {
|
|
119
|
+
const { at: _, value: P, easing: V } = d[w];
|
|
120
|
+
S.push(P), I.push(rt(0, x, _)), U.push(V || "easeOut");
|
|
121
|
+
}
|
|
122
|
+
I[0] !== 0 && (I.unshift(0), S.unshift(S[0]), U.unshift(xt)), I[I.length - 1] !== 1 && (I.push(1), S.push(null)), m.has(T) || m.set(T, {
|
|
123
|
+
keyframes: {},
|
|
124
|
+
transition: {}
|
|
125
|
+
});
|
|
126
|
+
const y = m.get(T);
|
|
127
|
+
y.keyframes[F] = S, y.transition[F] = {
|
|
128
|
+
...e,
|
|
129
|
+
duration: x,
|
|
130
|
+
ease: U,
|
|
131
|
+
times: I,
|
|
132
|
+
...n
|
|
133
|
+
};
|
|
134
|
+
}
|
|
135
|
+
}), m;
|
|
136
|
+
}
|
|
137
|
+
function de(t, e) {
|
|
138
|
+
return !e.has(t) && e.set(t, {}), e.get(t);
|
|
139
|
+
}
|
|
140
|
+
function me(t, e) {
|
|
141
|
+
return e[t] || (e[t] = []), e[t];
|
|
142
|
+
}
|
|
143
|
+
function It(t) {
|
|
144
|
+
return Array.isArray(t) ? t : [t];
|
|
145
|
+
}
|
|
146
|
+
function _t(t, e) {
|
|
147
|
+
return t && t[e] ? {
|
|
148
|
+
...t,
|
|
149
|
+
...t[e]
|
|
150
|
+
} : { ...t };
|
|
151
|
+
}
|
|
152
|
+
const Ct = (t) => typeof t == "number", Ft = (t) => t.every(Ct);
|
|
153
|
+
function Pt(t, e) {
|
|
154
|
+
return t in e;
|
|
155
|
+
}
|
|
156
|
+
class Ut extends ot {
|
|
157
|
+
constructor() {
|
|
158
|
+
super(...arguments), this.type = "object";
|
|
159
|
+
}
|
|
160
|
+
readValueFromInstance(e, n) {
|
|
161
|
+
if (Pt(n, e)) {
|
|
162
|
+
const r = e[n];
|
|
163
|
+
if (typeof r == "string" || typeof r == "number")
|
|
164
|
+
return r;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
getBaseTargetFromProps() {
|
|
168
|
+
}
|
|
169
|
+
removeValueFromRenderState(e, n) {
|
|
170
|
+
delete n.output[e];
|
|
171
|
+
}
|
|
172
|
+
measureInstanceViewportBox() {
|
|
173
|
+
return it();
|
|
174
|
+
}
|
|
175
|
+
build(e, n) {
|
|
176
|
+
Object.assign(e.output, n);
|
|
177
|
+
}
|
|
178
|
+
renderInstance(e, { output: n }) {
|
|
179
|
+
Object.assign(e, n);
|
|
180
|
+
}
|
|
181
|
+
sortInstanceNodePosition() {
|
|
182
|
+
return 0;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
function Mt(t) {
|
|
186
|
+
const e = {
|
|
187
|
+
presenceContext: null,
|
|
188
|
+
props: {},
|
|
189
|
+
visualState: {
|
|
190
|
+
renderState: {
|
|
191
|
+
transform: {},
|
|
192
|
+
transformOrigin: {},
|
|
193
|
+
style: {},
|
|
194
|
+
vars: {},
|
|
195
|
+
attrs: {}
|
|
196
|
+
},
|
|
197
|
+
latestValues: {}
|
|
198
|
+
}
|
|
199
|
+
}, n = st(t) && !at(t) ? new ct(e) : new ut(e);
|
|
200
|
+
n.mount(t), se.set(t, n);
|
|
201
|
+
}
|
|
202
|
+
function Nt(t) {
|
|
203
|
+
const e = {
|
|
204
|
+
presenceContext: null,
|
|
205
|
+
props: {},
|
|
206
|
+
visualState: {
|
|
207
|
+
renderState: {
|
|
208
|
+
output: {}
|
|
209
|
+
},
|
|
210
|
+
latestValues: {}
|
|
211
|
+
}
|
|
212
|
+
}, n = new Ut(e);
|
|
213
|
+
n.mount(t), se.set(t, n);
|
|
214
|
+
}
|
|
215
|
+
function Ot(t, e) {
|
|
216
|
+
return Me(t) || typeof t == "number" || typeof t == "string" && !ue(e);
|
|
217
|
+
}
|
|
218
|
+
function Ve(t, e, n, r) {
|
|
219
|
+
const o = [];
|
|
220
|
+
if (Ot(t, e))
|
|
221
|
+
o.push(lt(t, ue(e) && e.default || e, n && (n.default || n)));
|
|
222
|
+
else {
|
|
223
|
+
const c = Oe(t, e, r), m = c.length;
|
|
224
|
+
Ne(!!m, "No valid elements provided.");
|
|
225
|
+
for (let E = 0; E < m; E++) {
|
|
226
|
+
const g = c[E], R = g instanceof Element ? Mt : Nt;
|
|
227
|
+
se.has(g) || R(g);
|
|
228
|
+
const p = se.get(g), v = { ...n };
|
|
229
|
+
"delay" in v && typeof v.delay == "function" && (v.delay = v.delay(E, m)), o.push(...ft(p, { ...e, transition: v }, {}));
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
return o;
|
|
233
|
+
}
|
|
234
|
+
function Bt(t, e, n) {
|
|
235
|
+
const r = [];
|
|
236
|
+
return Lt(t, e, n, { spring: ht }).forEach(({ keyframes: c, transition: m }, E) => {
|
|
237
|
+
r.push(...Ve(E, c, m));
|
|
238
|
+
}), r;
|
|
239
|
+
}
|
|
240
|
+
class Vt {
|
|
241
|
+
constructor(e) {
|
|
242
|
+
this.stop = () => this.runAll("stop"), this.animations = e.filter(Boolean);
|
|
243
|
+
}
|
|
244
|
+
get finished() {
|
|
245
|
+
return Promise.all(this.animations.map((e) => e.finished));
|
|
246
|
+
}
|
|
247
|
+
/**
|
|
248
|
+
* TODO: Filter out cancelled or stopped animations before returning
|
|
249
|
+
*/
|
|
250
|
+
getAll(e) {
|
|
251
|
+
return this.animations[0][e];
|
|
252
|
+
}
|
|
253
|
+
setAll(e, n) {
|
|
254
|
+
for (let r = 0; r < this.animations.length; r++)
|
|
255
|
+
this.animations[r][e] = n;
|
|
256
|
+
}
|
|
257
|
+
attachTimeline(e) {
|
|
258
|
+
const n = this.animations.map((r) => r.attachTimeline(e));
|
|
259
|
+
return () => {
|
|
260
|
+
n.forEach((r, o) => {
|
|
261
|
+
r && r(), this.animations[o].stop();
|
|
262
|
+
});
|
|
263
|
+
};
|
|
264
|
+
}
|
|
265
|
+
get time() {
|
|
266
|
+
return this.getAll("time");
|
|
267
|
+
}
|
|
268
|
+
set time(e) {
|
|
269
|
+
this.setAll("time", e);
|
|
270
|
+
}
|
|
271
|
+
get speed() {
|
|
272
|
+
return this.getAll("speed");
|
|
273
|
+
}
|
|
274
|
+
set speed(e) {
|
|
275
|
+
this.setAll("speed", e);
|
|
276
|
+
}
|
|
277
|
+
get state() {
|
|
278
|
+
return this.getAll("state");
|
|
279
|
+
}
|
|
280
|
+
get startTime() {
|
|
281
|
+
return this.getAll("startTime");
|
|
282
|
+
}
|
|
283
|
+
get duration() {
|
|
284
|
+
let e = 0;
|
|
285
|
+
for (let n = 0; n < this.animations.length; n++)
|
|
286
|
+
e = Math.max(e, this.animations[n].duration);
|
|
287
|
+
return e;
|
|
288
|
+
}
|
|
289
|
+
runAll(e) {
|
|
290
|
+
this.animations.forEach((n) => n[e]());
|
|
291
|
+
}
|
|
292
|
+
play() {
|
|
293
|
+
this.runAll("play");
|
|
294
|
+
}
|
|
295
|
+
pause() {
|
|
296
|
+
this.runAll("pause");
|
|
297
|
+
}
|
|
298
|
+
cancel() {
|
|
299
|
+
this.runAll("cancel");
|
|
300
|
+
}
|
|
301
|
+
complete() {
|
|
302
|
+
this.runAll("complete");
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
class Dt extends Vt {
|
|
306
|
+
then(e, n) {
|
|
307
|
+
return this.finished.finally(e).then(() => {
|
|
308
|
+
});
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
function Gt(t) {
|
|
312
|
+
return Array.isArray(t) && t.some(Array.isArray);
|
|
313
|
+
}
|
|
314
|
+
function kt(t) {
|
|
315
|
+
function e(n, r, o) {
|
|
316
|
+
let c = [];
|
|
317
|
+
return Gt(n) ? c = Bt(n, r, t) : c = Ve(n, r, o, t), new Dt(c);
|
|
318
|
+
}
|
|
319
|
+
return e;
|
|
320
|
+
}
|
|
321
|
+
const Wt = kt(), yn = ["xs", "sm", "md", "lg"], En = [
|
|
322
|
+
"inProgress",
|
|
323
|
+
"executing",
|
|
324
|
+
"completed"
|
|
325
|
+
], bn = {
|
|
326
|
+
ai: {
|
|
327
|
+
openChat: "Open Chat with One AI",
|
|
328
|
+
closeChat: "Close Chat with One AI",
|
|
329
|
+
startNewChat: "Start new chat",
|
|
330
|
+
scrollToBottom: "Scroll to bottom",
|
|
331
|
+
welcome: "Ask or create with One",
|
|
332
|
+
defaultInitialMessage: "How can I help you today?",
|
|
333
|
+
inputPlaceholder: "Ask about time, people, or company info and a lot of other things...",
|
|
334
|
+
stopAnswerGeneration: "Stop generating",
|
|
335
|
+
responseStopped: "You stopped this response",
|
|
336
|
+
sendMessage: "Send message",
|
|
337
|
+
thoughtsGroupTitle: "Reflection",
|
|
338
|
+
resourcesGroupTitle: "Resources",
|
|
339
|
+
thinking: "Thinking...",
|
|
340
|
+
feedbackModal: {
|
|
341
|
+
positive: {
|
|
342
|
+
title: "What did you like about this response?",
|
|
343
|
+
label: "Your feedback helps us make Factorial AI better",
|
|
344
|
+
placeholder: "Share what worked well"
|
|
345
|
+
},
|
|
346
|
+
negative: {
|
|
347
|
+
title: "What could have been better?",
|
|
348
|
+
label: "Your feedback helps us improve future answers",
|
|
349
|
+
placeholder: "Share what didn't work"
|
|
350
|
+
}
|
|
351
|
+
},
|
|
352
|
+
dataDownloadPreview: "Preview {{shown}} of {{total}} rows — download the Excel to see all data.",
|
|
353
|
+
expandChat: "Expand chat",
|
|
354
|
+
collapseChat: "Collapse chat",
|
|
355
|
+
ask: "Ask One",
|
|
356
|
+
viewProfile: "View profile",
|
|
357
|
+
tools: "Tools"
|
|
358
|
+
}
|
|
359
|
+
}, De = Xe(null);
|
|
360
|
+
function An({
|
|
361
|
+
children: t,
|
|
362
|
+
translations: e
|
|
363
|
+
}) {
|
|
364
|
+
return /* @__PURE__ */ q(De.Provider, { value: e, children: t });
|
|
365
|
+
}
|
|
366
|
+
function Rn() {
|
|
367
|
+
const t = Ye(De);
|
|
368
|
+
if (t === null)
|
|
369
|
+
throw new Error(
|
|
370
|
+
"useAiChatTranslations must be used within an AiChatTranslationsProvider"
|
|
371
|
+
);
|
|
372
|
+
return t;
|
|
373
|
+
}
|
|
374
|
+
function pe(t, e, n, r) {
|
|
375
|
+
const o = Math.max(1, Math.min(t, e)), c = Math.min(n, 20), E = Math.min(c + r, o), g = Math.min(E, Math.floor(t / 2)), R = Math.min(E, Math.floor(e / 2)), p = ($) => $ / t * 2 - 1, v = ($) => $ / e * 2 - 1, x = 0, l = t, T = 0, F = e, d = g, S = t - g, I = R, U = e - R, y = p(x), w = p(l), _ = v(T), P = v(F), V = p(d), A = p(S), f = v(I), C = v(U), O = 0, W = 0, k = 1, H = 1, z = g / t, M = 1 - g / t, L = R / e, N = 1 - R / e, K = new Float32Array([
|
|
376
|
+
// Top strip
|
|
377
|
+
y,
|
|
378
|
+
_,
|
|
379
|
+
w,
|
|
380
|
+
_,
|
|
381
|
+
y,
|
|
382
|
+
f,
|
|
383
|
+
y,
|
|
384
|
+
f,
|
|
385
|
+
w,
|
|
386
|
+
_,
|
|
387
|
+
w,
|
|
388
|
+
f,
|
|
389
|
+
// Bottom strip
|
|
390
|
+
y,
|
|
391
|
+
C,
|
|
392
|
+
w,
|
|
393
|
+
C,
|
|
394
|
+
y,
|
|
395
|
+
P,
|
|
396
|
+
y,
|
|
397
|
+
P,
|
|
398
|
+
w,
|
|
399
|
+
C,
|
|
400
|
+
w,
|
|
401
|
+
P,
|
|
402
|
+
// Left strip
|
|
403
|
+
y,
|
|
404
|
+
f,
|
|
405
|
+
V,
|
|
406
|
+
f,
|
|
407
|
+
y,
|
|
408
|
+
C,
|
|
409
|
+
y,
|
|
410
|
+
C,
|
|
411
|
+
V,
|
|
412
|
+
f,
|
|
413
|
+
V,
|
|
414
|
+
C,
|
|
415
|
+
// Right strip
|
|
416
|
+
A,
|
|
417
|
+
f,
|
|
418
|
+
w,
|
|
419
|
+
f,
|
|
420
|
+
A,
|
|
421
|
+
C,
|
|
422
|
+
A,
|
|
423
|
+
C,
|
|
424
|
+
w,
|
|
425
|
+
f,
|
|
426
|
+
w,
|
|
427
|
+
C
|
|
428
|
+
]), Z = new Float32Array([
|
|
429
|
+
// Top strip
|
|
430
|
+
O,
|
|
431
|
+
W,
|
|
432
|
+
k,
|
|
433
|
+
W,
|
|
434
|
+
O,
|
|
435
|
+
L,
|
|
436
|
+
O,
|
|
437
|
+
L,
|
|
438
|
+
k,
|
|
439
|
+
W,
|
|
440
|
+
k,
|
|
441
|
+
L,
|
|
442
|
+
// Bottom strip
|
|
443
|
+
O,
|
|
444
|
+
N,
|
|
445
|
+
k,
|
|
446
|
+
N,
|
|
447
|
+
O,
|
|
448
|
+
H,
|
|
449
|
+
O,
|
|
450
|
+
H,
|
|
451
|
+
k,
|
|
452
|
+
N,
|
|
453
|
+
k,
|
|
454
|
+
H,
|
|
455
|
+
// Left strip
|
|
456
|
+
O,
|
|
457
|
+
L,
|
|
458
|
+
z,
|
|
459
|
+
L,
|
|
460
|
+
O,
|
|
461
|
+
N,
|
|
462
|
+
O,
|
|
463
|
+
N,
|
|
464
|
+
z,
|
|
465
|
+
L,
|
|
466
|
+
z,
|
|
467
|
+
N,
|
|
468
|
+
// Right strip
|
|
469
|
+
M,
|
|
470
|
+
L,
|
|
471
|
+
k,
|
|
472
|
+
L,
|
|
473
|
+
M,
|
|
474
|
+
N,
|
|
475
|
+
M,
|
|
476
|
+
N,
|
|
477
|
+
k,
|
|
478
|
+
L,
|
|
479
|
+
k,
|
|
480
|
+
N
|
|
481
|
+
]);
|
|
482
|
+
return { positions: K, uvs: Z };
|
|
483
|
+
}
|
|
484
|
+
function ge(t, e, n) {
|
|
485
|
+
const r = t.createShader(e);
|
|
486
|
+
if (!r) throw new Error("Failed to create shader");
|
|
487
|
+
if (t.shaderSource(r, n), t.compileShader(r), !t.getShaderParameter(r, t.COMPILE_STATUS)) {
|
|
488
|
+
const o = t.getShaderInfoLog(r) || "Unknown shader error";
|
|
489
|
+
throw t.deleteShader(r), new Error(o);
|
|
490
|
+
}
|
|
491
|
+
return r;
|
|
492
|
+
}
|
|
493
|
+
function zt(t, e, n) {
|
|
494
|
+
const r = ge(t, t.VERTEX_SHADER, e), o = ge(t, t.FRAGMENT_SHADER, n), c = t.createProgram();
|
|
495
|
+
if (!c) throw new Error("Failed to create program");
|
|
496
|
+
if (t.attachShader(c, r), t.attachShader(c, o), t.linkProgram(c), !t.getProgramParameter(c, t.LINK_STATUS)) {
|
|
497
|
+
const m = t.getProgramInfoLog(c) || "Unknown link error";
|
|
498
|
+
throw t.deleteProgram(c), t.deleteShader(r), t.deleteShader(o), new Error(m);
|
|
499
|
+
}
|
|
500
|
+
return t.deleteShader(r), t.deleteShader(o), c;
|
|
501
|
+
}
|
|
502
|
+
const Xt = `#version 300 es
|
|
503
|
+
precision lowp float;
|
|
504
|
+
|
|
505
|
+
in vec2 vUV;
|
|
506
|
+
out vec4 outColor;
|
|
507
|
+
|
|
508
|
+
uniform vec2 uResolution;
|
|
509
|
+
uniform float uTime;
|
|
510
|
+
uniform float uBorderWidth;
|
|
511
|
+
uniform float uGlowWidth;
|
|
512
|
+
uniform float uBorderRadius;
|
|
513
|
+
uniform vec3 uColors[4];
|
|
514
|
+
|
|
515
|
+
// dark/light mode
|
|
516
|
+
uniform float uGlowExponent;
|
|
517
|
+
uniform float uGlowFactor;
|
|
518
|
+
|
|
519
|
+
const float PI = 3.14159265359;
|
|
520
|
+
const float TWO_PI = 2.0 * PI;
|
|
521
|
+
const float HALF_PI = 0.5 * PI;
|
|
522
|
+
|
|
523
|
+
// Light source parameters (constants)
|
|
524
|
+
const vec4 startPositions = vec4(0.0, PI, HALF_PI, 1.5 * PI);
|
|
525
|
+
const vec4 speeds = vec4(-1.9, -1.9, -1.5, 2.1);
|
|
526
|
+
const vec4 innerRadius = vec4(PI * 0.8, PI * 0.7, PI * 0.3, PI * 0.1);
|
|
527
|
+
const vec4 outerRadius = vec4(PI * 1.2, PI * 0.9, PI * 0.6, PI * 0.4);
|
|
528
|
+
|
|
529
|
+
/**
|
|
530
|
+
* @brief Generates a random float value based on the input 2D coordinates.
|
|
531
|
+
* @param st The input 2D coordinates.
|
|
532
|
+
* @return float A random float value.
|
|
533
|
+
*/
|
|
534
|
+
float random(vec2 st) {
|
|
535
|
+
return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
vec2 random2(vec2 st) {
|
|
539
|
+
return vec2(random(st), random(st + 1.0));
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
/**
|
|
543
|
+
* Derivative-based Anti-aliasing
|
|
544
|
+
*/
|
|
545
|
+
float aaStep(float edge, float d) {
|
|
546
|
+
// Calculate the width of the anti-aliasing transition
|
|
547
|
+
// This is the distance the value changes over one pixel.
|
|
548
|
+
float width = fwidth(d);
|
|
549
|
+
return smoothstep(edge - width * 0.5, edge + width * 0.5, d);
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
/**
|
|
553
|
+
* @brief Provides an anti-aliased version of fract().
|
|
554
|
+
* @param x The input value.
|
|
555
|
+
* @return float The anti-aliased fractional part of x.
|
|
556
|
+
*/
|
|
557
|
+
float aaFract(float x) {
|
|
558
|
+
float f = fract(x);
|
|
559
|
+
float w = fwidth(x); // Get the width of the transition band for one pixel.
|
|
560
|
+
|
|
561
|
+
// Use smoothstep to fade the line out as it approaches the 1.0 boundary.
|
|
562
|
+
// The fade happens over a distance equal to the pixel width 'w'.
|
|
563
|
+
float smooth_f = f * (1.0 - smoothstep(1.0 - w, 1.0, f));
|
|
564
|
+
|
|
565
|
+
return smooth_f;
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
/**
|
|
569
|
+
* @name sdRoundedBox
|
|
570
|
+
* @description Calculates the signed distance from a point to a rounded rectangle.
|
|
571
|
+
* @param {vec2} p - The point coordinates.
|
|
572
|
+
* @param {vec2} b - Half the size of the rectangle (half width and half height).
|
|
573
|
+
* @param {float} r - The corner radius.
|
|
574
|
+
* @returns {float} - Signed distance to the surface of the rounded rectangle.
|
|
575
|
+
*/
|
|
576
|
+
float sdRoundedBox(in vec2 p, in vec2 b, in float r) {
|
|
577
|
+
vec2 q = abs(p) - b + r;
|
|
578
|
+
return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
/**
|
|
582
|
+
* @brief Calculates the smooth inner glow intensity for a rectangle.
|
|
583
|
+
* @param p The current pixel coordinate, centered at (0,0).
|
|
584
|
+
* @param b The half-dimensions of the rectangle.
|
|
585
|
+
* @param radius The radius of the glow/blur.
|
|
586
|
+
* @return float The glow intensity, from 0.0 to 1.0.
|
|
587
|
+
*/
|
|
588
|
+
float getInnerGlow(vec2 p, vec2 b, float radius) {
|
|
589
|
+
// Check if the pixel is outside the rectangle.
|
|
590
|
+
// vec2 d_out = abs(p) - b;
|
|
591
|
+
// if (max(d_out.x, d_out.y) > 0.0) {
|
|
592
|
+
// return 0.0;
|
|
593
|
+
// }
|
|
594
|
+
|
|
595
|
+
// Calculate the distance to the nearest vertical and horizontal edges (positive inwards).
|
|
596
|
+
float dist_x = b.x - abs(p.x);
|
|
597
|
+
float dist_y = b.y - abs(p.y);
|
|
598
|
+
|
|
599
|
+
// Calculate the horizontal and vertical glow intensities independently.
|
|
600
|
+
float glow_x = smoothstep(radius, 0.0, dist_x);
|
|
601
|
+
float glow_y = smoothstep(radius, 0.0, dist_y);
|
|
602
|
+
|
|
603
|
+
// Combine the two directional glows using a screen blend mode: 1.0 - (1.0 - a) * (1.0 - b).
|
|
604
|
+
return 1.0 - (1.0 - glow_x) * (1.0 - glow_y);
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
float getVignette(vec2 uv) {
|
|
608
|
+
vec2 vignetteUv = uv;
|
|
609
|
+
vignetteUv = vignetteUv * (1.0 - vignetteUv);
|
|
610
|
+
float vignette = vignetteUv.x * vignetteUv.y * 25.0; // multiply with sth for intensity
|
|
611
|
+
vignette = pow(vignette, 0.16); // change pow for modifying the extend of the vignette
|
|
612
|
+
// vignette = smoothstep(0.0, 0.7, vignette); // smoothstep to avoid hard edges
|
|
613
|
+
vignette = 1.0 - vignette;
|
|
614
|
+
|
|
615
|
+
return vignette;
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
/**
|
|
619
|
+
* Convert UV coordinates to angle (0 to 2π) around the border
|
|
620
|
+
*/
|
|
621
|
+
float uvToAngle(vec2 uv) {
|
|
622
|
+
vec2 center = vec2(0.5);
|
|
623
|
+
vec2 dir = uv - center;
|
|
624
|
+
return atan(dir.y, dir.x) + PI;
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
/**
|
|
628
|
+
* Get current light center position (angle) based on start position, speed and time
|
|
629
|
+
*/
|
|
630
|
+
// float getLightCenter(float startPos, float speed, float time) {
|
|
631
|
+
// return mod(startPos + speed * time, TWO_PI);
|
|
632
|
+
// }
|
|
633
|
+
|
|
634
|
+
void main() {
|
|
635
|
+
vec2 uv = vUV;
|
|
636
|
+
vec2 pos = uv * uResolution;
|
|
637
|
+
vec2 centeredPos = pos - uResolution * 0.5;
|
|
638
|
+
vec2 size = uResolution - uBorderWidth;
|
|
639
|
+
vec2 halfSize = size * 0.5;
|
|
640
|
+
|
|
641
|
+
// Calculate the signed distance from the rounded rectangle
|
|
642
|
+
float dBorderBox = sdRoundedBox(centeredPos, halfSize, uBorderRadius);
|
|
643
|
+
float border = aaStep(0.0, dBorderBox);
|
|
644
|
+
|
|
645
|
+
// This will create a gradient mask to safely fade out from borders to inner edges.
|
|
646
|
+
float glow = getInnerGlow(centeredPos, halfSize, uGlowWidth);
|
|
647
|
+
// glow = smoothstep(0.0, 0.5, glow);
|
|
648
|
+
// glow = aaFract(glow * 10.0);
|
|
649
|
+
|
|
650
|
+
float vignette = getVignette(uv);
|
|
651
|
+
glow *= vignette;
|
|
652
|
+
|
|
653
|
+
float posAngle = uvToAngle(uv);
|
|
654
|
+
|
|
655
|
+
// vec4 lightCenter = vec4(
|
|
656
|
+
// getLightCenter(startPositions.x, speeds.x, uTime),
|
|
657
|
+
// getLightCenter(startPositions.y, speeds.y, uTime),
|
|
658
|
+
// getLightCenter(startPositions.z, speeds.z, uTime),
|
|
659
|
+
// getLightCenter(startPositions.w, speeds.w, uTime)
|
|
660
|
+
// );
|
|
661
|
+
vec4 lightCenter = mod(startPositions + speeds * uTime, TWO_PI);
|
|
662
|
+
|
|
663
|
+
vec4 angleDist = abs(posAngle - lightCenter);
|
|
664
|
+
|
|
665
|
+
// Calculate shortest angular distance (considering wrap-around)
|
|
666
|
+
vec4 disToLight = min(angleDist, TWO_PI - angleDist) / TWO_PI;
|
|
667
|
+
|
|
668
|
+
float intensityBorder[4];
|
|
669
|
+
intensityBorder[0] = 1.0;
|
|
670
|
+
intensityBorder[1] = smoothstep(0.4, 0.0, disToLight.y);
|
|
671
|
+
intensityBorder[2] = smoothstep(0.4, 0.0, disToLight.z);
|
|
672
|
+
intensityBorder[3] = smoothstep(0.2, 0.0, disToLight.w) * 0.5;
|
|
673
|
+
|
|
674
|
+
// mix these 4 colors with distance
|
|
675
|
+
vec3 borderColor = vec3(0.0);
|
|
676
|
+
for(int i = 0; i < 4; i++) {
|
|
677
|
+
borderColor = mix(borderColor, uColors[i], intensityBorder[i]);
|
|
678
|
+
}
|
|
679
|
+
borderColor *= 1.1;
|
|
680
|
+
|
|
681
|
+
borderColor = clamp(borderColor, 0.0, 1.0);
|
|
682
|
+
|
|
683
|
+
float intensityGlow[4];
|
|
684
|
+
intensityGlow[0] = smoothstep(0.9, 0.0, disToLight.x);
|
|
685
|
+
intensityGlow[1] = smoothstep(0.7, 0.0, disToLight.y);
|
|
686
|
+
intensityGlow[2] = smoothstep(0.4, 0.0, disToLight.z);
|
|
687
|
+
intensityGlow[3] = smoothstep(0.1, 0.0, disToLight.w) * 0.7;
|
|
688
|
+
|
|
689
|
+
// timely breathing effect
|
|
690
|
+
vec4 breath = smoothstep(0.0, 1.0, sin(uTime * 1.0 + startPositions * PI) * 0.2 + 0.8);
|
|
691
|
+
|
|
692
|
+
vec3 glowColor = vec3(0.0);
|
|
693
|
+
glowColor += uColors[0] * intensityGlow[0] * breath.x;
|
|
694
|
+
glowColor += uColors[1] * intensityGlow[1] * breath.y;
|
|
695
|
+
glowColor += uColors[2] * intensityGlow[2] * breath.z;
|
|
696
|
+
glowColor += uColors[3] * intensityGlow[3] * breath.w * glow; // fade it a little bit
|
|
697
|
+
|
|
698
|
+
glow = pow(glow, uGlowExponent);
|
|
699
|
+
glow *= random(pos + uTime) * 0.1 + 1.0;
|
|
700
|
+
glowColor *= glow * uGlowFactor;
|
|
701
|
+
glowColor = clamp(glowColor, 0.0, 1.0);
|
|
702
|
+
|
|
703
|
+
vec3 color = mix(glowColor, borderColor + glowColor * 0.2, border);
|
|
704
|
+
|
|
705
|
+
float alpha = mix(glow, 1.0, border);
|
|
706
|
+
|
|
707
|
+
outColor = vec4(color, alpha);
|
|
708
|
+
}`, Yt = `#version 300 es
|
|
709
|
+
|
|
710
|
+
in vec2 aPosition;
|
|
711
|
+
in vec2 aUV;
|
|
712
|
+
out vec2 vUV;
|
|
713
|
+
void main() {
|
|
714
|
+
vUV = aUV;
|
|
715
|
+
gl_Position = vec4(aPosition, 0.0, 1.0);
|
|
716
|
+
}`, $t = [
|
|
717
|
+
"rgb(57, 182, 255)",
|
|
718
|
+
"rgb(189, 69, 251)",
|
|
719
|
+
"rgb(255, 87, 51)",
|
|
720
|
+
"rgb(255, 214, 0)"
|
|
721
|
+
];
|
|
722
|
+
function qt(t) {
|
|
723
|
+
const e = t.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
|
|
724
|
+
if (!e)
|
|
725
|
+
throw new Error(`Invalid color format: ${t}`);
|
|
726
|
+
const [, n, r, o] = e;
|
|
727
|
+
return [parseInt(n) / 255, parseInt(r) / 255, parseInt(o) / 255];
|
|
728
|
+
}
|
|
729
|
+
class xn {
|
|
730
|
+
element;
|
|
731
|
+
canvas;
|
|
732
|
+
options;
|
|
733
|
+
running = !1;
|
|
734
|
+
disposed = !1;
|
|
735
|
+
startTime = 0;
|
|
736
|
+
lastTime = 0;
|
|
737
|
+
rafId = null;
|
|
738
|
+
glr;
|
|
739
|
+
observer;
|
|
740
|
+
constructor(e = {}) {
|
|
741
|
+
this.options = {
|
|
742
|
+
width: e.width ?? 600,
|
|
743
|
+
height: e.height ?? 600,
|
|
744
|
+
ratio: e.ratio ?? window.devicePixelRatio ?? 1,
|
|
745
|
+
borderWidth: e.borderWidth ?? 8,
|
|
746
|
+
glowWidth: e.glowWidth ?? 200,
|
|
747
|
+
borderRadius: e.borderRadius ?? 8,
|
|
748
|
+
mode: e.mode ?? "light",
|
|
749
|
+
...e
|
|
750
|
+
}, this.canvas = document.createElement("canvas"), this.options.classNames && (this.canvas.className = this.options.classNames), this.options.styles && Object.assign(this.canvas.style, this.options.styles), this.canvas.style.display = "block", this.canvas.style.transformOrigin = "center", this.canvas.style.pointerEvents = "none", this.element = this.canvas, this.setupGL();
|
|
751
|
+
}
|
|
752
|
+
start() {
|
|
753
|
+
if (this.disposed) throw new Error("Mask instance has been disposed.");
|
|
754
|
+
if (this.running) return;
|
|
755
|
+
if (!this.glr) {
|
|
756
|
+
console.error("WebGL resources are not initialized.");
|
|
757
|
+
return;
|
|
758
|
+
}
|
|
759
|
+
this.running = !0, this.startTime = performance.now(), this.resize(
|
|
760
|
+
this.options.width ?? 600,
|
|
761
|
+
this.options.height ?? 600,
|
|
762
|
+
this.options.ratio
|
|
763
|
+
), this.glr.gl.viewport(0, 0, this.canvas.width, this.canvas.height), this.glr.gl.useProgram(this.glr.program), this.glr.gl.uniform2f(
|
|
764
|
+
this.glr.uResolution,
|
|
765
|
+
this.canvas.width,
|
|
766
|
+
this.canvas.height
|
|
767
|
+
), this.checkGLError(this.glr.gl, "start: after initial setup");
|
|
768
|
+
const e = () => {
|
|
769
|
+
if (!this.running || !this.glr) return;
|
|
770
|
+
this.rafId = requestAnimationFrame(e);
|
|
771
|
+
const n = performance.now();
|
|
772
|
+
if (n - this.lastTime < 1e3 / 32) return;
|
|
773
|
+
this.lastTime = n;
|
|
774
|
+
const o = (n - this.startTime) * 1e-3;
|
|
775
|
+
this.render(o);
|
|
776
|
+
};
|
|
777
|
+
this.rafId = requestAnimationFrame(e);
|
|
778
|
+
}
|
|
779
|
+
pause() {
|
|
780
|
+
if (this.disposed) throw new Error("Mask instance has been disposed.");
|
|
781
|
+
this.running = !1, this.rafId !== null && cancelAnimationFrame(this.rafId);
|
|
782
|
+
}
|
|
783
|
+
dispose() {
|
|
784
|
+
if (this.disposed) return;
|
|
785
|
+
this.disposed = !0, this.running = !1, this.rafId !== null && cancelAnimationFrame(this.rafId);
|
|
786
|
+
const { gl: e, vao: n, positionBuffer: r, uvBuffer: o, program: c } = this.glr;
|
|
787
|
+
n && e.deleteVertexArray(n), r && e.deleteBuffer(r), o && e.deleteBuffer(o), e.deleteProgram(c), this.observer && this.observer.disconnect(), this.canvas.remove();
|
|
788
|
+
}
|
|
789
|
+
resize(e, n, r) {
|
|
790
|
+
if (this.disposed) throw new Error("Mask instance has been disposed.");
|
|
791
|
+
if (this.options.width = e, this.options.height = n, r && (this.options.ratio = r), !this.running) return;
|
|
792
|
+
const { gl: o, program: c, vao: m, positionBuffer: E, uvBuffer: g, uResolution: R } = this.glr, p = r ?? this.options.ratio ?? window.devicePixelRatio ?? 1, v = Math.max(1, Math.floor(e * p)), x = Math.max(1, Math.floor(n * p));
|
|
793
|
+
this.canvas.style.width = `${e}px`, this.canvas.style.height = `${n}px`, (this.canvas.width !== v || this.canvas.height !== x) && (this.canvas.width = v, this.canvas.height = x), o.viewport(0, 0, this.canvas.width, this.canvas.height), this.checkGLError(o, "resize: after viewport setup");
|
|
794
|
+
const { positions: l, uvs: T } = pe(
|
|
795
|
+
this.canvas.width,
|
|
796
|
+
this.canvas.height,
|
|
797
|
+
this.options.borderWidth * p,
|
|
798
|
+
this.options.glowWidth * p
|
|
799
|
+
);
|
|
800
|
+
o.bindVertexArray(m), o.bindBuffer(o.ARRAY_BUFFER, E), o.bufferData(o.ARRAY_BUFFER, l, o.STATIC_DRAW);
|
|
801
|
+
const F = o.getAttribLocation(c, "aPosition");
|
|
802
|
+
o.enableVertexAttribArray(F), o.vertexAttribPointer(F, 2, o.FLOAT, !1, 0, 0), this.checkGLError(o, "resize: after position buffer update"), o.bindBuffer(o.ARRAY_BUFFER, g), o.bufferData(o.ARRAY_BUFFER, T, o.STATIC_DRAW);
|
|
803
|
+
const d = o.getAttribLocation(c, "aUV");
|
|
804
|
+
o.enableVertexAttribArray(d), o.vertexAttribPointer(d, 2, o.FLOAT, !1, 0, 0), this.checkGLError(o, "resize: after UV buffer update"), o.useProgram(c), o.uniform2f(R, this.canvas.width, this.canvas.height), o.uniform1f(this.glr.uBorderWidth, this.options.borderWidth * p), o.uniform1f(this.glr.uGlowWidth, this.options.glowWidth * p), o.uniform1f(this.glr.uBorderRadius, this.options.borderRadius * p), this.checkGLError(o, "resize: after uniform updates");
|
|
805
|
+
const S = performance.now();
|
|
806
|
+
this.lastTime = S;
|
|
807
|
+
const I = (S - this.startTime) * 1e-3;
|
|
808
|
+
this.render(I);
|
|
809
|
+
}
|
|
810
|
+
/**
|
|
811
|
+
* Automatically resizes the canvas to match the dimensions of the given element.
|
|
812
|
+
* @note using ResizeObserver
|
|
813
|
+
*/
|
|
814
|
+
autoResize(e) {
|
|
815
|
+
this.observer && this.observer.disconnect(), this.observer = new ResizeObserver(() => {
|
|
816
|
+
const n = e.getBoundingClientRect();
|
|
817
|
+
this.resize(n.width, n.height);
|
|
818
|
+
}), this.observer.observe(e);
|
|
819
|
+
}
|
|
820
|
+
fadeIn() {
|
|
821
|
+
if (this.disposed) throw new Error("Mask instance has been disposed.");
|
|
822
|
+
return new Promise((e, n) => {
|
|
823
|
+
const r = this.canvas.animate(
|
|
824
|
+
[
|
|
825
|
+
{ opacity: 0, transform: "scale(1.2)" },
|
|
826
|
+
{ opacity: 1, transform: "scale(1)" }
|
|
827
|
+
],
|
|
828
|
+
{ duration: 300, easing: "ease-out", fill: "forwards" }
|
|
829
|
+
);
|
|
830
|
+
r.onfinish = () => e(), r.oncancel = () => n("canceled");
|
|
831
|
+
});
|
|
832
|
+
}
|
|
833
|
+
fadeOut() {
|
|
834
|
+
if (this.disposed) throw new Error("Mask instance has been disposed.");
|
|
835
|
+
return new Promise((e, n) => {
|
|
836
|
+
const r = this.canvas.animate(
|
|
837
|
+
[
|
|
838
|
+
{ opacity: 1, transform: "scale(1)" },
|
|
839
|
+
{ opacity: 0, transform: "scale(1.2)" }
|
|
840
|
+
],
|
|
841
|
+
{ duration: 300, easing: "ease-in", fill: "forwards" }
|
|
842
|
+
);
|
|
843
|
+
r.onfinish = () => e(), r.oncancel = () => n("canceled");
|
|
844
|
+
});
|
|
845
|
+
}
|
|
846
|
+
checkGLError(e, n) {
|
|
847
|
+
let r = e.getError();
|
|
848
|
+
if (r !== e.NO_ERROR)
|
|
849
|
+
for (console.error(`WebGL Error in ${n}`); r !== e.NO_ERROR; ) {
|
|
850
|
+
const o = this.getGLErrorName(e, r);
|
|
851
|
+
console.error(`${o} (0x${r.toString(16)})`), r = e.getError();
|
|
852
|
+
}
|
|
853
|
+
}
|
|
854
|
+
getGLErrorName(e, n) {
|
|
855
|
+
switch (n) {
|
|
856
|
+
case e.INVALID_ENUM:
|
|
857
|
+
return "INVALID_ENUM";
|
|
858
|
+
case e.INVALID_VALUE:
|
|
859
|
+
return "INVALID_VALUE";
|
|
860
|
+
case e.INVALID_OPERATION:
|
|
861
|
+
return "INVALID_OPERATION";
|
|
862
|
+
case e.INVALID_FRAMEBUFFER_OPERATION:
|
|
863
|
+
return "INVALID_FRAMEBUFFER_OPERATION";
|
|
864
|
+
case e.OUT_OF_MEMORY:
|
|
865
|
+
return "OUT_OF_MEMORY";
|
|
866
|
+
case e.CONTEXT_LOST_WEBGL:
|
|
867
|
+
return "CONTEXT_LOST_WEBGL";
|
|
868
|
+
default:
|
|
869
|
+
return "UNKNOWN_ERROR";
|
|
870
|
+
}
|
|
871
|
+
}
|
|
872
|
+
setupGL() {
|
|
873
|
+
const e = this.canvas.getContext("webgl2", {
|
|
874
|
+
antialias: !1,
|
|
875
|
+
alpha: !0
|
|
876
|
+
});
|
|
877
|
+
if (!e)
|
|
878
|
+
throw new Error("WebGL2 is required but not available.");
|
|
879
|
+
const n = zt(e, Yt, Xt);
|
|
880
|
+
this.checkGLError(e, "setupGL: after createProgram");
|
|
881
|
+
const r = e.createVertexArray();
|
|
882
|
+
e.bindVertexArray(r), this.checkGLError(e, "setupGL: after VAO creation");
|
|
883
|
+
const o = this.canvas.width || 2, c = this.canvas.height || 2, { positions: m, uvs: E } = pe(
|
|
884
|
+
o,
|
|
885
|
+
c,
|
|
886
|
+
this.options.borderWidth,
|
|
887
|
+
this.options.glowWidth
|
|
888
|
+
), g = e.createBuffer();
|
|
889
|
+
e.bindBuffer(e.ARRAY_BUFFER, g), e.bufferData(e.ARRAY_BUFFER, m, e.STATIC_DRAW);
|
|
890
|
+
const R = e.getAttribLocation(n, "aPosition");
|
|
891
|
+
e.enableVertexAttribArray(R), e.vertexAttribPointer(R, 2, e.FLOAT, !1, 0, 0), this.checkGLError(e, "setupGL: after position buffer setup");
|
|
892
|
+
const p = e.createBuffer();
|
|
893
|
+
e.bindBuffer(e.ARRAY_BUFFER, p), e.bufferData(e.ARRAY_BUFFER, E, e.STATIC_DRAW);
|
|
894
|
+
const v = e.getAttribLocation(n, "aUV");
|
|
895
|
+
e.enableVertexAttribArray(v), e.vertexAttribPointer(v, 2, e.FLOAT, !1, 0, 0), this.checkGLError(e, "setupGL: after UV buffer setup");
|
|
896
|
+
const x = e.getUniformLocation(n, "uResolution"), l = e.getUniformLocation(n, "uTime"), T = e.getUniformLocation(n, "uBorderWidth"), F = e.getUniformLocation(n, "uGlowWidth"), d = e.getUniformLocation(n, "uBorderRadius"), S = e.getUniformLocation(n, "uColors"), I = e.getUniformLocation(n, "uGlowExponent"), U = e.getUniformLocation(n, "uGlowFactor");
|
|
897
|
+
e.useProgram(n), e.uniform1f(T, this.options.borderWidth), e.uniform1f(F, this.options.glowWidth), e.uniform1f(d, this.options.borderRadius), this.options.mode === "dark" ? (e.uniform1f(I, 2), e.uniform1f(U, 1.8)) : (e.uniform1f(I, 1), e.uniform1f(U, 1));
|
|
898
|
+
const y = (this.options.colors || $t).map(qt);
|
|
899
|
+
for (let w = 0; w < y.length; w++)
|
|
900
|
+
e.uniform3f(
|
|
901
|
+
e.getUniformLocation(n, `uColors[${w}]`),
|
|
902
|
+
...y[w]
|
|
903
|
+
);
|
|
904
|
+
this.checkGLError(e, "setupGL: after uniform setup"), e.bindVertexArray(null), e.bindBuffer(e.ARRAY_BUFFER, null), this.glr = {
|
|
905
|
+
gl: e,
|
|
906
|
+
program: n,
|
|
907
|
+
vao: r,
|
|
908
|
+
positionBuffer: g,
|
|
909
|
+
uvBuffer: p,
|
|
910
|
+
uResolution: x,
|
|
911
|
+
uTime: l,
|
|
912
|
+
uBorderWidth: T,
|
|
913
|
+
uGlowWidth: F,
|
|
914
|
+
uBorderRadius: d,
|
|
915
|
+
uColors: S
|
|
916
|
+
};
|
|
917
|
+
}
|
|
918
|
+
render(e) {
|
|
919
|
+
if (!this.glr) return;
|
|
920
|
+
const { gl: n, program: r, vao: o, uTime: c } = this.glr;
|
|
921
|
+
n.useProgram(r), n.bindVertexArray(o), n.uniform1f(c, e), n.disable(n.DEPTH_TEST), n.disable(n.CULL_FACE), n.disable(n.BLEND), n.clearColor(0, 0, 0, 0), n.clear(n.COLOR_BUFFER_BIT), n.drawArrays(n.TRIANGLES, 0, 24), this.checkGLError(n, "render: after draw call"), n.bindVertexArray(null);
|
|
922
|
+
}
|
|
923
|
+
}
|
|
924
|
+
const ve = ["lowp", "mediump", "highp"], Ht = `
|
|
925
|
+
void main(void){
|
|
926
|
+
vec4 color = vec4(0.0,0.0,0.0,1.0);
|
|
927
|
+
mainImage( color, gl_FragCoord.xy );
|
|
928
|
+
gl_FragColor = color;
|
|
929
|
+
}`, Kt = `void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
|
|
930
|
+
vec2 uv = fragCoord/iResolution.xy;
|
|
931
|
+
vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
|
|
932
|
+
fragColor = vec4(col,1.0);
|
|
933
|
+
}`, we = `attribute vec3 aVertexPosition;
|
|
934
|
+
void main(void) {
|
|
935
|
+
gl_Position = vec4(aVertexPosition, 1.0);
|
|
936
|
+
}`, Te = "iTime", ye = "iTimeDelta", Ee = "iDate", be = "iFrame", Ae = "iMouse", Re = "iResolution", jt = "iChannel", xe = "iChannelResolution", Se = "iDeviceOrientation";
|
|
937
|
+
function Qt(t, e) {
|
|
938
|
+
return t.includes("Matrix") && Array.isArray(e);
|
|
939
|
+
}
|
|
940
|
+
function Jt(t, e) {
|
|
941
|
+
return t.includes("v") && Array.isArray(e) && e.length > Number.parseInt(t.charAt(0));
|
|
942
|
+
}
|
|
943
|
+
function Zt(t, e) {
|
|
944
|
+
return !t.includes("v") && Array.isArray(e) && e.length > Number.parseInt(t.charAt(0));
|
|
945
|
+
}
|
|
946
|
+
const en = (t, e, n, r) => {
|
|
947
|
+
if (Zt(n, r))
|
|
948
|
+
switch (n) {
|
|
949
|
+
case "2f":
|
|
950
|
+
return t.uniform2f(e, r[0], r[1]);
|
|
951
|
+
case "3f":
|
|
952
|
+
return t.uniform3f(e, r[0], r[1], r[2]);
|
|
953
|
+
case "4f":
|
|
954
|
+
return t.uniform4f(e, r[0], r[1], r[2], r[3]);
|
|
955
|
+
case "2i":
|
|
956
|
+
return t.uniform2i(e, r[0], r[1]);
|
|
957
|
+
case "3i":
|
|
958
|
+
return t.uniform3i(e, r[0], r[1], r[2]);
|
|
959
|
+
case "4i":
|
|
960
|
+
return t.uniform4i(e, r[0], r[1], r[2], r[3]);
|
|
961
|
+
}
|
|
962
|
+
if (typeof r == "number")
|
|
963
|
+
return n === "1i" ? t.uniform1i(e, r) : t.uniform1f(e, r);
|
|
964
|
+
switch (n) {
|
|
965
|
+
case "1iv":
|
|
966
|
+
return t.uniform1iv(e, r);
|
|
967
|
+
case "2iv":
|
|
968
|
+
return t.uniform2iv(e, r);
|
|
969
|
+
case "3iv":
|
|
970
|
+
return t.uniform3iv(e, r);
|
|
971
|
+
case "4iv":
|
|
972
|
+
return t.uniform4iv(e, r);
|
|
973
|
+
case "1fv":
|
|
974
|
+
return t.uniform1fv(e, r);
|
|
975
|
+
case "2fv":
|
|
976
|
+
return t.uniform2fv(e, r);
|
|
977
|
+
case "3fv":
|
|
978
|
+
return t.uniform3fv(e, r);
|
|
979
|
+
case "4fv":
|
|
980
|
+
return t.uniform4fv(e, r);
|
|
981
|
+
case "Matrix2fv":
|
|
982
|
+
return t.uniformMatrix2fv(e, !1, r);
|
|
983
|
+
case "Matrix3fv":
|
|
984
|
+
return t.uniformMatrix3fv(e, !1, r);
|
|
985
|
+
case "Matrix4fv":
|
|
986
|
+
return t.uniformMatrix4fv(e, !1, r);
|
|
987
|
+
}
|
|
988
|
+
}, tn = (t) => {
|
|
989
|
+
switch (t) {
|
|
990
|
+
case "1f":
|
|
991
|
+
return "float";
|
|
992
|
+
case "2f":
|
|
993
|
+
return "vec2";
|
|
994
|
+
case "3f":
|
|
995
|
+
return "vec3";
|
|
996
|
+
case "4f":
|
|
997
|
+
return "vec4";
|
|
998
|
+
case "1i":
|
|
999
|
+
return "int";
|
|
1000
|
+
case "2i":
|
|
1001
|
+
return "ivec2";
|
|
1002
|
+
case "3i":
|
|
1003
|
+
return "ivec3";
|
|
1004
|
+
case "4i":
|
|
1005
|
+
return "ivec4";
|
|
1006
|
+
case "1iv":
|
|
1007
|
+
return "int";
|
|
1008
|
+
case "2iv":
|
|
1009
|
+
return "ivec2";
|
|
1010
|
+
case "3iv":
|
|
1011
|
+
return "ivec3";
|
|
1012
|
+
case "4iv":
|
|
1013
|
+
return "ivec4";
|
|
1014
|
+
case "1fv":
|
|
1015
|
+
return "float";
|
|
1016
|
+
case "2fv":
|
|
1017
|
+
return "vec2";
|
|
1018
|
+
case "3fv":
|
|
1019
|
+
return "vec3";
|
|
1020
|
+
case "4fv":
|
|
1021
|
+
return "vec4";
|
|
1022
|
+
case "Matrix2fv":
|
|
1023
|
+
return "mat2";
|
|
1024
|
+
case "Matrix3fv":
|
|
1025
|
+
return "mat3";
|
|
1026
|
+
case "Matrix4fv":
|
|
1027
|
+
return "mat4";
|
|
1028
|
+
default:
|
|
1029
|
+
console.error(
|
|
1030
|
+
Y(
|
|
1031
|
+
`The uniform type "${t}" is not valid, please make sure your uniform type is valid`
|
|
1032
|
+
)
|
|
1033
|
+
);
|
|
1034
|
+
}
|
|
1035
|
+
}, ce = 9729, Le = 9728, nn = 9987, Ie = 33071, _e = 10497;
|
|
1036
|
+
class rn {
|
|
1037
|
+
gl;
|
|
1038
|
+
url;
|
|
1039
|
+
wrapS;
|
|
1040
|
+
wrapT;
|
|
1041
|
+
minFilter;
|
|
1042
|
+
magFilter;
|
|
1043
|
+
source;
|
|
1044
|
+
pow2canvas;
|
|
1045
|
+
isLoaded = !1;
|
|
1046
|
+
isVideo = !1;
|
|
1047
|
+
flipY = -1;
|
|
1048
|
+
width = 0;
|
|
1049
|
+
height = 0;
|
|
1050
|
+
_webglTexture = null;
|
|
1051
|
+
constructor(e) {
|
|
1052
|
+
this.gl = e;
|
|
1053
|
+
}
|
|
1054
|
+
updateTexture = (e, n, r) => {
|
|
1055
|
+
const { gl: o } = this, c = 0, m = o.RGBA, E = o.RGBA, g = o.UNSIGNED_BYTE;
|
|
1056
|
+
o.bindTexture(o.TEXTURE_2D, e), o.pixelStorei(o.UNPACK_FLIP_Y_WEBGL, r), o.texImage2D(
|
|
1057
|
+
o.TEXTURE_2D,
|
|
1058
|
+
c,
|
|
1059
|
+
m,
|
|
1060
|
+
E,
|
|
1061
|
+
g,
|
|
1062
|
+
n
|
|
1063
|
+
);
|
|
1064
|
+
};
|
|
1065
|
+
setupVideo = (e) => {
|
|
1066
|
+
const n = document.createElement("video");
|
|
1067
|
+
let r = !1, o = !1;
|
|
1068
|
+
n.autoplay = !0, n.muted = !0, n.loop = !0, n.crossOrigin = "anonymous";
|
|
1069
|
+
const c = () => {
|
|
1070
|
+
r && o && (this.isLoaded = !0);
|
|
1071
|
+
};
|
|
1072
|
+
return n.addEventListener(
|
|
1073
|
+
"playing",
|
|
1074
|
+
() => {
|
|
1075
|
+
r = !0, this.width = n.videoWidth || 0, this.height = n.videoHeight || 0, c();
|
|
1076
|
+
},
|
|
1077
|
+
!0
|
|
1078
|
+
), n.addEventListener(
|
|
1079
|
+
"timeupdate",
|
|
1080
|
+
() => {
|
|
1081
|
+
o = !0, c();
|
|
1082
|
+
},
|
|
1083
|
+
!0
|
|
1084
|
+
), n.src = e, n;
|
|
1085
|
+
};
|
|
1086
|
+
makePowerOf2 = (e) => e instanceof HTMLImageElement || e instanceof HTMLCanvasElement || e instanceof ImageBitmap ? (this.pow2canvas === void 0 && (this.pow2canvas = document.createElement("canvas")), this.pow2canvas.width = 2 ** Math.floor(Math.log(e.width) / Math.LN2), this.pow2canvas.height = 2 ** Math.floor(Math.log(e.height) / Math.LN2), this.pow2canvas.getContext("2d")?.drawImage(
|
|
1087
|
+
e,
|
|
1088
|
+
0,
|
|
1089
|
+
0,
|
|
1090
|
+
this.pow2canvas.width,
|
|
1091
|
+
this.pow2canvas.height
|
|
1092
|
+
), console.warn(
|
|
1093
|
+
Y(
|
|
1094
|
+
`Image is not power of two ${e.width} x ${e.height}. Resized to ${this.pow2canvas.width} x ${this.pow2canvas.height};`
|
|
1095
|
+
)
|
|
1096
|
+
), this.pow2canvas) : e;
|
|
1097
|
+
load = async (e) => {
|
|
1098
|
+
const { gl: n } = this, {
|
|
1099
|
+
url: r,
|
|
1100
|
+
wrapS: o,
|
|
1101
|
+
wrapT: c,
|
|
1102
|
+
minFilter: m,
|
|
1103
|
+
magFilter: E,
|
|
1104
|
+
flipY: g = -1
|
|
1105
|
+
} = e;
|
|
1106
|
+
if (!r)
|
|
1107
|
+
return Promise.reject(
|
|
1108
|
+
new Error(
|
|
1109
|
+
Y(
|
|
1110
|
+
"Missing url, please make sure to pass the url of your texture { url: ... }"
|
|
1111
|
+
)
|
|
1112
|
+
)
|
|
1113
|
+
);
|
|
1114
|
+
const R = /(\.jpg|\.jpeg|\.png|\.gif|\.bmp)$/i.exec(r), p = /(\.mp4|\.3gp|\.webm|\.ogv)$/i.exec(r);
|
|
1115
|
+
if (R === null && p === null)
|
|
1116
|
+
return Promise.reject(
|
|
1117
|
+
new Error(
|
|
1118
|
+
Y(
|
|
1119
|
+
`Please upload a video or an image with a valid format (url: ${r})`
|
|
1120
|
+
)
|
|
1121
|
+
)
|
|
1122
|
+
);
|
|
1123
|
+
Object.assign(this, { url: r, wrapS: o, wrapT: c, minFilter: m, magFilter: E, flipY: g });
|
|
1124
|
+
const v = 0, x = n.RGBA, l = 1, T = 1, F = 0, d = n.RGBA, S = n.UNSIGNED_BYTE, I = new Uint8Array([255, 255, 255, 0]), U = n.createTexture();
|
|
1125
|
+
if (n.bindTexture(n.TEXTURE_2D, U), n.texImage2D(
|
|
1126
|
+
n.TEXTURE_2D,
|
|
1127
|
+
v,
|
|
1128
|
+
x,
|
|
1129
|
+
l,
|
|
1130
|
+
T,
|
|
1131
|
+
F,
|
|
1132
|
+
d,
|
|
1133
|
+
S,
|
|
1134
|
+
I
|
|
1135
|
+
), p) {
|
|
1136
|
+
const P = this.setupVideo(r);
|
|
1137
|
+
return n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_S, n.CLAMP_TO_EDGE), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_T, n.CLAMP_TO_EDGE), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MIN_FILTER, n.LINEAR), this._webglTexture = U, this.source = P, this.isVideo = !0, P.play().then(() => this);
|
|
1138
|
+
}
|
|
1139
|
+
async function y() {
|
|
1140
|
+
return new Promise((P, V) => {
|
|
1141
|
+
const A = new Image();
|
|
1142
|
+
A.crossOrigin = "anonymous", A.onload = () => {
|
|
1143
|
+
P(A);
|
|
1144
|
+
}, A.onerror = () => {
|
|
1145
|
+
V(new Error(Y(`failed loading url: ${r}`)));
|
|
1146
|
+
}, A.src = r ?? "";
|
|
1147
|
+
});
|
|
1148
|
+
}
|
|
1149
|
+
let w = await y(), _ = (w.width & w.width - 1) === 0 && (w.height & w.height - 1) === 0;
|
|
1150
|
+
return (e.wrapS !== Ie || e.wrapT !== Ie || e.minFilter !== Le && e.minFilter !== ce) && !_ && (w = this.makePowerOf2(w), _ = !0), n.bindTexture(n.TEXTURE_2D, U), n.pixelStorei(n.UNPACK_FLIP_Y_WEBGL, g), n.texImage2D(
|
|
1151
|
+
n.TEXTURE_2D,
|
|
1152
|
+
v,
|
|
1153
|
+
x,
|
|
1154
|
+
d,
|
|
1155
|
+
S,
|
|
1156
|
+
w
|
|
1157
|
+
), _ && e.minFilter !== Le && e.minFilter !== ce && n.generateMipmap(n.TEXTURE_2D), n.texParameteri(
|
|
1158
|
+
n.TEXTURE_2D,
|
|
1159
|
+
n.TEXTURE_WRAP_S,
|
|
1160
|
+
this.wrapS || _e
|
|
1161
|
+
), n.texParameteri(
|
|
1162
|
+
n.TEXTURE_2D,
|
|
1163
|
+
n.TEXTURE_WRAP_T,
|
|
1164
|
+
this.wrapT || _e
|
|
1165
|
+
), n.texParameteri(
|
|
1166
|
+
n.TEXTURE_2D,
|
|
1167
|
+
n.TEXTURE_MIN_FILTER,
|
|
1168
|
+
this.minFilter || nn
|
|
1169
|
+
), n.texParameteri(
|
|
1170
|
+
n.TEXTURE_2D,
|
|
1171
|
+
n.TEXTURE_MAG_FILTER,
|
|
1172
|
+
this.magFilter || ce
|
|
1173
|
+
), this._webglTexture = U, this.source = w, this.isVideo = !1, this.isLoaded = !0, this.width = w.width || 0, this.height = w.height || 0, this;
|
|
1174
|
+
};
|
|
1175
|
+
}
|
|
1176
|
+
const Y = (t) => `react-shaders: ${t}`, Ce = (t) => {
|
|
1177
|
+
if ("changedTouches" in t) {
|
|
1178
|
+
const e = t.changedTouches[0];
|
|
1179
|
+
return [e?.clientX ?? 0, e?.clientY ?? 0];
|
|
1180
|
+
}
|
|
1181
|
+
return [t.clientX, t.clientY];
|
|
1182
|
+
}, Fe = (t, e, n) => t * (1 - n) + e * n, on = (t, e, n) => n > 0 ? t.substring(0, n) + e + t.substring(n, t.length) : e + t;
|
|
1183
|
+
function sn({
|
|
1184
|
+
fs: t,
|
|
1185
|
+
vs: e = we,
|
|
1186
|
+
textures: n = [],
|
|
1187
|
+
uniforms: r,
|
|
1188
|
+
clearColor: o = [0, 0, 0, 1],
|
|
1189
|
+
precision: c = "highp",
|
|
1190
|
+
style: m,
|
|
1191
|
+
contextAttributes: E = {},
|
|
1192
|
+
lerp: g = 1,
|
|
1193
|
+
devicePixelRatio: R = 1,
|
|
1194
|
+
onDoneLoadingTextures: p,
|
|
1195
|
+
onError: v = console.error,
|
|
1196
|
+
onWarning: x = console.warn
|
|
1197
|
+
}) {
|
|
1198
|
+
const l = B(null), T = B(null), F = B(null), d = B(null), S = B(void 0), I = B(void 0), U = B(!1), y = B(void 0), w = B(0), _ = B([0, 0]), P = B([]), V = B(0), A = B(void 0), f = B({
|
|
1199
|
+
[Te]: { type: "float", isNeeded: !1, value: 0 },
|
|
1200
|
+
[ye]: { type: "float", isNeeded: !1, value: 0 },
|
|
1201
|
+
[Ee]: { type: "vec4", isNeeded: !1, value: [0, 0, 0, 0] },
|
|
1202
|
+
[Ae]: { type: "vec4", isNeeded: !1, value: [0, 0, 0, 0] },
|
|
1203
|
+
[Re]: { type: "vec2", isNeeded: !1, value: [0, 0] },
|
|
1204
|
+
[be]: { type: "int", isNeeded: !1, value: 0 },
|
|
1205
|
+
[Se]: {
|
|
1206
|
+
type: "vec4",
|
|
1207
|
+
isNeeded: !1,
|
|
1208
|
+
value: [0, 0, 0, 0]
|
|
1209
|
+
}
|
|
1210
|
+
}), C = B(r), O = (i, a) => {
|
|
1211
|
+
const s = "width" in i ? i.width ?? 0 : 0, h = "height" in i ? i.height ?? 0 : 0, u = f.current.iChannelResolution;
|
|
1212
|
+
if (!u) return;
|
|
1213
|
+
const b = Array.isArray(u.value) ? u.value : u.value = [];
|
|
1214
|
+
b[a * 3] = s * R, b[a * 3 + 1] = h * R, b[a * 3 + 2] = 0;
|
|
1215
|
+
}, W = () => {
|
|
1216
|
+
l.current && (T.current = l.current.getContext("webgl", E) || l.current.getContext(
|
|
1217
|
+
"experimental-webgl",
|
|
1218
|
+
E
|
|
1219
|
+
), T.current?.getExtension("OES_standard_derivatives"), T.current?.getExtension("EXT_shader_texture_lod"));
|
|
1220
|
+
}, k = () => {
|
|
1221
|
+
const i = T.current;
|
|
1222
|
+
F.current = i?.createBuffer() ?? null, i?.bindBuffer(i.ARRAY_BUFFER, F.current);
|
|
1223
|
+
const a = [
|
|
1224
|
+
1,
|
|
1225
|
+
1,
|
|
1226
|
+
0,
|
|
1227
|
+
-1,
|
|
1228
|
+
1,
|
|
1229
|
+
0,
|
|
1230
|
+
1,
|
|
1231
|
+
-1,
|
|
1232
|
+
0,
|
|
1233
|
+
-1,
|
|
1234
|
+
-1,
|
|
1235
|
+
0
|
|
1236
|
+
];
|
|
1237
|
+
i?.bufferData(i.ARRAY_BUFFER, new Float32Array(a), i.STATIC_DRAW);
|
|
1238
|
+
}, H = ({
|
|
1239
|
+
alpha: i,
|
|
1240
|
+
beta: a,
|
|
1241
|
+
gamma: s
|
|
1242
|
+
}) => {
|
|
1243
|
+
f.current.iDeviceOrientation.value = [
|
|
1244
|
+
i ?? 0,
|
|
1245
|
+
a ?? 0,
|
|
1246
|
+
s ?? 0,
|
|
1247
|
+
window.orientation ?? 0
|
|
1248
|
+
];
|
|
1249
|
+
}, z = (i) => {
|
|
1250
|
+
const [a = 0, s = 0] = Ce(i), h = a - (y.current?.left ?? 0) - window.pageXOffset, u = (y.current?.height ?? 0) - s - (y.current?.top ?? 0) - window.pageYOffset;
|
|
1251
|
+
U.current = !0;
|
|
1252
|
+
const b = Array.isArray(f.current.iMouse?.value) ? f.current.iMouse.value : void 0;
|
|
1253
|
+
b && (b[2] = h, b[3] = u), _.current[0] = h, _.current[1] = u;
|
|
1254
|
+
}, M = (i) => {
|
|
1255
|
+
y.current = l.current?.getBoundingClientRect();
|
|
1256
|
+
const [a = 0, s = 0] = Ce(i), h = a - (y.current?.left ?? 0), u = (y.current?.height ?? 0) - s - (y.current?.top ?? 0);
|
|
1257
|
+
if (g !== 1)
|
|
1258
|
+
_.current[0] = h, _.current[1] = u;
|
|
1259
|
+
else {
|
|
1260
|
+
const b = Array.isArray(f.current.iMouse?.value) ? f.current.iMouse.value : void 0;
|
|
1261
|
+
b && (b[0] = h, b[1] = u);
|
|
1262
|
+
}
|
|
1263
|
+
}, L = () => {
|
|
1264
|
+
const i = Array.isArray(f.current.iMouse?.value) ? f.current.iMouse.value : void 0;
|
|
1265
|
+
i && (i[2] = 0, i[3] = 0);
|
|
1266
|
+
}, N = () => {
|
|
1267
|
+
const i = T.current;
|
|
1268
|
+
if (!i) return;
|
|
1269
|
+
y.current = l.current?.getBoundingClientRect();
|
|
1270
|
+
const a = R, s = Math.floor(
|
|
1271
|
+
(y.current?.width ?? 1) * a
|
|
1272
|
+
), h = Math.floor(
|
|
1273
|
+
(y.current?.height ?? 1) * a
|
|
1274
|
+
);
|
|
1275
|
+
if (i.canvas.width = s, i.canvas.height = h, f.current.iResolution?.isNeeded && d.current) {
|
|
1276
|
+
const u = i.getUniformLocation(
|
|
1277
|
+
d.current,
|
|
1278
|
+
Re
|
|
1279
|
+
);
|
|
1280
|
+
i.uniform2fv(u, [i.canvas.width, i.canvas.height]);
|
|
1281
|
+
}
|
|
1282
|
+
}, K = (i, a) => {
|
|
1283
|
+
const s = T.current;
|
|
1284
|
+
if (!s) return null;
|
|
1285
|
+
const h = s.createShader(i);
|
|
1286
|
+
if (!h) return null;
|
|
1287
|
+
if (s.shaderSource(h, a), s.compileShader(h), !s.getShaderParameter(h, s.COMPILE_STATUS)) {
|
|
1288
|
+
x?.(Y(`Error compiling the shader:
|
|
1289
|
+
${a}`));
|
|
1290
|
+
const u = s.getShaderInfoLog(h);
|
|
1291
|
+
s.deleteShader(h), v?.(Y(`Shader compiler log: ${u}`));
|
|
1292
|
+
}
|
|
1293
|
+
return h;
|
|
1294
|
+
}, Z = (i, a) => {
|
|
1295
|
+
const s = T.current;
|
|
1296
|
+
if (!s) return;
|
|
1297
|
+
const h = K(s.FRAGMENT_SHADER, i), u = K(s.VERTEX_SHADER, a);
|
|
1298
|
+
if (d.current = s.createProgram(), !(!d.current || !u || !h)) {
|
|
1299
|
+
if (s.attachShader(d.current, u), s.attachShader(d.current, h), s.linkProgram(d.current), !s.getProgramParameter(d.current, s.LINK_STATUS)) {
|
|
1300
|
+
v?.(
|
|
1301
|
+
Y(
|
|
1302
|
+
`Unable to initialize the shader program: ${s.getProgramInfoLog(
|
|
1303
|
+
d.current
|
|
1304
|
+
)}`
|
|
1305
|
+
)
|
|
1306
|
+
);
|
|
1307
|
+
return;
|
|
1308
|
+
}
|
|
1309
|
+
s.useProgram(d.current), S.current = s.getAttribLocation(
|
|
1310
|
+
d.current,
|
|
1311
|
+
"aVertexPosition"
|
|
1312
|
+
), s.enableVertexAttribArray(S.current);
|
|
1313
|
+
}
|
|
1314
|
+
}, $ = () => {
|
|
1315
|
+
if (r)
|
|
1316
|
+
for (const i of Object.keys(r)) {
|
|
1317
|
+
const a = r[i];
|
|
1318
|
+
if (!a) continue;
|
|
1319
|
+
const { value: s, type: h } = a, u = tn(h);
|
|
1320
|
+
if (!u) continue;
|
|
1321
|
+
const b = {};
|
|
1322
|
+
if (Qt(h, s)) {
|
|
1323
|
+
const D = h.length, X = Number.parseInt(h.charAt(D - 3)), te = Math.floor(s.length / (X * X));
|
|
1324
|
+
s.length > X * X && (b.arraySize = `[${te}]`);
|
|
1325
|
+
} else Jt(h, s) && (b.arraySize = `[${Math.floor(s.length / Number.parseInt(h.charAt(0)))}]`);
|
|
1326
|
+
f.current[i] = {
|
|
1327
|
+
type: u,
|
|
1328
|
+
isNeeded: !1,
|
|
1329
|
+
value: s,
|
|
1330
|
+
...b
|
|
1331
|
+
};
|
|
1332
|
+
}
|
|
1333
|
+
}, ne = () => {
|
|
1334
|
+
const i = T.current;
|
|
1335
|
+
if (i)
|
|
1336
|
+
if (n && n.length > 0) {
|
|
1337
|
+
f.current[`${xe}`] = {
|
|
1338
|
+
type: "vec3",
|
|
1339
|
+
isNeeded: !1,
|
|
1340
|
+
arraySize: `[${n.length}]`,
|
|
1341
|
+
value: []
|
|
1342
|
+
};
|
|
1343
|
+
const a = n.map(
|
|
1344
|
+
(s, h) => (f.current[`${jt}${h}`] = {
|
|
1345
|
+
type: "sampler2D",
|
|
1346
|
+
isNeeded: !1
|
|
1347
|
+
}, O(s, h), P.current[h] = new rn(i), P.current[h]?.load(s).then((u) => {
|
|
1348
|
+
O(u, h);
|
|
1349
|
+
}))
|
|
1350
|
+
);
|
|
1351
|
+
Promise.all(a).then(() => {
|
|
1352
|
+
p && p();
|
|
1353
|
+
}).catch((s) => {
|
|
1354
|
+
v?.(s), p && p();
|
|
1355
|
+
});
|
|
1356
|
+
} else p && p();
|
|
1357
|
+
}, re = (i) => {
|
|
1358
|
+
const a = ve.includes(c ?? "highp"), s = `precision ${a ? c : ve[1]} float;
|
|
1359
|
+
`;
|
|
1360
|
+
a || x?.(
|
|
1361
|
+
Y(
|
|
1362
|
+
`wrong precision type ${c}, please make sure to pass one of a valid precision lowp, mediump, highp, by default you shader precision will be set to highp.`
|
|
1363
|
+
)
|
|
1364
|
+
);
|
|
1365
|
+
let h = s.concat(`#define DPR ${R.toFixed(1)}
|
|
1366
|
+
`).concat(i.replace(/texture\(/g, "texture2D("));
|
|
1367
|
+
for (const b of Object.keys(f.current))
|
|
1368
|
+
if (i.includes(b)) {
|
|
1369
|
+
const D = f.current[b];
|
|
1370
|
+
if (!D) continue;
|
|
1371
|
+
h = on(
|
|
1372
|
+
h,
|
|
1373
|
+
`uniform ${D.type} ${b}${D.arraySize || ""};
|
|
1374
|
+
`,
|
|
1375
|
+
h.lastIndexOf(s) + s.length
|
|
1376
|
+
), D.isNeeded = !0;
|
|
1377
|
+
}
|
|
1378
|
+
return i.includes("mainImage") && (h = h.concat(Ht)), h;
|
|
1379
|
+
}, j = (i) => {
|
|
1380
|
+
const a = T.current;
|
|
1381
|
+
if (!a || !d.current) return;
|
|
1382
|
+
const s = V.current ? (i - V.current) / 1e3 : 0;
|
|
1383
|
+
V.current = i;
|
|
1384
|
+
const h = C.current;
|
|
1385
|
+
if (h)
|
|
1386
|
+
for (const u of Object.keys(h)) {
|
|
1387
|
+
const b = h[u];
|
|
1388
|
+
if (b && f.current[u]?.isNeeded) {
|
|
1389
|
+
if (!d.current) return;
|
|
1390
|
+
const D = a.getUniformLocation(
|
|
1391
|
+
d.current,
|
|
1392
|
+
u
|
|
1393
|
+
);
|
|
1394
|
+
if (!D) return;
|
|
1395
|
+
en(
|
|
1396
|
+
a,
|
|
1397
|
+
D,
|
|
1398
|
+
b.type,
|
|
1399
|
+
b.value
|
|
1400
|
+
);
|
|
1401
|
+
}
|
|
1402
|
+
}
|
|
1403
|
+
if (f.current.iMouse?.isNeeded) {
|
|
1404
|
+
const u = a.getUniformLocation(
|
|
1405
|
+
d.current,
|
|
1406
|
+
Ae
|
|
1407
|
+
);
|
|
1408
|
+
a.uniform4fv(u, f.current.iMouse.value);
|
|
1409
|
+
}
|
|
1410
|
+
if (f.current.iChannelResolution?.isNeeded) {
|
|
1411
|
+
const u = a.getUniformLocation(
|
|
1412
|
+
d.current,
|
|
1413
|
+
xe
|
|
1414
|
+
);
|
|
1415
|
+
a.uniform3fv(
|
|
1416
|
+
u,
|
|
1417
|
+
f.current.iChannelResolution.value
|
|
1418
|
+
);
|
|
1419
|
+
}
|
|
1420
|
+
if (f.current.iDeviceOrientation?.isNeeded) {
|
|
1421
|
+
const u = a.getUniformLocation(
|
|
1422
|
+
d.current,
|
|
1423
|
+
Se
|
|
1424
|
+
);
|
|
1425
|
+
a.uniform4fv(
|
|
1426
|
+
u,
|
|
1427
|
+
f.current.iDeviceOrientation.value
|
|
1428
|
+
);
|
|
1429
|
+
}
|
|
1430
|
+
if (f.current.iTime?.isNeeded) {
|
|
1431
|
+
const u = a.getUniformLocation(
|
|
1432
|
+
d.current,
|
|
1433
|
+
Te
|
|
1434
|
+
);
|
|
1435
|
+
a.uniform1f(u, w.current += s);
|
|
1436
|
+
}
|
|
1437
|
+
if (f.current.iTimeDelta?.isNeeded) {
|
|
1438
|
+
const u = a.getUniformLocation(
|
|
1439
|
+
d.current,
|
|
1440
|
+
ye
|
|
1441
|
+
);
|
|
1442
|
+
a.uniform1f(u, s);
|
|
1443
|
+
}
|
|
1444
|
+
if (f.current.iDate?.isNeeded) {
|
|
1445
|
+
const u = /* @__PURE__ */ new Date(), b = u.getMonth() + 1, D = u.getDate(), X = u.getFullYear(), te = u.getHours() * 60 * 60 + u.getMinutes() * 60 + u.getSeconds() + u.getMilliseconds() * 1e-3, ae = a.getUniformLocation(
|
|
1446
|
+
d.current,
|
|
1447
|
+
Ee
|
|
1448
|
+
);
|
|
1449
|
+
a.uniform4fv(ae, [X, b, D, te]);
|
|
1450
|
+
}
|
|
1451
|
+
if (f.current.iFrame?.isNeeded) {
|
|
1452
|
+
const u = a.getUniformLocation(
|
|
1453
|
+
d.current,
|
|
1454
|
+
be
|
|
1455
|
+
), b = f.current.iFrame.value;
|
|
1456
|
+
a.uniform1i(u, b), f.current.iFrame.value = b + 1;
|
|
1457
|
+
}
|
|
1458
|
+
if (P.current.length > 0)
|
|
1459
|
+
for (let u = 0; u < P.current.length; u++) {
|
|
1460
|
+
const b = P.current[u];
|
|
1461
|
+
if (!b) return;
|
|
1462
|
+
const { isVideo: D, _webglTexture: X, source: te, flipY: ae, isLoaded: ke } = b;
|
|
1463
|
+
if (!ke || !X || !te) return;
|
|
1464
|
+
if (f.current[`iChannel${u}`]?.isNeeded) {
|
|
1465
|
+
if (!d.current) return;
|
|
1466
|
+
const We = a.getUniformLocation(
|
|
1467
|
+
d.current,
|
|
1468
|
+
`iChannel${u}`
|
|
1469
|
+
);
|
|
1470
|
+
a.activeTexture(a.TEXTURE0 + u), a.bindTexture(a.TEXTURE_2D, X), a.uniform1i(We, u), D && b.updateTexture(
|
|
1471
|
+
X,
|
|
1472
|
+
te,
|
|
1473
|
+
ae
|
|
1474
|
+
);
|
|
1475
|
+
}
|
|
1476
|
+
}
|
|
1477
|
+
}, Q = (i) => {
|
|
1478
|
+
const a = T.current;
|
|
1479
|
+
if (!a) return;
|
|
1480
|
+
a.viewport(0, 0, a.drawingBufferWidth, a.drawingBufferHeight), a.clear(a.COLOR_BUFFER_BIT | a.DEPTH_BUFFER_BIT), a.bindBuffer(a.ARRAY_BUFFER, F.current), a.vertexAttribPointer(
|
|
1481
|
+
S.current ?? 0,
|
|
1482
|
+
3,
|
|
1483
|
+
a.FLOAT,
|
|
1484
|
+
!1,
|
|
1485
|
+
0,
|
|
1486
|
+
0
|
|
1487
|
+
), j(i), a.drawArrays(a.TRIANGLE_STRIP, 0, 4);
|
|
1488
|
+
const s = f.current.iMouse?.value;
|
|
1489
|
+
if (f.current.iMouse?.isNeeded && g !== 1 && Array.isArray(s)) {
|
|
1490
|
+
const h = s[0] ?? 0, u = s[1] ?? 0;
|
|
1491
|
+
s[0] = Fe(h, _.current[0] ?? 0, g), s[1] = Fe(u, _.current[1] ?? 0, g);
|
|
1492
|
+
}
|
|
1493
|
+
I.current = requestAnimationFrame(Q);
|
|
1494
|
+
}, ee = () => {
|
|
1495
|
+
const i = { passive: !0 };
|
|
1496
|
+
f.current.iMouse?.isNeeded && l.current && (l.current.addEventListener("mousemove", M, i), l.current.addEventListener("mouseout", L, i), l.current.addEventListener("mouseup", L, i), l.current.addEventListener("mousedown", z, i), l.current.addEventListener("touchmove", M, i), l.current.addEventListener("touchend", L, i), l.current.addEventListener("touchstart", z, i)), f.current.iDeviceOrientation?.isNeeded && window.addEventListener(
|
|
1497
|
+
"deviceorientation",
|
|
1498
|
+
H,
|
|
1499
|
+
i
|
|
1500
|
+
), l.current && (A.current = new ResizeObserver(N), A.current.observe(l.current), window.addEventListener("resize", N, i));
|
|
1501
|
+
}, J = () => {
|
|
1502
|
+
const i = { passive: !0 };
|
|
1503
|
+
f.current.iMouse?.isNeeded && l.current && (l.current.removeEventListener("mousemove", M, i), l.current.removeEventListener("mouseout", L, i), l.current.removeEventListener("mouseup", L, i), l.current.removeEventListener("mousedown", z, i), l.current.removeEventListener("touchmove", M, i), l.current.removeEventListener("touchend", L, i), l.current.removeEventListener("touchstart", z, i)), f.current.iDeviceOrientation?.isNeeded && window.removeEventListener(
|
|
1504
|
+
"deviceorientation",
|
|
1505
|
+
H,
|
|
1506
|
+
i
|
|
1507
|
+
), A.current && (A.current.disconnect(), window.removeEventListener("resize", N, i));
|
|
1508
|
+
};
|
|
1509
|
+
return ie(() => {
|
|
1510
|
+
C.current = r;
|
|
1511
|
+
}, [r]), ie(() => {
|
|
1512
|
+
const i = P.current;
|
|
1513
|
+
function a() {
|
|
1514
|
+
W();
|
|
1515
|
+
const s = T.current;
|
|
1516
|
+
s && l.current && (s.clearColor(...o), s.clearDepth(1), s.enable(s.DEPTH_TEST), s.depthFunc(s.LEQUAL), s.viewport(0, 0, l.current.width, l.current.height), l.current.height = l.current.clientHeight, l.current.width = l.current.clientWidth, $(), ne(), Z(re(t || Kt), e || we), k(), requestAnimationFrame(Q), ee(), N());
|
|
1517
|
+
}
|
|
1518
|
+
return requestAnimationFrame(a), () => {
|
|
1519
|
+
const s = T.current;
|
|
1520
|
+
if (s) {
|
|
1521
|
+
if (s.getExtension("WEBGL_lose_context")?.loseContext(), s.useProgram(null), s.deleteProgram(d.current ?? null), i.length > 0)
|
|
1522
|
+
for (const h of i)
|
|
1523
|
+
s.deleteTexture(h._webglTexture);
|
|
1524
|
+
d.current = null;
|
|
1525
|
+
}
|
|
1526
|
+
J(), cancelAnimationFrame(I.current ?? 0);
|
|
1527
|
+
};
|
|
1528
|
+
}, []), /* @__PURE__ */ q(
|
|
1529
|
+
"canvas",
|
|
1530
|
+
{
|
|
1531
|
+
ref: l,
|
|
1532
|
+
style: { height: "100%", width: "100%", ...m }
|
|
1533
|
+
}
|
|
1534
|
+
);
|
|
1535
|
+
}
|
|
1536
|
+
const an = `
|
|
1537
|
+
const float TAU = 6.283185;
|
|
1538
|
+
|
|
1539
|
+
// Noise for dithering
|
|
1540
|
+
vec2 randFibo(vec2 p) {
|
|
1541
|
+
p = fract(p * vec2(443.897, 441.423));
|
|
1542
|
+
p += dot(p, p.yx + 19.19);
|
|
1543
|
+
return fract((p.xx + p.yx) * p.xy);
|
|
1544
|
+
}
|
|
1545
|
+
|
|
1546
|
+
// Tonemap
|
|
1547
|
+
vec3 Tonemap(vec3 x) {
|
|
1548
|
+
x *= 4.0;
|
|
1549
|
+
return x / (1.0 + x);
|
|
1550
|
+
}
|
|
1551
|
+
|
|
1552
|
+
// Luma for alpha
|
|
1553
|
+
float luma(vec3 color) {
|
|
1554
|
+
return dot(color, vec3(0.299, 0.587, 0.114));
|
|
1555
|
+
}
|
|
1556
|
+
|
|
1557
|
+
// RGB to HSV
|
|
1558
|
+
vec3 rgb2hsv(vec3 c) {
|
|
1559
|
+
vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
|
|
1560
|
+
vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
|
|
1561
|
+
vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
|
|
1562
|
+
float d = q.x - min(q.w, q.y);
|
|
1563
|
+
float e = 1.0e-10;
|
|
1564
|
+
return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
|
|
1565
|
+
}
|
|
1566
|
+
|
|
1567
|
+
// HSV to RGB
|
|
1568
|
+
vec3 hsv2rgb(vec3 c) {
|
|
1569
|
+
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
|
|
1570
|
+
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
|
|
1571
|
+
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
|
|
1572
|
+
}
|
|
1573
|
+
|
|
1574
|
+
// SDF shapes
|
|
1575
|
+
float sdCircle(vec2 st, float r) {
|
|
1576
|
+
return length(st) - r;
|
|
1577
|
+
}
|
|
1578
|
+
|
|
1579
|
+
float sdLine(vec2 p, float r) {
|
|
1580
|
+
float halfLen = r * 2.0;
|
|
1581
|
+
vec2 a = vec2(-halfLen, 0.0);
|
|
1582
|
+
vec2 b = vec2(halfLen, 0.0);
|
|
1583
|
+
vec2 pa = p - a;
|
|
1584
|
+
vec2 ba = b - a;
|
|
1585
|
+
float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
|
|
1586
|
+
return length(pa - ba * h);
|
|
1587
|
+
}
|
|
1588
|
+
|
|
1589
|
+
float getSdf(vec2 st) {
|
|
1590
|
+
if(uShape == 1.0) return sdCircle(st, uScale);
|
|
1591
|
+
else if(uShape == 2.0) return sdLine(st, uScale);
|
|
1592
|
+
return sdCircle(st, uScale); // Default
|
|
1593
|
+
}
|
|
1594
|
+
|
|
1595
|
+
vec2 turb(vec2 pos, float t, float it) {
|
|
1596
|
+
// Initial rotation matrix for swirl direction
|
|
1597
|
+
mat2 rotation = mat2(0.6, -0.25, 0.25, 0.9);
|
|
1598
|
+
// Secondary rotation applied each iteration (approx 53 degree rotation)
|
|
1599
|
+
mat2 layerRotation = mat2(0.6, -0.8, 0.8, 0.6);
|
|
1600
|
+
|
|
1601
|
+
float frequency = mix(2.0, 15.0, uFrequency);
|
|
1602
|
+
float amplitude = uAmplitude;
|
|
1603
|
+
float frequencyGrowth = 1.4;
|
|
1604
|
+
float animTime = t * 0.1 * uSpeed;
|
|
1605
|
+
|
|
1606
|
+
const int LAYERS = 4;
|
|
1607
|
+
for(int i = 0; i < LAYERS; i++) {
|
|
1608
|
+
// Calculate wave displacement for this layer
|
|
1609
|
+
vec2 rotatedPos = pos * rotation;
|
|
1610
|
+
vec2 wave = sin(frequency * rotatedPos + float(i) * animTime + it);
|
|
1611
|
+
|
|
1612
|
+
// Apply displacement along rotation direction
|
|
1613
|
+
pos += (amplitude / frequency) * rotation[0] * wave;
|
|
1614
|
+
|
|
1615
|
+
// Evolve parameters for next layer
|
|
1616
|
+
rotation *= layerRotation;
|
|
1617
|
+
amplitude *= mix(1.0, max(wave.x, wave.y), uVariance);
|
|
1618
|
+
frequency *= frequencyGrowth;
|
|
1619
|
+
}
|
|
1620
|
+
|
|
1621
|
+
return pos;
|
|
1622
|
+
}
|
|
1623
|
+
|
|
1624
|
+
const float ITERATIONS = 36.0;
|
|
1625
|
+
|
|
1626
|
+
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
|
|
1627
|
+
vec2 uv = fragCoord / iResolution.xy;
|
|
1628
|
+
|
|
1629
|
+
vec3 pp = vec3(0.0);
|
|
1630
|
+
vec3 bloom = vec3(0.0);
|
|
1631
|
+
float t = iTime * 0.5;
|
|
1632
|
+
vec2 pos = uv - 0.5;
|
|
1633
|
+
|
|
1634
|
+
vec2 prevPos = turb(pos, t, 0.0 - 1.0 / ITERATIONS);
|
|
1635
|
+
float spacing = mix(1.0, TAU, uSpacing);
|
|
1636
|
+
|
|
1637
|
+
for(float i = 1.0; i < ITERATIONS + 1.0; i++) {
|
|
1638
|
+
float iter = i / ITERATIONS;
|
|
1639
|
+
vec2 st = turb(pos, t, iter * spacing);
|
|
1640
|
+
float d = abs(getSdf(st));
|
|
1641
|
+
float pd = distance(st, prevPos);
|
|
1642
|
+
prevPos = st;
|
|
1643
|
+
float dynamicBlur = exp2(pd * 2.0 * 1.4426950408889634) - 1.0;
|
|
1644
|
+
float ds = smoothstep(0.0, uBlur * 0.05 + max(dynamicBlur * uSmoothing, 0.001), d);
|
|
1645
|
+
|
|
1646
|
+
// Shift color based on iteration using uColorScale
|
|
1647
|
+
vec3 color = uColor;
|
|
1648
|
+
if(uColorShift > 0.01) {
|
|
1649
|
+
vec3 hsv = rgb2hsv(color);
|
|
1650
|
+
// Shift hue by iteration
|
|
1651
|
+
hsv.x = fract(hsv.x + (1.0 - iter) * uColorShift * 0.3);
|
|
1652
|
+
color = hsv2rgb(hsv);
|
|
1653
|
+
}
|
|
1654
|
+
|
|
1655
|
+
float invd = 1.0 / max(d + dynamicBlur, 0.001);
|
|
1656
|
+
pp += (ds - 1.0) * color;
|
|
1657
|
+
bloom += clamp(invd, 0.0, 250.0) * color;
|
|
1658
|
+
}
|
|
1659
|
+
|
|
1660
|
+
pp *= 1.0 / ITERATIONS;
|
|
1661
|
+
|
|
1662
|
+
vec3 color;
|
|
1663
|
+
|
|
1664
|
+
// Dark mode (default)
|
|
1665
|
+
if(uMode < 0.5) {
|
|
1666
|
+
// use bloom effect
|
|
1667
|
+
bloom = bloom / (bloom + 2e4);
|
|
1668
|
+
color = (-pp + bloom * 3.0 * uBloom) * 1.2;
|
|
1669
|
+
color += (randFibo(fragCoord).x - 0.5) / 255.0;
|
|
1670
|
+
color = Tonemap(color);
|
|
1671
|
+
float alpha = luma(color) * uMix;
|
|
1672
|
+
fragColor = vec4(color * uMix, alpha);
|
|
1673
|
+
}
|
|
1674
|
+
|
|
1675
|
+
// Light mode
|
|
1676
|
+
else {
|
|
1677
|
+
// no bloom effect
|
|
1678
|
+
color = -pp;
|
|
1679
|
+
color += (randFibo(fragCoord).x - 0.5) / 255.0;
|
|
1680
|
+
|
|
1681
|
+
// Preserve hue by tone mapping brightness only
|
|
1682
|
+
float brightness = length(color);
|
|
1683
|
+
vec3 direction = brightness > 0.0 ? color / brightness : color;
|
|
1684
|
+
|
|
1685
|
+
// Reinhard on brightness
|
|
1686
|
+
float factor = 2.0;
|
|
1687
|
+
float mappedBrightness = (brightness * factor) / (1.0 + brightness * factor);
|
|
1688
|
+
color = direction * mappedBrightness;
|
|
1689
|
+
|
|
1690
|
+
// Boost saturation to compensate for white background bleed-through
|
|
1691
|
+
// When alpha < 1.0, white bleeds through making colors look desaturated
|
|
1692
|
+
// So we increase saturation to maintain vibrant appearance
|
|
1693
|
+
float gray = dot(color, vec3(0.2, 0.5, 0.1));
|
|
1694
|
+
float saturationBoost = 3.0;
|
|
1695
|
+
color = mix(vec3(gray), color, saturationBoost);
|
|
1696
|
+
|
|
1697
|
+
// Clamp between 0-1
|
|
1698
|
+
color = clamp(color, 0.0, 1.0);
|
|
1699
|
+
|
|
1700
|
+
float alpha = mappedBrightness * clamp(uMix, 1.0, 2.0);
|
|
1701
|
+
fragColor = vec4(color, alpha);
|
|
1702
|
+
}
|
|
1703
|
+
}`, cn = 10, un = 2, ln = 0.5, fn = 0.2, hn = 1.5, G = {
|
|
1704
|
+
duration: 0.5,
|
|
1705
|
+
ease: "easeOut"
|
|
1706
|
+
}, Pe = {
|
|
1707
|
+
duration: 0.35,
|
|
1708
|
+
ease: "easeOut",
|
|
1709
|
+
repeat: 1 / 0,
|
|
1710
|
+
repeatType: "mirror"
|
|
1711
|
+
};
|
|
1712
|
+
function oe(t) {
|
|
1713
|
+
const [e, n] = Ue(t), r = dt(t), o = B(null);
|
|
1714
|
+
wt(r, "change", (m) => n(m));
|
|
1715
|
+
const c = $e(
|
|
1716
|
+
(m, E) => {
|
|
1717
|
+
o.current = Wt(r, m, E);
|
|
1718
|
+
},
|
|
1719
|
+
[r]
|
|
1720
|
+
);
|
|
1721
|
+
return { value: e, motionValue: r, controls: o, animate: c };
|
|
1722
|
+
}
|
|
1723
|
+
function dn(t, e) {
|
|
1724
|
+
const [n, r] = Ue(cn), {
|
|
1725
|
+
value: o,
|
|
1726
|
+
animate: c,
|
|
1727
|
+
motionValue: m
|
|
1728
|
+
} = oe(fn), { value: E, animate: g } = oe(un), { value: R, animate: p } = oe(ln), { value: v, animate: x } = oe(hn), l = vt(e, {
|
|
1729
|
+
fftSize: 512,
|
|
1730
|
+
smoothingTimeConstant: 0.55
|
|
1731
|
+
});
|
|
1732
|
+
return ie(() => {
|
|
1733
|
+
switch (t) {
|
|
1734
|
+
case "idle":
|
|
1735
|
+
case "failed":
|
|
1736
|
+
case "disconnected":
|
|
1737
|
+
r(10), c(0.2, G), g(1.2, G), p(0.4, G), x(1, G);
|
|
1738
|
+
return;
|
|
1739
|
+
case "listening":
|
|
1740
|
+
case "pre-connect-buffering":
|
|
1741
|
+
r(20), c(0.3, { type: "spring", duration: 1, bounce: 0.35 }), g(1, G), p(0.7, G), x([1.5, 2], Pe);
|
|
1742
|
+
return;
|
|
1743
|
+
case "thinking":
|
|
1744
|
+
case "connecting":
|
|
1745
|
+
case "initializing":
|
|
1746
|
+
r(30), c(0.3, G), g(0.5, G), p(1, G), x([0.5, 2.5], Pe);
|
|
1747
|
+
return;
|
|
1748
|
+
case "speaking":
|
|
1749
|
+
r(70), c(0.3, G), g(0.75, G), p(1.25, G), x(1.5, G);
|
|
1750
|
+
return;
|
|
1751
|
+
}
|
|
1752
|
+
}, [
|
|
1753
|
+
t,
|
|
1754
|
+
c,
|
|
1755
|
+
g,
|
|
1756
|
+
p,
|
|
1757
|
+
x
|
|
1758
|
+
]), ie(() => {
|
|
1759
|
+
t === "speaking" && l > 0 && !m.isAnimating() && c(0.2 + 0.2 * l, { duration: 0 });
|
|
1760
|
+
}, [
|
|
1761
|
+
t,
|
|
1762
|
+
l,
|
|
1763
|
+
m,
|
|
1764
|
+
c,
|
|
1765
|
+
g,
|
|
1766
|
+
p,
|
|
1767
|
+
x
|
|
1768
|
+
]), {
|
|
1769
|
+
speed: n,
|
|
1770
|
+
scale: o,
|
|
1771
|
+
amplitude: E,
|
|
1772
|
+
frequency: R,
|
|
1773
|
+
brightness: v
|
|
1774
|
+
};
|
|
1775
|
+
}
|
|
1776
|
+
const mn = pt({
|
|
1777
|
+
base: "aspect-square",
|
|
1778
|
+
variants: {
|
|
1779
|
+
size: {
|
|
1780
|
+
icon: "h-[24px]",
|
|
1781
|
+
sm: "h-[56px]",
|
|
1782
|
+
md: "h-[112px]",
|
|
1783
|
+
lg: "h-[224px]",
|
|
1784
|
+
xl: "h-[448px]"
|
|
1785
|
+
}
|
|
1786
|
+
},
|
|
1787
|
+
defaultVariants: {
|
|
1788
|
+
size: "lg"
|
|
1789
|
+
}
|
|
1790
|
+
});
|
|
1791
|
+
function pn(t) {
|
|
1792
|
+
const e = t.match(
|
|
1793
|
+
/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
|
|
1794
|
+
);
|
|
1795
|
+
if (e) {
|
|
1796
|
+
const [, n, r, o] = e;
|
|
1797
|
+
return [n, r, o].map((m = "00") => parseInt(m, 16) / 255);
|
|
1798
|
+
}
|
|
1799
|
+
}
|
|
1800
|
+
function Ge({
|
|
1801
|
+
shape: t = 1,
|
|
1802
|
+
speed: e = 1,
|
|
1803
|
+
amplitude: n = 0.5,
|
|
1804
|
+
frequency: r = 0.5,
|
|
1805
|
+
scale: o = 0.2,
|
|
1806
|
+
blur: c = 1,
|
|
1807
|
+
color: m = "#FF355E",
|
|
1808
|
+
colorShift: E = 1,
|
|
1809
|
+
brightness: g = 1,
|
|
1810
|
+
themeMode: R = typeof window < "u" && document.documentElement.classList.contains("dark") ? "dark" : "light",
|
|
1811
|
+
ref: p,
|
|
1812
|
+
className: v,
|
|
1813
|
+
...x
|
|
1814
|
+
}) {
|
|
1815
|
+
const l = qe(() => pn(m), [m]);
|
|
1816
|
+
return /* @__PURE__ */ q("div", { ref: p, className: v, ...x, children: /* @__PURE__ */ q(
|
|
1817
|
+
sn,
|
|
1818
|
+
{
|
|
1819
|
+
fs: an,
|
|
1820
|
+
devicePixelRatio: globalThis.devicePixelRatio ?? 1,
|
|
1821
|
+
uniforms: {
|
|
1822
|
+
// Aurora wave speed
|
|
1823
|
+
uSpeed: { type: "1f", value: e },
|
|
1824
|
+
// Edge blur/softness
|
|
1825
|
+
uBlur: { type: "1f", value: c },
|
|
1826
|
+
// Shape scale
|
|
1827
|
+
uScale: { type: "1f", value: o },
|
|
1828
|
+
// Shape type: 1=circle, 2=line
|
|
1829
|
+
uShape: { type: "1f", value: t },
|
|
1830
|
+
// Wave frequency and complexity
|
|
1831
|
+
uFrequency: { type: "1f", value: r },
|
|
1832
|
+
// Turbulence amplitude
|
|
1833
|
+
uAmplitude: { type: "1f", value: n },
|
|
1834
|
+
// Light intensity (bloom)
|
|
1835
|
+
uBloom: { type: "1f", value: 0 },
|
|
1836
|
+
// Brightness of the aurora (0-1)
|
|
1837
|
+
uMix: { type: "1f", value: g },
|
|
1838
|
+
// Color variation across layers (0-1)
|
|
1839
|
+
uSpacing: { type: "1f", value: 0.5 },
|
|
1840
|
+
// Color palette offset - shifts colors along the gradient (0-1)
|
|
1841
|
+
uColorShift: { type: "1f", value: E },
|
|
1842
|
+
// Color variation across layers (0-1)
|
|
1843
|
+
uVariance: { type: "1f", value: 0.1 },
|
|
1844
|
+
// Smoothing of the aurora (0-1)
|
|
1845
|
+
uSmoothing: { type: "1f", value: 1 },
|
|
1846
|
+
// Display mode: 0=dark background, 1=light background
|
|
1847
|
+
uMode: { type: "1f", value: R === "light" ? 1 : 0 },
|
|
1848
|
+
// Color
|
|
1849
|
+
uColor: { type: "3fv", value: l ?? [0, 0.7, 1] }
|
|
1850
|
+
},
|
|
1851
|
+
onError: (T) => {
|
|
1852
|
+
console.error("Shader error:", T);
|
|
1853
|
+
},
|
|
1854
|
+
onWarning: (T) => {
|
|
1855
|
+
console.warn("Shader warning:", T);
|
|
1856
|
+
},
|
|
1857
|
+
style: { width: "100%", height: "100%" }
|
|
1858
|
+
}
|
|
1859
|
+
) });
|
|
1860
|
+
}
|
|
1861
|
+
Ge.displayName = "AuraShader";
|
|
1862
|
+
function Sn({
|
|
1863
|
+
size: t = "lg",
|
|
1864
|
+
state: e,
|
|
1865
|
+
color: n,
|
|
1866
|
+
colorShift: r = 0.05,
|
|
1867
|
+
audioTrack: o,
|
|
1868
|
+
themeMode: c,
|
|
1869
|
+
className: m,
|
|
1870
|
+
ref: E,
|
|
1871
|
+
...g
|
|
1872
|
+
}) {
|
|
1873
|
+
const { speed: R, scale: p, amplitude: v, frequency: x, brightness: l } = dn(e, o);
|
|
1874
|
+
return /* @__PURE__ */ q(
|
|
1875
|
+
Ge,
|
|
1876
|
+
{
|
|
1877
|
+
ref: E,
|
|
1878
|
+
blur: 0.2,
|
|
1879
|
+
color: n,
|
|
1880
|
+
colorShift: r,
|
|
1881
|
+
speed: R,
|
|
1882
|
+
scale: p,
|
|
1883
|
+
themeMode: c,
|
|
1884
|
+
amplitude: v,
|
|
1885
|
+
frequency: x,
|
|
1886
|
+
brightness: l,
|
|
1887
|
+
className: mt(
|
|
1888
|
+
mn({ size: t }),
|
|
1889
|
+
"overflow-hidden rounded-full",
|
|
1890
|
+
m
|
|
1891
|
+
),
|
|
1892
|
+
...g
|
|
1893
|
+
}
|
|
1894
|
+
);
|
|
1895
|
+
}
|
|
1896
|
+
const Ln = ({
|
|
1897
|
+
text: t,
|
|
1898
|
+
confirmationText: e,
|
|
1899
|
+
onConfirm: n,
|
|
1900
|
+
cancelText: r,
|
|
1901
|
+
onCancel: o
|
|
1902
|
+
}) => /* @__PURE__ */ le("div", { className: "flex flex-col gap-2", children: [
|
|
1903
|
+
t && /* @__PURE__ */ q("p", { children: t }),
|
|
1904
|
+
/* @__PURE__ */ le("div", { className: "flex gap-2", children: [
|
|
1905
|
+
/* @__PURE__ */ q(
|
|
1906
|
+
fe,
|
|
1907
|
+
{
|
|
1908
|
+
type: "button",
|
|
1909
|
+
variant: "outline",
|
|
1910
|
+
size: "sm",
|
|
1911
|
+
icon: gt,
|
|
1912
|
+
onClick: n,
|
|
1913
|
+
label: e
|
|
1914
|
+
}
|
|
1915
|
+
),
|
|
1916
|
+
/* @__PURE__ */ q(
|
|
1917
|
+
fe,
|
|
1918
|
+
{
|
|
1919
|
+
type: "button",
|
|
1920
|
+
variant: "ghost",
|
|
1921
|
+
size: "sm",
|
|
1922
|
+
onClick: o,
|
|
1923
|
+
label: r
|
|
1924
|
+
}
|
|
1925
|
+
)
|
|
1926
|
+
] })
|
|
1927
|
+
] });
|
|
1928
|
+
export {
|
|
1929
|
+
An as A,
|
|
1930
|
+
xn as F,
|
|
1931
|
+
bn as a,
|
|
1932
|
+
En as b,
|
|
1933
|
+
Sn as c,
|
|
1934
|
+
Ln as d,
|
|
1935
|
+
yn as o,
|
|
1936
|
+
Rn as u
|
|
1937
|
+
};
|