@kongyo2/cards-css 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +36 -2
- package/dist/dom.js +105 -12
- package/dist/dom.js.map +1 -1
- package/dist/holo-card.js +265 -42
- package/dist/holo-card.js.map +1 -1
- package/dist/holo-cards.css +94 -17
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/spring.js +20 -6
- package/dist/spring.js.map +1 -1
- package/dist-types/dom.d.ts +17 -1
- package/dist-types/dom.d.ts.map +1 -1
- package/dist-types/holo-card.d.ts +33 -2
- package/dist-types/holo-card.d.ts.map +1 -1
- package/dist-types/index.d.ts +3 -3
- package/dist-types/index.d.ts.map +1 -1
- package/dist-types/spring.d.ts +10 -1
- package/dist-types/spring.d.ts.map +1 -1
- package/dist-types/types.d.ts +147 -4
- package/dist-types/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/dom.ts +127 -13
- package/src/holo-card.ts +326 -47
- package/src/index.ts +15 -3
- package/src/spring.ts +47 -10
- package/src/styles/base.css +93 -4
- package/src/styles/effects/cosmos.css +9 -6
- package/src/styles/effects/glitter.css +4 -2
- package/src/styles/effects/holo.css +3 -2
- package/src/styles/effects/reverse.css +4 -3
- package/src/types.ts +152 -4
package/dist/holo-cards.css
CHANGED
|
@@ -30,6 +30,11 @@
|
|
|
30
30
|
--pointer-from-center: 0;
|
|
31
31
|
--pointer-from-top: var(--pointer-from-center);
|
|
32
32
|
--pointer-from-left: var(--pointer-from-center);
|
|
33
|
+
--pointer-dx: 0;
|
|
34
|
+
--pointer-dy: 0;
|
|
35
|
+
--tilt-x: 0;
|
|
36
|
+
--tilt-y: 0;
|
|
37
|
+
--card-active: 0;
|
|
33
38
|
}
|
|
34
39
|
.holo-card {
|
|
35
40
|
--grain: var(--hc-grain, none);
|
|
@@ -38,6 +43,19 @@
|
|
|
38
43
|
--space: 5%;
|
|
39
44
|
--angle: 133deg;
|
|
40
45
|
--imgsize: cover;
|
|
46
|
+
--hc-brightness: 1;
|
|
47
|
+
--hc-contrast: 1;
|
|
48
|
+
--hc-saturate: 1;
|
|
49
|
+
--hc-glare-opacity: 1;
|
|
50
|
+
--hc-shine-opacity: 1;
|
|
51
|
+
--mask-size: cover;
|
|
52
|
+
--mask-position: center center;
|
|
53
|
+
--mask-repeat: no-repeat;
|
|
54
|
+
--layer-blend: normal;
|
|
55
|
+
--layer-size: cover;
|
|
56
|
+
--layer-position: center;
|
|
57
|
+
--layer-opacity: 1;
|
|
58
|
+
--layer-parallax: 0;
|
|
41
59
|
--red: #f80e35;
|
|
42
60
|
--yellow: #eedf10;
|
|
43
61
|
--green: #21e985;
|
|
@@ -152,6 +170,10 @@ button.holo-card__rotator {
|
|
|
152
170
|
.holo-card__rotator img:not(.holo-card__back) {
|
|
153
171
|
transform: translate3d(0px, 0px, 0.01px);
|
|
154
172
|
}
|
|
173
|
+
.holo-card__rotator img.holo-card__image {
|
|
174
|
+
height: 100%;
|
|
175
|
+
object-fit: var(--imgsize);
|
|
176
|
+
}
|
|
155
177
|
.holo-card__back {
|
|
156
178
|
background-color: var(--card-back);
|
|
157
179
|
transform: rotateY(180deg) translateZ(1px);
|
|
@@ -191,9 +213,9 @@ button.holo-card__rotator {
|
|
|
191
213
|
background: transparent;
|
|
192
214
|
background-size: cover;
|
|
193
215
|
background-position: center;
|
|
194
|
-
filter: brightness(0.85) contrast(2.75) saturate(0.65);
|
|
216
|
+
filter: brightness(calc(0.85 * var(--hc-brightness))) contrast(calc(2.75 * var(--hc-contrast))) saturate(calc(0.65 * var(--hc-saturate)));
|
|
195
217
|
mix-blend-mode: color-dodge;
|
|
196
|
-
opacity: var(--card-opacity);
|
|
218
|
+
opacity: calc(var(--card-opacity) * var(--hc-shine-opacity));
|
|
197
219
|
}
|
|
198
220
|
.holo-card__shine::before,
|
|
199
221
|
.holo-card__shine::after {
|
|
@@ -225,15 +247,65 @@ button.holo-card__rotator {
|
|
|
225
247
|
hsla(0, 0%, 100%, 0.8) 10%,
|
|
226
248
|
hsla(0, 0%, 100%, 0.65) 20%,
|
|
227
249
|
hsla(0, 0%, 0%, 0.5) 90%);
|
|
228
|
-
opacity: var(--card-opacity);
|
|
250
|
+
opacity: calc(var(--card-opacity) * var(--hc-glare-opacity));
|
|
229
251
|
mix-blend-mode: overlay;
|
|
230
252
|
}
|
|
231
253
|
.holo-card--masked .holo-card__shine,
|
|
232
254
|
.holo-card--masked .holo-card__shine::before,
|
|
233
255
|
.holo-card--masked .holo-card__shine::after {
|
|
234
256
|
mask-image: var(--mask);
|
|
257
|
+
mask-size: var(--mask-size);
|
|
258
|
+
mask-position: var(--mask-position);
|
|
259
|
+
mask-repeat: var(--mask-repeat);
|
|
260
|
+
}
|
|
261
|
+
.holo-card--mask-card .holo-card__front,
|
|
262
|
+
.holo-card--mask-card .holo-card__back {
|
|
263
|
+
mask-image: var(--mask);
|
|
264
|
+
mask-size: var(--mask-size);
|
|
265
|
+
mask-position: var(--mask-position);
|
|
266
|
+
mask-repeat: var(--mask-repeat);
|
|
267
|
+
}
|
|
268
|
+
.holo-card__layers {
|
|
269
|
+
z-index: 2;
|
|
270
|
+
pointer-events: none;
|
|
271
|
+
}
|
|
272
|
+
.holo-card__layer {
|
|
273
|
+
grid-area: 1/1;
|
|
274
|
+
background-image: var(--layer-image, none);
|
|
275
|
+
background-size: var(--layer-size);
|
|
276
|
+
background-position: var(--layer-position);
|
|
277
|
+
background-repeat: no-repeat;
|
|
278
|
+
mix-blend-mode: var(--layer-blend);
|
|
279
|
+
opacity: var(--layer-opacity);
|
|
280
|
+
transform: translate3d(calc(var(--pointer-dx) * var(--layer-parallax) * 1px), calc(var(--pointer-dy) * var(--layer-parallax) * 1px), 0.02px);
|
|
281
|
+
will-change: transform, opacity;
|
|
282
|
+
}
|
|
283
|
+
.holo-card__layer--masked {
|
|
284
|
+
mask-image: var(--layer-mask);
|
|
235
285
|
mask-size: cover;
|
|
236
|
-
mask-position: center
|
|
286
|
+
mask-position: center;
|
|
287
|
+
}
|
|
288
|
+
.holo-card__content {
|
|
289
|
+
transform: translate3d(0px, 0px, 0.01px);
|
|
290
|
+
}
|
|
291
|
+
.holo-card__content *,
|
|
292
|
+
.holo-card__overlay *,
|
|
293
|
+
.holo-card__layer * {
|
|
294
|
+
width: auto;
|
|
295
|
+
display: revert;
|
|
296
|
+
grid-area: auto;
|
|
297
|
+
aspect-ratio: auto;
|
|
298
|
+
overflow: revert;
|
|
299
|
+
border-radius: revert;
|
|
300
|
+
}
|
|
301
|
+
.holo-card__overlay {
|
|
302
|
+
z-index: 4;
|
|
303
|
+
transform: translateZ(2px);
|
|
304
|
+
pointer-events: none;
|
|
305
|
+
}
|
|
306
|
+
.holo-card__overlay--interactive,
|
|
307
|
+
.holo-card__overlay--interactive * {
|
|
308
|
+
pointer-events: auto;
|
|
237
309
|
}
|
|
238
310
|
|
|
239
311
|
/* src/styles/effects/holo.css */
|
|
@@ -271,7 +343,7 @@ button.holo-card__rotator {
|
|
|
271
343
|
background-position: calc(((50% - var(--background-x)) * 2.6) + 50%) calc(((50% - var(--background-y)) * 3.5) + 50%), center center;
|
|
272
344
|
background-size: 400% 400%, cover;
|
|
273
345
|
background-blend-mode: overlay;
|
|
274
|
-
filter: brightness(1.1) contrast(1.1) saturate(1.2);
|
|
346
|
+
filter: brightness(calc(1.1 * var(--hc-brightness))) contrast(calc(1.1 * var(--hc-contrast))) saturate(calc(1.2 * var(--hc-saturate)));
|
|
275
347
|
mix-blend-mode: color-dodge;
|
|
276
348
|
}
|
|
277
349
|
.holo-card[data-effect=holo] .holo-card__shine::before {
|
|
@@ -318,7 +390,7 @@ button.holo-card__rotator {
|
|
|
318
390
|
}
|
|
319
391
|
}
|
|
320
392
|
.holo-card[data-effect=holo] .holo-card__glare {
|
|
321
|
-
opacity: calc(var(--card-opacity) * 0.8);
|
|
393
|
+
opacity: calc(var(--card-opacity) * 0.8 * var(--hc-glare-opacity));
|
|
322
394
|
filter: brightness(0.8) contrast(1.5);
|
|
323
395
|
mix-blend-mode: overlay;
|
|
324
396
|
}
|
|
@@ -360,12 +432,12 @@ button.holo-card__rotator {
|
|
|
360
432
|
center center,
|
|
361
433
|
calc(100% * var(--pointer-from-left)) calc(100% * var(--pointer-from-top)),
|
|
362
434
|
center center;
|
|
363
|
-
filter: brightness(var(--foil-brightness)) contrast(1.5) saturate(
|
|
435
|
+
filter: brightness(calc(var(--foil-brightness) * var(--hc-brightness))) contrast(calc(1.5 * var(--hc-contrast))) saturate(var(--hc-saturate));
|
|
364
436
|
mix-blend-mode: color-dodge;
|
|
365
|
-
opacity: calc((1.5 * var(--card-opacity)) - var(--pointer-from-center));
|
|
437
|
+
opacity: calc(((1.5 * var(--card-opacity)) - var(--pointer-from-center)) * var(--hc-shine-opacity));
|
|
366
438
|
}
|
|
367
439
|
.holo-card[data-effect=reverse] .holo-card__glare {
|
|
368
|
-
opacity: var(--card-opacity);
|
|
440
|
+
opacity: calc(var(--card-opacity) * var(--hc-glare-opacity));
|
|
369
441
|
background-image:
|
|
370
442
|
radial-gradient(
|
|
371
443
|
farthest-corner circle at var(--pointer-x) var(--pointer-y),
|
|
@@ -390,12 +462,15 @@ button.holo-card__rotator {
|
|
|
390
462
|
}
|
|
391
463
|
|
|
392
464
|
/* src/styles/effects/cosmos.css */
|
|
393
|
-
.holo-card[data-effect=cosmos]
|
|
465
|
+
.holo-card[data-effect=cosmos] {
|
|
394
466
|
--space: 4%;
|
|
467
|
+
--angle: 82deg;
|
|
468
|
+
}
|
|
469
|
+
.holo-card[data-effect=cosmos] .holo-card__shine {
|
|
395
470
|
background-image:
|
|
396
471
|
var(--hc-cosmos-bottom),
|
|
397
472
|
repeating-linear-gradient(
|
|
398
|
-
|
|
473
|
+
var(--angle),
|
|
399
474
|
hsl(53, 65%, 60%) calc(var(--space) * 1),
|
|
400
475
|
hsl(93, 56%, 50%) calc(var(--space) * 2),
|
|
401
476
|
hsl(176, 54%, 49%) calc(var(--space) * 3),
|
|
@@ -422,7 +497,7 @@ button.holo-card__rotator {
|
|
|
422
497
|
cover,
|
|
423
498
|
400% 900%,
|
|
424
499
|
cover;
|
|
425
|
-
filter: brightness(
|
|
500
|
+
filter: brightness(var(--hc-brightness)) contrast(var(--hc-contrast)) saturate(calc(0.8 * var(--hc-saturate)));
|
|
426
501
|
mix-blend-mode: color-dodge;
|
|
427
502
|
}
|
|
428
503
|
.holo-card[data-effect=cosmos] .holo-card__shine::before {
|
|
@@ -431,7 +506,7 @@ button.holo-card__rotator {
|
|
|
431
506
|
background-image:
|
|
432
507
|
var(--hc-cosmos-middle),
|
|
433
508
|
repeating-linear-gradient(
|
|
434
|
-
|
|
509
|
+
var(--angle),
|
|
435
510
|
hsl(53, 65%, 60%) calc(var(--space) * 1),
|
|
436
511
|
hsl(93, 56%, 50%) calc(var(--space) * 2),
|
|
437
512
|
hsl(176, 54%, 49%) calc(var(--space) * 3),
|
|
@@ -462,7 +537,7 @@ button.holo-card__rotator {
|
|
|
462
537
|
background-image:
|
|
463
538
|
var(--hc-cosmos-top),
|
|
464
539
|
repeating-linear-gradient(
|
|
465
|
-
|
|
540
|
+
var(--angle),
|
|
466
541
|
hsl(53, 65%, 60%) calc(var(--space) * 1),
|
|
467
542
|
hsl(93, 56%, 50%) calc(var(--space) * 2),
|
|
468
543
|
hsl(176, 54%, 49%) calc(var(--space) * 3),
|
|
@@ -495,7 +570,7 @@ button.holo-card__rotator {
|
|
|
495
570
|
hsla(250, 15%, 20%, 1) 150%);
|
|
496
571
|
filter: brightness(0.75) contrast(2) saturate(2);
|
|
497
572
|
mix-blend-mode: overlay;
|
|
498
|
-
opacity: calc(var(--card-opacity) * (0.25 + var(--pointer-from-center)));
|
|
573
|
+
opacity: calc(var(--card-opacity) * (0.25 + var(--pointer-from-center)) * var(--hc-glare-opacity));
|
|
499
574
|
}
|
|
500
575
|
.holo-card[data-effect=cosmos] .holo-card__glare::after {
|
|
501
576
|
content: "";
|
|
@@ -528,7 +603,7 @@ button.holo-card__rotator {
|
|
|
528
603
|
55% 55%,
|
|
529
604
|
center center;
|
|
530
605
|
background-blend-mode: soft-light, color-burn;
|
|
531
|
-
filter: brightness(
|
|
606
|
+
filter: brightness(var(--hc-brightness)) contrast(var(--hc-contrast)) saturate(calc(0.9 * var(--hc-saturate)));
|
|
532
607
|
}
|
|
533
608
|
.holo-card[data-effect=glitter] .holo-card__shine::before {
|
|
534
609
|
content: "";
|
|
@@ -586,7 +661,9 @@ button.holo-card__rotator {
|
|
|
586
661
|
.holo-card--masked[data-effect=glitter] .holo-card__glare::after {
|
|
587
662
|
content: "";
|
|
588
663
|
mask-image: var(--mask);
|
|
589
|
-
mask-size:
|
|
664
|
+
mask-size: var(--mask-size);
|
|
665
|
+
mask-position: var(--mask-position);
|
|
666
|
+
mask-repeat: var(--mask-repeat);
|
|
590
667
|
background-image:
|
|
591
668
|
radial-gradient(
|
|
592
669
|
farthest-corner circle at var(--pointer-x) var(--pointer-y),
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { HoloCard } from "./holo-card.js";
|
|
2
2
|
import { buildHoloCardElement } from "./dom.js";
|
|
3
3
|
export { HoloCard } from "./holo-card.js";
|
|
4
|
-
export { buildHoloCardElement, CLASS } from "./dom.js";
|
|
4
|
+
export { buildHoloCardElement, buildLayerElement, applyVars, normalizeMask, CLASS } from "./dom.js";
|
|
5
5
|
export { generateTextures, texturesToCssVariables, grainTexture, glitterTexture, TEXTURE_VARIABLES, DEFAULT_TEXTURE_SEED, } from "./textures.js";
|
|
6
6
|
export { subscribeOrientation, requestOrientationPermission, resetBaseOrientation, } from "./orientation.js";
|
|
7
7
|
export { getActiveCard, setActiveCard, subscribeActiveCard } from "./active-registry.js";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAAqB,MAAM,UAAU,CAAC;AACvH,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,oBAAoB,GAGrB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,oBAAoB,EACpB,4BAA4B,EAC5B,oBAAoB,GAGrB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AACzF,OAAO,EAAE,MAAM,EAA8E,MAAM,aAAa,CAAC;AACjH,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAejD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,OAA8B,EAAY,EAAE;IACzE,MAAM,OAAO,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC9C,OAAO,IAAI,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,OAAoB,EAAE,UAA2B,EAAE,EAAY,EAAE,CAC9F,IAAI,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC"}
|
package/dist/spring.js
CHANGED
|
@@ -1,21 +1,32 @@
|
|
|
1
1
|
import { loop, now } from "./ticker.js";
|
|
2
2
|
import { Subscribers } from "./subscribers.js";
|
|
3
|
-
const tickScalar = (ctx, lastValue, currentValue, targetValue) => {
|
|
3
|
+
const tickScalar = (ctx, axis, lastValue, currentValue, targetValue) => {
|
|
4
4
|
const delta = targetValue - currentValue;
|
|
5
5
|
const velocity = (currentValue - lastValue) / (ctx.dt || 1 / 60);
|
|
6
|
-
const spring =
|
|
7
|
-
const damper =
|
|
6
|
+
const spring = axis.stiffness * delta;
|
|
7
|
+
const damper = axis.damping * velocity;
|
|
8
8
|
const acceleration = (spring - damper) * ctx.invMass;
|
|
9
9
|
const d = (velocity + acceleration) * ctx.dt;
|
|
10
|
-
if (Math.abs(d) <
|
|
10
|
+
if (Math.abs(d) < axis.precision && Math.abs(delta) < axis.precision) {
|
|
11
11
|
return targetValue;
|
|
12
12
|
}
|
|
13
13
|
ctx.settled = false;
|
|
14
14
|
return currentValue + d;
|
|
15
15
|
};
|
|
16
|
+
const resolveAxis = (ctx, key) => {
|
|
17
|
+
const override = ctx.axes?.[key];
|
|
18
|
+
if (!override) {
|
|
19
|
+
return ctx;
|
|
20
|
+
}
|
|
21
|
+
return {
|
|
22
|
+
stiffness: override.stiffness ?? ctx.stiffness,
|
|
23
|
+
damping: override.damping ?? ctx.damping,
|
|
24
|
+
precision: override.precision ?? ctx.precision,
|
|
25
|
+
};
|
|
26
|
+
};
|
|
16
27
|
const tick = (ctx, last, current, target) => {
|
|
17
28
|
if (typeof current === "number") {
|
|
18
|
-
return tickScalar(ctx, last, current, target);
|
|
29
|
+
return tickScalar(ctx, ctx, last, current, target);
|
|
19
30
|
}
|
|
20
31
|
const cur = current;
|
|
21
32
|
const lst = last;
|
|
@@ -23,7 +34,7 @@ const tick = (ctx, last, current, target) => {
|
|
|
23
34
|
const result = {};
|
|
24
35
|
for (const key in cur) {
|
|
25
36
|
const c = cur[key] ?? 0;
|
|
26
|
-
result[key] = tickScalar(ctx, lst[key] ?? c, c, tgt[key] ?? c);
|
|
37
|
+
result[key] = tickScalar(ctx, resolveAxis(ctx, key), lst[key] ?? c, c, tgt[key] ?? c);
|
|
27
38
|
}
|
|
28
39
|
return result;
|
|
29
40
|
};
|
|
@@ -31,6 +42,7 @@ export class Spring {
|
|
|
31
42
|
stiffness;
|
|
32
43
|
damping;
|
|
33
44
|
precision;
|
|
45
|
+
axes;
|
|
34
46
|
value;
|
|
35
47
|
lastValue;
|
|
36
48
|
targetValue;
|
|
@@ -48,6 +60,7 @@ export class Spring {
|
|
|
48
60
|
this.stiffness = opts.stiffness ?? 0.15;
|
|
49
61
|
this.damping = opts.damping ?? 0.8;
|
|
50
62
|
this.precision = opts.precision ?? 0.01;
|
|
63
|
+
this.axes = opts.axes;
|
|
51
64
|
}
|
|
52
65
|
get current() {
|
|
53
66
|
return this.value;
|
|
@@ -94,6 +107,7 @@ export class Spring {
|
|
|
94
107
|
stiffness: this.stiffness,
|
|
95
108
|
damping: this.damping,
|
|
96
109
|
precision: this.precision,
|
|
110
|
+
axes: this.axes,
|
|
97
111
|
settled: true,
|
|
98
112
|
dt: ((time - this.lastTime) * 60) / 1000,
|
|
99
113
|
};
|
package/dist/spring.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spring.js","sourceRoot":"","sources":["../src/spring.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAmB,MAAM,aAAa,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"spring.js","sourceRoot":"","sources":["../src/spring.ts"],"names":[],"mappings":"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"}
|
package/dist-types/dom.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { CreateHoloCardOptions } from "./types.js";
|
|
1
|
+
import type { CreateHoloCardOptions, CssVars, HoloLayerOptions, MaskOptions } from "./types.js";
|
|
2
2
|
export declare const CLASS: {
|
|
3
3
|
readonly root: "holo-card";
|
|
4
4
|
readonly translater: "holo-card__translater";
|
|
@@ -6,6 +6,10 @@ export declare const CLASS: {
|
|
|
6
6
|
readonly front: "holo-card__front";
|
|
7
7
|
readonly back: "holo-card__back";
|
|
8
8
|
readonly image: "holo-card__image";
|
|
9
|
+
readonly content: "holo-card__content";
|
|
10
|
+
readonly layers: "holo-card__layers";
|
|
11
|
+
readonly layer: "holo-card__layer";
|
|
12
|
+
readonly overlay: "holo-card__overlay";
|
|
9
13
|
readonly shine: "holo-card__shine";
|
|
10
14
|
readonly glare: "holo-card__glare";
|
|
11
15
|
readonly interactive: "holo-card--interactive";
|
|
@@ -13,6 +17,18 @@ export declare const CLASS: {
|
|
|
13
17
|
readonly interacting: "holo-card--interacting";
|
|
14
18
|
readonly loading: "holo-card--loading";
|
|
15
19
|
readonly masked: "holo-card--masked";
|
|
20
|
+
readonly maskCard: "holo-card--mask-card";
|
|
21
|
+
readonly overlayInteractive: "holo-card__overlay--interactive";
|
|
16
22
|
};
|
|
23
|
+
export declare const applyVars: (element: HTMLElement, vars: CssVars | undefined) => void;
|
|
24
|
+
export interface ResolvedMask {
|
|
25
|
+
image: string | undefined;
|
|
26
|
+
size: string | undefined;
|
|
27
|
+
position: string | undefined;
|
|
28
|
+
repeat: string | undefined;
|
|
29
|
+
mode: NonNullable<MaskOptions["mode"]>;
|
|
30
|
+
}
|
|
31
|
+
export declare const normalizeMask: (mask: string | MaskOptions | undefined) => ResolvedMask | null;
|
|
32
|
+
export declare const buildLayerElement: (doc: Document, layer: HoloLayerOptions) => HTMLElement;
|
|
17
33
|
export declare const buildHoloCardElement: (options: CreateHoloCardOptions) => HTMLElement;
|
|
18
34
|
//# sourceMappingURL=dom.d.ts.map
|
package/dist-types/dom.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,OAAO,EAAe,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE7G,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;CAoBR,CAAC;AASX,eAAO,MAAM,SAAS,GAAI,SAAS,WAAW,EAAE,MAAM,OAAO,GAAG,SAAS,KAAG,IAQ3E,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,IAAI,EAAE,WAAW,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,aAAa,GAAI,MAAM,MAAM,GAAG,WAAW,GAAG,SAAS,KAAG,YAAY,GAAG,IAerF,CAAC;AAcF,eAAO,MAAM,iBAAiB,GAAI,KAAK,QAAQ,EAAE,OAAO,gBAAgB,KAAG,WA6B1E,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,SAAS,qBAAqB,KAAG,WAmFrE,CAAC"}
|
|
@@ -1,14 +1,30 @@
|
|
|
1
|
-
import type { HoloCardOptions } from "./types.js";
|
|
1
|
+
import type { CssVars, HoloCardOptions, HoloLayerOptions, VisualOptions } from "./types.js";
|
|
2
2
|
export declare class HoloCard {
|
|
3
3
|
readonly element: HTMLElement;
|
|
4
4
|
private readonly rotator;
|
|
5
|
+
private frontElement;
|
|
6
|
+
private layersElement;
|
|
5
7
|
private readonly options;
|
|
6
8
|
private readonly springRotate;
|
|
7
9
|
private readonly springGlare;
|
|
8
10
|
private readonly springBackground;
|
|
11
|
+
private readonly springPointer;
|
|
9
12
|
private readonly springRotateDelta;
|
|
10
13
|
private readonly springTranslate;
|
|
11
14
|
private readonly springScale;
|
|
15
|
+
private readonly liveRotate;
|
|
16
|
+
private readonly liveGlare;
|
|
17
|
+
private readonly liveBackground;
|
|
18
|
+
private readonly livePointer;
|
|
19
|
+
private readonly snapDynamics;
|
|
20
|
+
private readonly tiltFactorX;
|
|
21
|
+
private readonly tiltFactorY;
|
|
22
|
+
private readonly tiltScaleX;
|
|
23
|
+
private readonly tiltScaleY;
|
|
24
|
+
private readonly parallax;
|
|
25
|
+
private readonly glareRange;
|
|
26
|
+
private readonly returnDelay;
|
|
27
|
+
private readonly showcaseConfig;
|
|
12
28
|
private isInteracting;
|
|
13
29
|
private firstPop;
|
|
14
30
|
private isVisible;
|
|
@@ -25,11 +41,15 @@ export declare class HoloCard {
|
|
|
25
41
|
private readonly cleanups;
|
|
26
42
|
private unsubscribeOrientation;
|
|
27
43
|
constructor(element: HTMLElement, options?: HoloCardOptions);
|
|
44
|
+
private applyVisual;
|
|
28
45
|
private applyStaticStyles;
|
|
29
46
|
private enableInteractive;
|
|
47
|
+
private parallaxBackground;
|
|
48
|
+
private rangeGlare;
|
|
30
49
|
private interact;
|
|
31
50
|
private interactEnd;
|
|
32
|
-
private
|
|
51
|
+
private setGroupDynamics;
|
|
52
|
+
private applyLiveDynamics;
|
|
33
53
|
private settle;
|
|
34
54
|
private updateSprings;
|
|
35
55
|
private setInteracting;
|
|
@@ -52,6 +72,17 @@ export declare class HoloCard {
|
|
|
52
72
|
activate(): void;
|
|
53
73
|
deactivate(): void;
|
|
54
74
|
setEffect(effect: HoloCardOptions["effect"]): void;
|
|
75
|
+
/** The `.holo-card__front` element, for appending custom content at runtime. */
|
|
76
|
+
get front(): HTMLElement | null;
|
|
77
|
+
/** Apply CSS custom properties to the root element (for content linkage). */
|
|
78
|
+
setVars(vars: CssVars): void;
|
|
79
|
+
/** Update fine-grained visual controls at runtime. */
|
|
80
|
+
setVisual(visual: VisualOptions): void;
|
|
81
|
+
/**
|
|
82
|
+
* Insert an extra layer between the artwork and the foil at runtime, returning
|
|
83
|
+
* the created element. Requires the card to have a `.holo-card__front`.
|
|
84
|
+
*/
|
|
85
|
+
addLayer(layer: HoloLayerOptions): HTMLElement;
|
|
55
86
|
get active(): boolean;
|
|
56
87
|
destroy(): void;
|
|
57
88
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"holo-card.d.ts","sourceRoot":"","sources":["../src/holo-card.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"holo-card.d.ts","sourceRoot":"","sources":["../src/holo-card.ts"],"names":[],"mappings":"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"}
|
package/dist-types/index.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { HoloCard } from "./holo-card.js";
|
|
2
2
|
import type { CreateHoloCardOptions, HoloCardOptions } from "./types.js";
|
|
3
3
|
export { HoloCard } from "./holo-card.js";
|
|
4
|
-
export { buildHoloCardElement, CLASS } from "./dom.js";
|
|
4
|
+
export { buildHoloCardElement, buildLayerElement, applyVars, normalizeMask, CLASS, type ResolvedMask } from "./dom.js";
|
|
5
5
|
export { generateTextures, texturesToCssVariables, grainTexture, glitterTexture, TEXTURE_VARIABLES, DEFAULT_TEXTURE_SEED, type Textures, type TextureOptions, } from "./textures.js";
|
|
6
6
|
export { subscribeOrientation, requestOrientationPermission, resetBaseOrientation, type Orientation, type RelativeOrientation, } from "./orientation.js";
|
|
7
7
|
export { getActiveCard, setActiveCard, subscribeActiveCard } from "./active-registry.js";
|
|
8
|
-
export { Spring, type SpringValue, type SpringOpts, type SpringSetOpts } from "./spring.js";
|
|
8
|
+
export { Spring, type SpringValue, type SpringOpts, type SpringSetOpts, type SpringDynamics } from "./spring.js";
|
|
9
9
|
export { round, clamp, adjust } from "./math.js";
|
|
10
|
-
export type { HoloEffect, HoloCardOptions, CreateHoloCardOptions } from "./types.js";
|
|
10
|
+
export type { HoloEffect, HoloCardOptions, CreateHoloCardOptions, HoloContent, CssVars, SpringTuning, PhysicsOptions, ShowcaseOptions, VisualOptions, MaskOptions, HoloLayerOptions, } from "./types.js";
|
|
11
11
|
export declare const createHoloCard: (options: CreateHoloCardOptions) => HoloCard;
|
|
12
12
|
export declare const attachHoloCard: (element: HTMLElement, options?: HoloCardOptions) => HoloCard;
|
|
13
13
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAEzE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAEzE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AACvH,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,oBAAoB,EACpB,KAAK,QAAQ,EACb,KAAK,cAAc,GACpB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,oBAAoB,EACpB,4BAA4B,EAC5B,oBAAoB,EACpB,KAAK,WAAW,EAChB,KAAK,mBAAmB,GACzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AACzF,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AACjH,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACjD,YAAY,EACV,UAAU,EACV,eAAe,EACf,qBAAqB,EACrB,WAAW,EACX,OAAO,EACP,YAAY,EACZ,cAAc,EACd,eAAe,EACf,aAAa,EACb,WAAW,EACX,gBAAgB,GACjB,MAAM,YAAY,CAAC;AAEpB,eAAO,MAAM,cAAc,GAAI,SAAS,qBAAqB,KAAG,QAG/D,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,SAAS,WAAW,EAAE,UAAS,eAAoB,KAAG,QACrD,CAAC"}
|
package/dist-types/spring.d.ts
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
export type SpringValue = number | Record<string, number>;
|
|
2
|
-
export interface
|
|
2
|
+
export interface SpringDynamics {
|
|
3
3
|
stiffness?: number;
|
|
4
4
|
damping?: number;
|
|
5
5
|
precision?: number;
|
|
6
6
|
}
|
|
7
|
+
export interface SpringOpts extends SpringDynamics {
|
|
8
|
+
/**
|
|
9
|
+
* Per-key dynamics overrides for object springs. Each key (e.g. `x`, `y`, `o`)
|
|
10
|
+
* may carry its own stiffness/damping/precision, giving asymmetric, independent
|
|
11
|
+
* motion per axis. Keys without an entry fall back to the base dynamics.
|
|
12
|
+
*/
|
|
13
|
+
axes?: Record<string, SpringDynamics>;
|
|
14
|
+
}
|
|
7
15
|
export interface SpringSetOpts {
|
|
8
16
|
hard?: boolean;
|
|
9
17
|
soft?: boolean | number;
|
|
@@ -12,6 +20,7 @@ export declare class Spring<T extends SpringValue> {
|
|
|
12
20
|
stiffness: number;
|
|
13
21
|
damping: number;
|
|
14
22
|
precision: number;
|
|
23
|
+
axes: Record<string, SpringDynamics> | undefined;
|
|
15
24
|
private value;
|
|
16
25
|
private lastValue;
|
|
17
26
|
private targetValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spring.d.ts","sourceRoot":"","sources":["../src/spring.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE1D,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"spring.d.ts","sourceRoot":"","sources":["../src/spring.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE1D,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACzB;AAiED,qBAAa,MAAM,CAAC,CAAC,SAAS,WAAW;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,GAAG,SAAS,CAAC;IAEjD,OAAO,CAAC,KAAK,CAAI;IACjB,OAAO,CAAC,SAAS,CAAI;IACrB,OAAO,CAAC,WAAW,CAAI;IACvB,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,mBAAmB,CAAK;IAChC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,IAAI,CAA2B;IACvC,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAwC;gBAExD,KAAK,EAAE,CAAC,EAAE,IAAI,GAAE,UAAe;IAU3C,IAAI,OAAO,IAAI,CAAC,CAEf;IAED,SAAS,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI;IAI7C,OAAO,CAAC,MAAM;IAId,GAAG,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI,GAAE,aAAkB,GAAG,OAAO,CAAC,IAAI,CAAC;IA6DzD,OAAO,IAAI,IAAI;CAMhB"}
|