@rtstic.dev/pulse 0.0.61 → 0.0.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/form/book-a-demo.js +2 -679
  2. package/dist/form/index.js +7 -11382
  3. package/dist/form/index.js.map +2 -2
  4. package/dist/form/pricing.css +0 -2
  5. package/dist/form/pricing.js +7 -11139
  6. package/dist/form/styles.css +1 -140
  7. package/dist/form/utm-propagation.js +1 -0
  8. package/dist/form/utm-propagation.js.map +7 -0
  9. package/dist/global/accordions-v2.js +1 -262
  10. package/dist/global/accordions.js +1 -237
  11. package/dist/global/faqs.js +1 -124
  12. package/dist/global/loader.js +1 -76
  13. package/dist/global/styles.css +1 -252
  14. package/dist/home/depth.js +3 -243
  15. package/dist/home/hero-animation/loader.js +8164 -74577
  16. package/dist/home/hero-animation/scroll.js +1 -401
  17. package/dist/home/hero-animation/styles.css +1 -233
  18. package/dist/home/hero-animation/torch.js +1 -62
  19. package/dist/home/horizontal-scroll.css +1 -49
  20. package/dist/home/horizontal-scroll.js +1 -140
  21. package/dist/home/tabs-v2.js +1 -134
  22. package/dist/home/tabs.js +1 -163
  23. package/dist/lever/styles.css +1 -31
  24. package/dist/marquee/index.js +2 -557
  25. package/dist/marquee/styles.css +1 -26
  26. package/dist/slider/freescroll-cards.js +1 -51
  27. package/dist/slider/freescroll-slider.js +1 -31
  28. package/dist/slider/testimonial.js +1 -30
  29. package/package.json +1 -1
package/dist/global/styles.css CHANGED
@@ -1,252 +1 @@
1
- /* src/global/styles.css */
2
- [ai-gradient="1"] {
3
- background:
4
- linear-gradient(
5
- 90deg,
6
- #ff84d2 2%,
7
- #ffa49d 46%,
8
- #ff5c2a 88%);
9
- }
10
- [ai-gradient="2"] {
11
- background:
12
- linear-gradient(
13
- 90deg,
14
- #fd4fad 17%,
15
- #ff5200 100%);
16
- }
17
- [style-bg-color=foreground] {
18
- background-color: var(--background-colors--foreground);
19
- }
20
- [style-bg-color=background] {
21
- background-color: var(--background-colors--background);
22
- }
23
- [style-bg-gradient="1"] {
24
- background:
25
- linear-gradient(
26
- 90deg,
27
- #FF84D2 2%,
28
- #FFA49D 46%,
29
- #FF5C2A 88%);
30
- }
31
- [style-type^=h] {
32
- font-family: var(--_font-family---heading);
33
- margin: 0;
34
- }
35
- [style-type=h1] {
36
- font-size: var(--_text-size---heading--h1);
37
- line-height: var(--_line-height---line-height-heading-tags--h1);
38
- font-weight: var(--_font-weight---font-weight-heading-tags--h1);
39
- letter-spacing: var(--_letter-spacing---letter-spacing-heading-tags--h1);
40
- }
41
- [style-type=h2] {
42
- font-size: var(--_text-size---heading--h2);
43
- line-height: var(--_line-height---line-height-heading-tags--h2);
44
- font-weight: var(--_font-weight---font-weight-heading-tags--h2);
45
- letter-spacing: var(--_letter-spacing---letter-spacing-heading-tags--h2);
46
- }
47
- [style-type=h3] {
48
- font-size: var(--_text-size---heading--h3);
49
- line-height: var(--_line-height---line-height-heading-tags--h3);
50
- font-weight: var(--_font-weight---font-weight-heading-tags--h3);
51
- letter-spacing: var(--_letter-spacing---letter-spacing-heading-tags--h3);
52
- }
53
- [style-type=h4] {
54
- font-size: var(--_text-size---heading--h4);
55
- line-height: var(--_line-height---line-height-heading-tags--h4);
56
- font-weight: var(--_font-weight---font-weight-heading-tags--h4);
57
- letter-spacing: var(--_letter-spacing---letter-spacing-heading-tags--h4);
58
- }
59
- [style-type=h5] {
60
- font-size: var(--_text-size---heading--h5);
61
- line-height: var(--_line-height---line-height-heading-tags--h5);
62
- font-weight: var(--_font-weight---font-weight-heading-tags--h5);
63
- letter-spacing: var(--_letter-spacing---letter-spacing-heading-tags--h5);
64
- }
65
- [style-type=h6] {
66
- font-size: var(--_text-size---heading--h6);
67
- line-height: var(--_line-height---line-height-heading-tags--h6);
68
- font-weight: var(--_font-weight---font-weight-heading-tags--h6);
69
- letter-spacing: var(--_letter-spacing---letter-spacing-heading-tags--h6);
70
- }
71
- [style-type^=title-] {
72
- font-family: var(--_font-family---title);
73
- }
74
- [style-type=title-l] {
75
- font-size: var(--_text-size---title--l);
76
- line-height: var(--_line-height---line-height-title--l);
77
- font-weight: var(--_font-weight---font-weight-title--l);
78
- letter-spacing: var(--_letter-spacing---letter-spacing-body--l);
79
- }
80
- [style-type=title-m] {
81
- font-size: var(--_text-size---title--m);
82
- line-height: var(--_line-height---line-height-title--m);
83
- font-weight: var(--_font-weight---font-weight-title--m);
84
- letter-spacing: var(--_letter-spacing---letter-spacing-title--m);
85
- }
86
- [style-type=title-s] {
87
- font-size: var(--_text-size---title--s);
88
- line-height: var(--_line-height---line-height-title--s);
89
- font-weight: var(--_font-weight---font-weight-title--s);
90
- letter-spacing: var(--_letter-spacing---letter-spacing-title--s);
91
- }
92
- [style-type^=display-] {
93
- font-family: var(--_font-family---display);
94
- }
95
- [style-type=display-l] {
96
- font-size: var(--_text-size---display--l);
97
- line-height: var(--_line-height---line-height-display--l);
98
- font-weight: var(--_font-weight---font-weight-display--l);
99
- letter-spacing: var(--_letter-spacing---letter-spacing-display--l);
100
- }
101
- [style-type=display-m] {
102
- font-size: var(--_text-size---display--m);
103
- line-height: var(--_line-height---line-height-display--m);
104
- font-weight: var(--_font-weight---font-weight-display--m);
105
- letter-spacing: var(--_letter-spacing---letter-spacing-display--m);
106
- }
107
- [style-type=display-s] {
108
- font-size: var(--_text-size---display--s);
109
- line-height: var(--_line-height---line-height-display--s);
110
- font-weight: var(--_font-weight---font-weight-display--s);
111
- letter-spacing: var(--_letter-spacing---letter-spacing-display--s);
112
- }
113
- [style-type^=body-] {
114
- font-family: var(--_font-family---body);
115
- }
116
- [style-type=body-l] {
117
- font-size: var(--_text-size---body--l);
118
- line-height: var(--_line-height---line-height-body--l);
119
- font-weight: var(--_font-weight---font-weight-body--l);
120
- letter-spacing: var(--_letter-spacing---letter-spacing-body--l);
121
- }
122
- [style-type=body-m] {
123
- font-size: var(--_text-size---body--m);
124
- line-height: var(--_line-height---line-height-body--m);
125
- font-weight: var(--_font-weight---font-weight-body--m);
126
- letter-spacing: var(--_letter-spacing---letter-spacing-body--m);
127
- }
128
- [style-type=body-s] {
129
- font-size: var(--_text-size---body--s);
130
- line-height: var(--_line-height---line-height-body--s);
131
- font-weight: var(--_font-weight---font-weight-body--s);
132
- letter-spacing: var(--_letter-spacing---letter-spacing-body--s);
133
- }
134
- [style-text-align=left] {
135
- text-align: left;
136
- }
137
- [style-text-align=center] {
138
- text-align: center;
139
- }
140
- [style-text-align=right] {
141
- text-align: right;
142
- }
143
- [style-text-color=title] {
144
- color: var(--text-colors--title);
145
- }
146
- [style-text-color=subtext] {
147
- color: var(--text-colors--subtext);
148
- }
149
- [style-text-color=subtext-light] {
150
- color: var(--text-colors--subtext-light);
151
- }
152
- [style-text-color=orange] {
153
- color: var(--text-colors--orange);
154
- }
155
- [style-button-color=orange] {
156
- background-color: var(--orange--orange40);
157
- border-color: var(--orange--orange40);
158
- color: var(--text-colors--title-inverse);
159
- }
160
- [style-button-color=white] {
161
- background-color: var(--white);
162
- border: 1px solid var(--white);
163
- color: var(--text-colors--title-inverse);
164
- }
165
- [style-button-color=transparent] {
166
- background-color: var(--transparent);
167
- border: 1px solid var(--white);
168
- color: var(--white);
169
- }
170
- [style-padding-y=small] {
171
- padding-top: var(--_spaces---padding--small);
172
- padding-bottom: var(--_spaces---padding--small);
173
- }
174
- [style-padding-y=large] {
175
- padding-top: var(--_spaces---padding--large);
176
- padding-bottom: var(--_spaces---padding--large);
177
- }
178
- [style-flex] {
179
- display: flex;
180
- }
181
- [style-flex=center] {
182
- justify-content: center;
183
- align-items: center;
184
- }
185
- [style-flex=left] {
186
- flex-direction: column;
187
- align-items: flex-start;
188
- }
189
- [style-flex=right] {
190
- flex-direction: column;
191
- align-items: flex-end;
192
- }
193
- [style-text-gradient=radial] {
194
- background:
195
- radial-gradient(
196
- circle,
197
- #ff84d2 18%,
198
- #ffa49d 63%,
199
- #ff5c2a 98%);
200
- -webkit-background-clip: text;
201
- -webkit-text-fill-color: transparent;
202
- }
203
- .gradient-text {
204
- background:
205
- linear-gradient(
206
- 70.54deg,
207
- #ff84d2 22.76%,
208
- #ffa49d 29.68%,
209
- #ff5c2a 38.24%);
210
- background-clip: text;
211
- -webkit-background-clip: text;
212
- color: transparent;
213
- -webkit-text-fill-color: transparent;
214
- }
215
- [background-clip] {
216
- background-clip: text;
217
- -webkit-background-clip: text;
218
- color: transparent;
219
- -webkit-text-fill-color: transparent;
220
- }
221
- [style-scrollbar=none] {
222
- scrollbar-width: none;
223
- -ms-overflow-style: none;
224
- }
225
- [style-scrollbar=none]::-webkit-scrollbar {
226
- display: none;
227
- }
228
- [custom-col-span="2"] {
229
- grid-area: span 1 / span 2 / span 1 / span 2;
230
- }
231
- [custom-col-span="3"] {
232
- grid-area: span 1 / span 3 / span 1 / span 3;
233
- }
234
- [custom-col-span="4"] {
235
- grid-area: span 1 / span 4 / span 1 / span 4;
236
- }
237
- [custom-col-span="5"] {
238
- grid-area: span 1 / span 5 / span 1 / span 5;
239
- }
240
- [style-height=full] {
241
- height: 100%;
242
- }
243
- [style-overflow=hidden] {
244
- overflow: hidden;
245
- }
246
- [code-embed] {
247
- position: absolute;
248
- z-index: -100;
249
- opacity: 0;
250
- pointer-events: none;
251
- }
252
- /*# sourceMappingURL=styles.css.map */
1
+ [ai-gradient="1"]{background:linear-gradient(90deg,#ff84d2 2%,#ffa49d 46%,#ff5c2a 88%)}[ai-gradient="2"]{background:linear-gradient(90deg,#fd4fad 17%,#ff5200)}[style-bg-color=foreground]{background-color:var(--background-colors--foreground)}[style-bg-color=background]{background-color:var(--background-colors--background)}[style-bg-gradient="1"]{background:linear-gradient(90deg,#ff84d2 2%,#ffa49d 46%,#ff5c2a 88%)}[style-type^=h]{font-family:var(--_font-family---heading);margin:0}[style-type=h1]{font-size:var(--_text-size---heading--h1);line-height:var(--_line-height---line-height-heading-tags--h1);font-weight:var(--_font-weight---font-weight-heading-tags--h1);letter-spacing:var(--_letter-spacing---letter-spacing-heading-tags--h1)}[style-type=h2]{font-size:var(--_text-size---heading--h2);line-height:var(--_line-height---line-height-heading-tags--h2);font-weight:var(--_font-weight---font-weight-heading-tags--h2);letter-spacing:var(--_letter-spacing---letter-spacing-heading-tags--h2)}[style-type=h3]{font-size:var(--_text-size---heading--h3);line-height:var(--_line-height---line-height-heading-tags--h3);font-weight:var(--_font-weight---font-weight-heading-tags--h3);letter-spacing:var(--_letter-spacing---letter-spacing-heading-tags--h3)}[style-type=h4]{font-size:var(--_text-size---heading--h4);line-height:var(--_line-height---line-height-heading-tags--h4);font-weight:var(--_font-weight---font-weight-heading-tags--h4);letter-spacing:var(--_letter-spacing---letter-spacing-heading-tags--h4)}[style-type=h5]{font-size:var(--_text-size---heading--h5);line-height:var(--_line-height---line-height-heading-tags--h5);font-weight:var(--_font-weight---font-weight-heading-tags--h5);letter-spacing:var(--_letter-spacing---letter-spacing-heading-tags--h5)}[style-type=h6]{font-size:var(--_text-size---heading--h6);line-height:var(--_line-height---line-height-heading-tags--h6);font-weight:var(--_font-weight---font-weight-heading-tags--h6);letter-spacing:var(--_letter-spacing---letter-spacing-heading-tags--h6)}[style-type^=title-]{font-family:var(--_font-family---title)}[style-type=title-l]{font-size:var(--_text-size---title--l);line-height:var(--_line-height---line-height-title--l);font-weight:var(--_font-weight---font-weight-title--l);letter-spacing:var(--_letter-spacing---letter-spacing-body--l)}[style-type=title-m]{font-size:var(--_text-size---title--m);line-height:var(--_line-height---line-height-title--m);font-weight:var(--_font-weight---font-weight-title--m);letter-spacing:var(--_letter-spacing---letter-spacing-title--m)}[style-type=title-s]{font-size:var(--_text-size---title--s);line-height:var(--_line-height---line-height-title--s);font-weight:var(--_font-weight---font-weight-title--s);letter-spacing:var(--_letter-spacing---letter-spacing-title--s)}[style-type^=display-]{font-family:var(--_font-family---display)}[style-type=display-l]{font-size:var(--_text-size---display--l);line-height:var(--_line-height---line-height-display--l);font-weight:var(--_font-weight---font-weight-display--l);letter-spacing:var(--_letter-spacing---letter-spacing-display--l)}[style-type=display-m]{font-size:var(--_text-size---display--m);line-height:var(--_line-height---line-height-display--m);font-weight:var(--_font-weight---font-weight-display--m);letter-spacing:var(--_letter-spacing---letter-spacing-display--m)}[style-type=display-s]{font-size:var(--_text-size---display--s);line-height:var(--_line-height---line-height-display--s);font-weight:var(--_font-weight---font-weight-display--s);letter-spacing:var(--_letter-spacing---letter-spacing-display--s)}[style-type^=body-]{font-family:var(--_font-family---body)}[style-type=body-l]{font-size:var(--_text-size---body--l);line-height:var(--_line-height---line-height-body--l);font-weight:var(--_font-weight---font-weight-body--l);letter-spacing:var(--_letter-spacing---letter-spacing-body--l)}[style-type=body-m]{font-size:var(--_text-size---body--m);line-height:var(--_line-height---line-height-body--m);font-weight:var(--_font-weight---font-weight-body--m);letter-spacing:var(--_letter-spacing---letter-spacing-body--m)}[style-type=body-s]{font-size:var(--_text-size---body--s);line-height:var(--_line-height---line-height-body--s);font-weight:var(--_font-weight---font-weight-body--s);letter-spacing:var(--_letter-spacing---letter-spacing-body--s)}[style-text-align=left]{text-align:left}[style-text-align=center]{text-align:center}[style-text-align=right]{text-align:right}[style-text-color=title]{color:var(--text-colors--title)}[style-text-color=subtext]{color:var(--text-colors--subtext)}[style-text-color=subtext-light]{color:var(--text-colors--subtext-light)}[style-text-color=orange]{color:var(--text-colors--orange)}[style-button-color=orange]{background-color:var(--orange--orange40);border-color:var(--orange--orange40);color:var(--text-colors--title-inverse)}[style-button-color=white]{background-color:var(--white);border:1px solid var(--white);color:var(--text-colors--title-inverse)}[style-button-color=transparent]{background-color:var(--transparent);border:1px solid var(--white);color:var(--white)}[style-padding-y=small]{padding-top:var(--_spaces---padding--small);padding-bottom:var(--_spaces---padding--small)}[style-padding-y=large]{padding-top:var(--_spaces---padding--large);padding-bottom:var(--_spaces---padding--large)}[style-flex]{display:flex}[style-flex=center]{justify-content:center;align-items:center}[style-flex=left]{flex-direction:column;align-items:flex-start}[style-flex=right]{flex-direction:column;align-items:flex-end}[style-text-gradient=radial]{background:radial-gradient(circle,#ff84d2 18%,#ffa49d 63%,#ff5c2a 98%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.gradient-text{background:linear-gradient(70.54deg,#ff84d2 22.76%,#ffa49d 29.68%,#ff5c2a 38.24%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}[background-clip]{background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}[style-scrollbar=none]{scrollbar-width:none;-ms-overflow-style:none}[style-scrollbar=none]::-webkit-scrollbar{display:none}[custom-col-span="2"]{grid-area:span 1 / span 2 / span 1 / span 2}[custom-col-span="3"]{grid-area:span 1 / span 3 / span 1 / span 3}[custom-col-span="4"]{grid-area:span 1 / span 4 / span 1 / span 4}[custom-col-span="5"]{grid-area:span 1 / span 5 / span 1 / span 5}[style-height=full]{height:100%}[style-overflow=hidden]{overflow:hidden}[code-embed]{position:absolute;z-index:-100;opacity:0;pointer-events:none}
package/dist/home/depth.js CHANGED
@@ -1,75 +1,4 @@
1
- "use strict";
2
- (() => {
3
- // src/home/depth.ts
4
- var COLOR_URL = "https://cdn.prod.website-files.com/680cbbaefb50442c848aedf7/6926cf888059f91e69c286e7_IMG_0311.jpg";
5
- var DEPTH_URL = "https://cdn.prod.website-files.com/680cbbaefb50442c848aedf7/6926cf7fd0f3c3f3276d1575_IMG_0310.png";
6
- var DEPTH_SCALE = 0.01;
7
- var MOUSE_SMOOTH = 0.9;
8
- var IMAGE_SCALE = 0.9;
9
- var state = {
10
- gl: null,
11
- program: null,
12
- mousePos: { x: 0, y: 0 },
13
- targetPos: { x: 0, y: 0 },
14
- textures: { color: null, depth: null },
15
- animationId: null,
16
- isLoaded: false,
17
- imageAspect: 1,
18
- canvasAspect: 1,
19
- uvScale: { x: 1, y: 1 },
20
- uvOffset: { x: 0, y: 0 }
21
- };
22
- var wrapper = document.getElementById("viewer-wrapper");
23
- var canvas = document.getElementById("viewer-canvas");
24
- var statusEl = document.getElementById("status");
25
- canvas.addEventListener("mousemove", (e) => {
26
- const rect = canvas.getBoundingClientRect();
27
- const x = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
28
- const y = -((e.clientY - rect.top) / rect.height - 0.5) * 2;
29
- state.targetPos.x = x;
30
- state.targetPos.y = y;
31
- });
32
- canvas.addEventListener("mouseleave", () => {
33
- state.targetPos.x = 0;
34
- state.targetPos.y = 0;
35
- });
36
- function updateCanvasSize() {
37
- canvas.width = wrapper.clientWidth;
38
- canvas.height = wrapper.clientHeight;
39
- if (state.gl) {
40
- state.gl.viewport(0, 0, canvas.width, canvas.height);
41
- updateUvScale();
42
- }
43
- }
44
- function updateUvScale() {
45
- state.canvasAspect = canvas.width / canvas.height;
46
- const ia = state.imageAspect || 1;
47
- const ca = state.canvasAspect || 1;
48
- let scaleX = 1;
49
- let scaleY = 1;
50
- let offsetX = 0;
51
- let offsetY = 0;
52
- if (ca > ia) {
53
- scaleX = ca / ia;
54
- offsetX = (scaleX - 1) / 2;
55
- } else {
56
- scaleY = ia / ca;
57
- offsetY = (scaleY - 1) / 2;
58
- }
59
- state.uvScale.x = scaleX;
60
- state.uvScale.y = scaleY;
61
- state.uvOffset.x = offsetX;
62
- state.uvOffset.y = offsetY;
63
- }
64
- function initWebGL() {
65
- updateCanvasSize();
66
- const gl = canvas.getContext("webgl");
67
- if (!gl) {
68
- statusEl.textContent = "WebGL not supported in this browser.";
69
- return;
70
- }
71
- state.gl = gl;
72
- const vertexShaderSource = `
1
+ "use strict";(()=>{var g="https://cdn.prod.website-files.com/680cbbaefb50442c848aedf7/6926cf888059f91e69c286e7_IMG_0311.jpg",p="https://cdn.prod.website-files.com/680cbbaefb50442c848aedf7/6926cf7fd0f3c3f3276d1575_IMG_0310.png";var t={gl:null,program:null,mousePos:{x:0,y:0},targetPos:{x:0,y:0},textures:{color:null,depth:null},animationId:null,isLoaded:!1,imageAspect:1,canvasAspect:1,uvScale:{x:1,y:1},uvOffset:{x:0,y:0}},E=document.getElementById("viewer-wrapper"),i=document.getElementById("viewer-canvas"),d=document.getElementById("status");i.addEventListener("mousemove",e=>{let r=i.getBoundingClientRect(),n=((e.clientX-r.left)/r.width-.5)*2,o=-((e.clientY-r.top)/r.height-.5)*2;t.targetPos.x=n,t.targetPos.y=o});i.addEventListener("mouseleave",()=>{t.targetPos.x=0,t.targetPos.y=0});function v(){i.width=E.clientWidth,i.height=E.clientHeight,t.gl&&(t.gl.viewport(0,0,i.width,i.height),T())}function T(){t.canvasAspect=i.width/i.height;let e=t.imageAspect||1,r=t.canvasAspect||1,n=1,o=1,u=0,a=0;r>e?(n=r/e,u=(n-1)/2):(o=e/r,a=(o-1)/2),t.uvScale.x=n,t.uvScale.y=o,t.uvOffset.x=u,t.uvOffset.y=a}function L(){v();let e=i.getContext("webgl");if(!e){d.textContent="WebGL not supported in this browser.";return}t.gl=e;let r=`
73
2
  attribute vec2 a_position;
74
3
  attribute vec2 a_texCoord;
75
4
  varying vec2 v_texCoord;
@@ -77,8 +6,7 @@
77
6
  gl_Position = vec4(a_position, 0.0, 1.0);
78
7
  v_texCoord = a_texCoord;
79
8
  }
80
- `;
81
- const fragmentShaderSource = `
9
+ `,n=`
82
10
  precision mediump float;
83
11
  uniform sampler2D u_colorTexture;
84
12
  uniform sampler2D u_depthTexture;
@@ -108,172 +36,4 @@
108
36
  gl_FragColor = texture2D(u_colorTexture, uv);
109
37
  }
110
38
  }
111
- `;
112
- function compileShader(glContext, source, type) {
113
- const shader = glContext.createShader(type);
114
- if (!shader) return null;
115
- glContext.shaderSource(shader, source);
116
- glContext.compileShader(shader);
117
- if (!glContext.getShaderParameter(shader, glContext.COMPILE_STATUS)) {
118
- console.error(glContext.getShaderInfoLog(shader));
119
- glContext.deleteShader(shader);
120
- return null;
121
- }
122
- return shader;
123
- }
124
- const vertexShader = compileShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
125
- const fragmentShader = compileShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);
126
- if (!vertexShader || !fragmentShader) return;
127
- const program = gl.createProgram();
128
- if (!program) return;
129
- gl.attachShader(program, vertexShader);
130
- gl.attachShader(program, fragmentShader);
131
- gl.linkProgram(program);
132
- if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
133
- console.error(gl.getProgramInfoLog(program));
134
- statusEl.textContent = "Error linking WebGL program.";
135
- return;
136
- }
137
- state.program = program;
138
- const positionBuffer = gl.createBuffer();
139
- if (!positionBuffer) return;
140
- gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
141
- gl.bufferData(
142
- gl.ARRAY_BUFFER,
143
- new Float32Array([
144
- -1,
145
- -1,
146
- 1,
147
- -1,
148
- -1,
149
- 1,
150
- -1,
151
- 1,
152
- 1,
153
- -1,
154
- 1,
155
- 1
156
- ]),
157
- gl.STATIC_DRAW
158
- );
159
- const texCoordBuffer = gl.createBuffer();
160
- if (!texCoordBuffer) return;
161
- gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
162
- gl.bufferData(
163
- gl.ARRAY_BUFFER,
164
- new Float32Array([
165
- 0,
166
- 1,
167
- 1,
168
- 1,
169
- 0,
170
- 0,
171
- 0,
172
- 0,
173
- 1,
174
- 1,
175
- 1,
176
- 0
177
- ]),
178
- gl.STATIC_DRAW
179
- );
180
- state.positionBuffer = positionBuffer;
181
- state.texCoordBuffer = texCoordBuffer;
182
- loadTextures();
183
- }
184
- function loadTexture(gl, url, onLoaded, onImageLoaded) {
185
- const texture = gl.createTexture();
186
- if (!texture) return null;
187
- gl.bindTexture(gl.TEXTURE_2D, texture);
188
- gl.texImage2D(
189
- gl.TEXTURE_2D,
190
- 0,
191
- gl.RGBA,
192
- 1,
193
- 1,
194
- 0,
195
- gl.RGBA,
196
- gl.UNSIGNED_BYTE,
197
- new Uint8Array([0, 0, 0, 255])
198
- );
199
- const image = new Image();
200
- image.crossOrigin = "anonymous";
201
- image.onload = () => {
202
- if (onImageLoaded) onImageLoaded(image);
203
- gl.bindTexture(gl.TEXTURE_2D, texture);
204
- gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
205
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
206
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
207
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
208
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
209
- onLoaded();
210
- };
211
- image.onerror = () => {
212
- statusEl.textContent = "Error loading image: " + url;
213
- };
214
- image.src = url;
215
- return texture;
216
- }
217
- function loadTextures() {
218
- const gl = state.gl;
219
- if (!gl) return;
220
- let loadedCount = 0;
221
- function onLoaded() {
222
- loadedCount += 1;
223
- if (loadedCount === 2 && gl) {
224
- gl.viewport(0, 0, canvas.width, canvas.height);
225
- state.isLoaded = true;
226
- statusEl.textContent = "Move your mouse over the image to see the 3D parallax effect.";
227
- render();
228
- }
229
- }
230
- state.textures.color = loadTexture(
231
- gl,
232
- COLOR_URL,
233
- onLoaded,
234
- (image) => {
235
- state.imageAspect = image.width / image.height;
236
- updateUvScale();
237
- }
238
- );
239
- state.textures.depth = loadTexture(gl, DEPTH_URL, onLoaded);
240
- }
241
- function render() {
242
- if (!state.isLoaded) return;
243
- const gl = state.gl;
244
- const program = state.program;
245
- if (!gl || !program) return;
246
- state.mousePos.x += (state.targetPos.x - state.mousePos.x) * MOUSE_SMOOTH;
247
- state.mousePos.y += (state.targetPos.y - state.mousePos.y) * MOUSE_SMOOTH;
248
- gl.clearColor(0, 0, 0, 1);
249
- gl.clear(gl.COLOR_BUFFER_BIT);
250
- gl.useProgram(program);
251
- const positionLocation = gl.getAttribLocation(program, "a_position");
252
- gl.bindBuffer(gl.ARRAY_BUFFER, state.positionBuffer);
253
- gl.enableVertexAttribArray(positionLocation);
254
- gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
255
- const texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
256
- gl.bindBuffer(gl.ARRAY_BUFFER, state.texCoordBuffer);
257
- gl.enableVertexAttribArray(texCoordLocation);
258
- gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
259
- gl.activeTexture(gl.TEXTURE0);
260
- gl.bindTexture(gl.TEXTURE_2D, state.textures.color);
261
- gl.uniform1i(gl.getUniformLocation(program, "u_colorTexture"), 0);
262
- gl.activeTexture(gl.TEXTURE1);
263
- gl.bindTexture(gl.TEXTURE_2D, state.textures.depth);
264
- gl.uniform1i(gl.getUniformLocation(program, "u_depthTexture"), 1);
265
- gl.uniform2f(gl.getUniformLocation(program, "u_mouse"), state.mousePos.x, state.mousePos.y);
266
- gl.uniform1f(gl.getUniformLocation(program, "u_scale"), DEPTH_SCALE);
267
- gl.uniform2f(gl.getUniformLocation(program, "u_uvScale"), state.uvScale.x, state.uvScale.y);
268
- gl.uniform2f(gl.getUniformLocation(program, "u_uvOffset"), state.uvOffset.x, state.uvOffset.y);
269
- gl.uniform1f(gl.getUniformLocation(program, "u_imageScale"), IMAGE_SCALE);
270
- gl.drawArrays(gl.TRIANGLES, 0, 6);
271
- state.animationId = requestAnimationFrame(render);
272
- }
273
- window.addEventListener("load", initWebGL);
274
- window.addEventListener("resize", () => {
275
- if (!state.gl) return;
276
- updateCanvasSize();
277
- });
278
- })();
279
- //# sourceMappingURL=depth.js.map
39
+ `;function o(c,A,R){let f=c.createShader(R);return f?(c.shaderSource(f,A),c.compileShader(f),c.getShaderParameter(f,c.COMPILE_STATUS)?f:(console.error(c.getShaderInfoLog(f)),c.deleteShader(f),null)):null}let u=o(e,r,e.VERTEX_SHADER),a=o(e,n,e.FRAGMENT_SHADER);if(!u||!a)return;let s=e.createProgram();if(!s)return;if(e.attachShader(s,u),e.attachShader(s,a),e.linkProgram(s),!e.getProgramParameter(s,e.LINK_STATUS)){console.error(e.getProgramInfoLog(s)),d.textContent="Error linking WebGL program.";return}t.program=s;let m=e.createBuffer();if(!m)return;e.bindBuffer(e.ARRAY_BUFFER,m),e.bufferData(e.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),e.STATIC_DRAW);let l=e.createBuffer();l&&(e.bindBuffer(e.ARRAY_BUFFER,l),e.bufferData(e.ARRAY_BUFFER,new Float32Array([0,1,1,1,0,0,0,0,1,1,1,0]),e.STATIC_DRAW),t.positionBuffer=m,t.texCoordBuffer=l,b())}function _(e,r,n,o){let u=e.createTexture();if(!u)return null;e.bindTexture(e.TEXTURE_2D,u),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,1,1,0,e.RGBA,e.UNSIGNED_BYTE,new Uint8Array([0,0,0,255]));let a=new Image;return a.crossOrigin="anonymous",a.onload=()=>{o&&o(a),e.bindTexture(e.TEXTURE_2D,u),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,a),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),n()},a.onerror=()=>{d.textContent="Error loading image: "+r},a.src=r,u}function b(){let e=t.gl;if(!e)return;let r=0;function n(){r+=1,r===2&&e&&(e.viewport(0,0,i.width,i.height),t.isLoaded=!0,d.textContent="Move your mouse over the image to see the 3D parallax effect.",x())}t.textures.color=_(e,g,n,o=>{t.imageAspect=o.width/o.height,T()}),t.textures.depth=_(e,p,n)}function x(){if(!t.isLoaded)return;let e=t.gl,r=t.program;if(!e||!r)return;t.mousePos.x+=(t.targetPos.x-t.mousePos.x)*.9,t.mousePos.y+=(t.targetPos.y-t.mousePos.y)*.9,e.clearColor(0,0,0,1),e.clear(e.COLOR_BUFFER_BIT),e.useProgram(r);let n=e.getAttribLocation(r,"a_position");e.bindBuffer(e.ARRAY_BUFFER,t.positionBuffer),e.enableVertexAttribArray(n),e.vertexAttribPointer(n,2,e.FLOAT,!1,0,0);let o=e.getAttribLocation(r,"a_texCoord");e.bindBuffer(e.ARRAY_BUFFER,t.texCoordBuffer),e.enableVertexAttribArray(o),e.vertexAttribPointer(o,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.textures.color),e.uniform1i(e.getUniformLocation(r,"u_colorTexture"),0),e.activeTexture(e.TEXTURE1),e.bindTexture(e.TEXTURE_2D,t.textures.depth),e.uniform1i(e.getUniformLocation(r,"u_depthTexture"),1),e.uniform2f(e.getUniformLocation(r,"u_mouse"),t.mousePos.x,t.mousePos.y),e.uniform1f(e.getUniformLocation(r,"u_scale"),.01),e.uniform2f(e.getUniformLocation(r,"u_uvScale"),t.uvScale.x,t.uvScale.y),e.uniform2f(e.getUniformLocation(r,"u_uvOffset"),t.uvOffset.x,t.uvOffset.y),e.uniform1f(e.getUniformLocation(r,"u_imageScale"),.9),e.drawArrays(e.TRIANGLES,0,6),t.animationId=requestAnimationFrame(x)}window.addEventListener("load",L);window.addEventListener("resize",()=>{t.gl&&v()});})();