@rtstic.dev/pulse 0.0.9 → 0.0.10
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/styles.css.map +2 -2
- package/dist/torch.js +1 -1
- package/dist/torch.js.map +3 -3
- package/package.json +1 -1
package/dist/styles.css.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/home/hero-animation/styles.css"],
|
|
4
|
-
"sourcesContent": ["/* Z-index hirearchy: */\n[pulse-animation-element=\"player-inner-elements\"]{\n z-index: 105;\n pointer-events: auto;\n}\n[pulse-animation-element=\"hero-wrapper\"]{\n z-index: 100;\n}\n[pulse-animation-element=\"hero-blur-overlay\"]{\n z-index: 95;\n}\n[pulse-animation-element=\"hero-blur\"]{\n z-index: 90;\n}\n[pulse-animation-element=\"radial-gradient-wrapper\"]{\n z-index: 70;\n opacity: 0;\n \n}\n[pulse-animation-element=\"canvas-wrapper\"]{\n z-index: 85;\n\n}\n[pulse-animation-element=\"player-wrapper\"]{\n z-index: 80; \n}\n\n#spline-container canvas{\n width: 100vw !important;\n}\n\n.spline-disc canvas{\n width: 1920px !important;\n height: 1080px !important;\n}\n\n#canvas3d{\n width: 100vw !important;\n /* height: 100vh !important; */\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.block-canvas{\n display: flex;\n justify-content: center;\n align-items: flex-end;\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n top: 48px;\n}\n\n.block_spline-3d {\n display: flex;\n position: sticky;\n top: 0px;\n height: 100vh;\n pointer-events: none;\n}\n\n.block_hero-text {\n position: absolute;\n inset: 0%;\n overflow: hidden;\n height: 100vh;\n pointer-events: auto;\n}\n\n.block_music-player{\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n /* overflow: visible; */\n}\n\n.canvas-helper{\n display : none;\n}\n\n/* scroll animation start */\n.scroll-section{\n position: relative;\n height: 350vh;\n pointer-events: none;\n /* background-color: rgba(255, 0, 0, 0.333); */\n}\n\n.box {\n width: 360px;\n height: 449px;\n background: rgba(11, 11, 11, 1);\n position: relative;\n}\n\n/* The SVG acts as the border */\n.box svg {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n display: block;\n overflow: visible;\n pointer-events: none;\n}\n\n[pulse-animation-element=\"player-elements\"]{\n position: absolute;\n inset: 0;\n}\n\n[pulse-animation-element=\"line-art\"]{\n background: transparent;\n}\n\n[pulse-animation-element=\"player-handle\"]{\n transform-origin: left center;\n transform: rotate(0deg);\n left: 70px;\n}\n\n[pulse-animation-element=\"player-handle-tail\"]{\n transform-origin: right center;\n transform: rotate(0deg);\n}\n\n/* [pulse-animation-element=\"radial-gradient\"]{\n background: radial-gradient(circle, #141414 0%, rgba(20, 20, 20, 0.9) 70%, rgba(20, 20, 20, 0.6) 80%, transparent 100%);\n opacity: 0.8;\n} */\n\n/* blue css */\n.blur-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0.8) 0%,\n rgba(0, 0, 0, 0) 100%\n );\n height: 100%;\n}\n\n.gradient-blur {\n position: absolute;\n inset: 0;\n backdrop-filter: blur(25px) brightness(1.2);\n -webkit-backdrop-filter: blur(25px) brightness(1.2);\n mask-image: linear-gradient(to top, rgba(0,0,0,0) 35%, rgba(0,0,0,1) 70%);\n -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 35%, rgba(0,0,0,1) 70%);\n height: 100%;\n}\n\n\n[pulse-animation-element='disc-spacer']{\n height: 80px;\n}\n\n.vignette{\n background: radial-gradient(circle, transparent 60%, rgba(0, 0, 0, 0.8) 100%);\n position: absolute;\n inset: 0;\n pointer-events: none; \n width: 100%;\n height: 100%;\n z-index: 89;\n}\n.vignite-bg{\nposition: absolute;\nz-index: 90;\nwidth: 100%;\nheight:100px;\n}\n\n/* \n.torch {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 91;\n background: rgba(0,0,0,var(--darkness, .75));\n opacity: 0;\n transition: opacity 160ms ease-out;\n\n -webkit-mask: radial-gradient(\n var(--torch-size, 480px) var(--torch-size, 480px)\n at var(--x, 50%) var(--y, 50%),\n transparent 0 var(--clear, 280px),\n white var(--torch-size, 480px)\n );\n mask: radial-gradient(\n var(--torch-size, 480px) var(--torch-size, 480px)\n at var(--x, 50%) var(--y, 50%),\n transparent 0 var(--clear, 280px),\n white var(--torch-size, 480px)\n );\n }\n\n #home-scroll:hover .torch { opacity: 1; } */\n\n #gallery {\n /* position: relative;\n overflow: hidden;\n box-shadow: 0 14px 44px rgba(0,0,0,.5);\n isolation: isolate; keep blending local */\n }\n /* Subtle global dim so the torch pops */\n #gallery::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, .024);\n z-index: 2;\n }\n\n /* Torch overlay that masks a circular window where darkness is removed */\n .torch {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 4;\n background: rgba(0,0,0,var(--darkness));\n opacity: 0;\n transition: opacity 160ms ease-out;\n -webkit-mask: radial-gradient(\n var(--torch-size) var(--torch-size) at var(--x) var(--y),\n transparent 0 var(--clear),\n white var(--torch-size)\n );\n mask: radial-gradient(\n var(--torch-size) var(--torch-size) at var(--x) var(--y),\n transparent 0 var(--clear),\n white var(--torch-size)\n );\n }\n\n #gallery:hover .torch { opacity: 1; }\n\n @media (pointer: coarse) {\n .torch { opacity: 1; }\n }\n @media (prefers-reduced-motion: reduce) {\n .torch { transition: none; }\n }"],
|
|
5
|
-
"mappings": ";AACA,CAAC;AACG,WAAS;AACT,kBAAgB;AACpB;AACA,CAAC;AACG,WAAS;AACb;AACA,CAAC;AACG,WAAS;AACb;AACA,CAAC;AACG,WAAS;AACb;AACA,CAAC;AACG,WAAS;AACT,WAAS;AAEb;AACA,CAAC;AACG,WAAS;AAEb;AACA,CAAC;AACG,WAAS;AACb;AAEA,CAAC,iBAAiB;AACd,SAAO;AACX;AAEA,CAAC,YAAY;AACT,SAAO;AACP,UAAQ;AACZ;AAEA,CAAC;AACG,SAAO;AAEP,UAAQ;AACR,WAAS;AACT,mBAAiB;AACjB,eAAa;AACjB;AAEA,CAAC;AACG,WAAS;AACT,mBAAiB;AACjB,eAAa;AACb,UAAQ;AACR,SAAO;AACP,YAAU;AACV,OAAK;AACT;AAEA,CAAC;AACG,WAAS;AACT,YAAU;AACV,OAAK;AACL,UAAQ;AACR,kBAAgB;AACpB;AAEA,CAAC;AACG,YAAU;AACV,SAAO;AACP,YAAU;AACV,UAAQ;AACR,kBAAgB;AACpB;AAEA,CAAC;AACG,YAAU;AACV,UAAQ;AACR,QAAM;AACN,SAAO;AACP,UAAQ;AAEZ;AAEA,CAAC;AACG,WAAU;AACd;AAGA,CAAC;AACG,YAAU;AACV,UAAQ;AACR,kBAAgB;AAEpB;AAEA,CAAC;AACG,SAAO;AACP,UAAQ;AACR,cAAY,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AAC7B,YAAU;AACd;AAGA,CARC,IAQI;AACD,YAAU;AACV,SAAO;AACP,SAAO;AACP,UAAQ;AACR,WAAS;AACT,YAAU;AACV,kBAAgB;AACpB;AAEA,CAAC;AACG,YAAU;AACV,SAAO;AACX;AAEA,CAAC;AACG,cAAY;AAChB;AAEA,CAAC;AACG,oBAAkB,KAAK;AACvB,aAAW,OAAO;AAClB,QAAM;AACV;AAEA,CAAC;AACG,oBAAkB,MAAM;AACxB,aAAW,OAAO;AACtB;AAQA,CAAC;AACG,YAAU;AACV,SAAO;AACP;AAAA,IAAY;AAAA,MACR,GAAG,MADK;AAAA,MAER,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAFX;AAAA,MAGR,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG;AAErB,UAAQ;AACZ;AAEA,CAAC;AACA,YAAU;AACL,SAAO;AACP,mBAAiB,KAAK,MAAM,WAAW;AACvC,2BAAyB,KAAK,MAAM,WAAW;AAC/C;AAAA,IAAY;AAAA,MAAgB,GAAG,GAAnB;AAAA,MAAwB,KAAK,CAAC,EAAC,CAAC,EAAC,CAAC,EAAC,GAAG,GAAtC;AAAA,MAA2C,KAAK,CAAC,EAAC,CAAC,EAAC,CAAC,EAAC,GAAG;AACrE;AAAA,IAAoB;AAAA,MAAgB,GAAG,GAAG;AAAA,MAAE,KAAK,CAAC,EAAC,CAAC,EAAC,CAAC,EAAC,GAAG,GAAG;AAAA,MAAE,KAAK,CAAC,EAAC,CAAC,EAAC,CAAC,EAAC,GAAG;AAC7E,UAAQ;AACd;AAGA,CAAC;AACG,UAAQ;AACZ;
|
|
4
|
+
"sourcesContent": ["/* Z-index hirearchy: */\n[pulse-animation-element=\"player-inner-elements\"]{\n z-index: 105;\n pointer-events: auto;\n}\n[pulse-animation-element=\"hero-wrapper\"]{\n z-index: 100;\n}\n[pulse-animation-element=\"hero-blur-overlay\"]{\n z-index: 95;\n}\n[pulse-animation-element=\"hero-blur\"]{\n z-index: 90;\n}\n[pulse-animation-element=\"radial-gradient-wrapper\"]{\n z-index: 70;\n opacity: 0;\n \n}\n[pulse-animation-element=\"canvas-wrapper\"]{\n z-index: 85;\n\n}\n[pulse-animation-element=\"player-wrapper\"]{\n z-index: 80; \n}\n\n#spline-container canvas{\n width: 100vw !important;\n}\n\n.spline-disc canvas{\n width: 1920px !important;\n height: 1080px !important;\n}\n\n#canvas3d{\n width: 100vw !important;\n /* height: 100vh !important; */\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.block-canvas{\n display: flex;\n justify-content: center;\n align-items: flex-end;\n height: 100vh;\n width: 100vw;\n overflow: hidden;\n top: 48px;\n}\n\n.block_spline-3d {\n display: flex;\n position: sticky;\n top: 0px;\n height: 100vh;\n pointer-events: none;\n}\n\n.block_hero-text {\n position: absolute;\n inset: 0%;\n overflow: hidden;\n height: 100vh;\n pointer-events: auto;\n}\n\n.block_music-player{\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n /* overflow: visible; */\n}\n\n.canvas-helper{\n display : none;\n}\n\n/* scroll animation start */\n.scroll-section{\n position: relative;\n height: 350vh;\n pointer-events: none;\n /* background-color: rgba(255, 0, 0, 0.333); */\n}\n\n.box {\n width: 360px;\n height: 449px;\n background: rgba(11, 11, 11, 1);\n position: relative;\n}\n\n/* The SVG acts as the border */\n.box svg {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n display: block;\n overflow: visible;\n pointer-events: none;\n}\n\n[pulse-animation-element=\"player-elements\"]{\n position: absolute;\n inset: 0;\n}\n\n[pulse-animation-element=\"line-art\"]{\n background: transparent;\n}\n\n[pulse-animation-element=\"player-handle\"]{\n transform-origin: left center;\n transform: rotate(0deg);\n left: 70px;\n}\n\n[pulse-animation-element=\"player-handle-tail\"]{\n transform-origin: right center;\n transform: rotate(0deg);\n}\n\n/* [pulse-animation-element=\"radial-gradient\"]{\n background: radial-gradient(circle, #141414 0%, rgba(20, 20, 20, 0.9) 70%, rgba(20, 20, 20, 0.6) 80%, transparent 100%);\n opacity: 0.8;\n} */\n\n/* blue css */\n.blur-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0.8) 0%,\n rgba(0, 0, 0, 0) 100%\n );\n height: 100%;\n}\n\n.gradient-blur {\n position: absolute;\n inset: 0;\n backdrop-filter: blur(25px) brightness(1.2);\n -webkit-backdrop-filter: blur(25px) brightness(1.2);\n mask-image: linear-gradient(to top, rgba(0,0,0,0) 35%, rgba(0,0,0,1) 70%);\n -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 35%, rgba(0,0,0,1) 70%);\n height: 100%;\n}\n\n\n[pulse-animation-element='disc-spacer']{\n height: 80px;\n}\n\n\n\n.vignette{\n background: radial-gradient(circle, transparent 60%, rgba(0, 0, 0, 0.8) 100%);\n position: absolute;\n inset: 0;\n pointer-events: none; \n width: 100%;\n height: 100%;\n z-index: 89;\n}\n.vignite-bg{\nposition: absolute;\nz-index: 90;\nwidth: 100%;\nheight:100px;\n}\n\n/* \n.torch {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 91;\n background: rgba(0,0,0,var(--darkness, .75));\n opacity: 0;\n transition: opacity 160ms ease-out;\n\n -webkit-mask: radial-gradient(\n var(--torch-size, 480px) var(--torch-size, 480px)\n at var(--x, 50%) var(--y, 50%),\n transparent 0 var(--clear, 280px),\n white var(--torch-size, 480px)\n );\n mask: radial-gradient(\n var(--torch-size, 480px) var(--torch-size, 480px)\n at var(--x, 50%) var(--y, 50%),\n transparent 0 var(--clear, 280px),\n white var(--torch-size, 480px)\n );\n }\n\n #home-scroll:hover .torch { opacity: 1; } */\n\n #gallery {\n /* position: relative;\n overflow: hidden;\n box-shadow: 0 14px 44px rgba(0,0,0,.5);\n isolation: isolate; keep blending local */\n }\n /* Subtle global dim so the torch pops */\n #gallery::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, .024);\n z-index: 2;\n }\n\n /* Torch overlay that masks a circular window where darkness is removed */\n .torch {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 4;\n background: rgba(0,0,0,var(--darkness));\n opacity: 0;\n transition: opacity 160ms ease-out;\n -webkit-mask: radial-gradient(\n var(--torch-size) var(--torch-size) at var(--x) var(--y),\n transparent 0 var(--clear),\n white var(--torch-size)\n );\n mask: radial-gradient(\n var(--torch-size) var(--torch-size) at var(--x) var(--y),\n transparent 0 var(--clear),\n white var(--torch-size)\n );\n }\n\n #gallery:hover .torch { opacity: 1; }\n\n @media (pointer: coarse) {\n .torch { opacity: 1; }\n }\n @media (prefers-reduced-motion: reduce) {\n .torch { transition: none; }\n }"],
|
|
5
|
+
"mappings": ";AACA,CAAC;AACG,WAAS;AACT,kBAAgB;AACpB;AACA,CAAC;AACG,WAAS;AACb;AACA,CAAC;AACG,WAAS;AACb;AACA,CAAC;AACG,WAAS;AACb;AACA,CAAC;AACG,WAAS;AACT,WAAS;AAEb;AACA,CAAC;AACG,WAAS;AAEb;AACA,CAAC;AACG,WAAS;AACb;AAEA,CAAC,iBAAiB;AACd,SAAO;AACX;AAEA,CAAC,YAAY;AACT,SAAO;AACP,UAAQ;AACZ;AAEA,CAAC;AACG,SAAO;AAEP,UAAQ;AACR,WAAS;AACT,mBAAiB;AACjB,eAAa;AACjB;AAEA,CAAC;AACG,WAAS;AACT,mBAAiB;AACjB,eAAa;AACb,UAAQ;AACR,SAAO;AACP,YAAU;AACV,OAAK;AACT;AAEA,CAAC;AACG,WAAS;AACT,YAAU;AACV,OAAK;AACL,UAAQ;AACR,kBAAgB;AACpB;AAEA,CAAC;AACG,YAAU;AACV,SAAO;AACP,YAAU;AACV,UAAQ;AACR,kBAAgB;AACpB;AAEA,CAAC;AACG,YAAU;AACV,UAAQ;AACR,QAAM;AACN,SAAO;AACP,UAAQ;AAEZ;AAEA,CAAC;AACG,WAAU;AACd;AAGA,CAAC;AACG,YAAU;AACV,UAAQ;AACR,kBAAgB;AAEpB;AAEA,CAAC;AACG,SAAO;AACP,UAAQ;AACR,cAAY,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AAC7B,YAAU;AACd;AAGA,CARC,IAQI;AACD,YAAU;AACV,SAAO;AACP,SAAO;AACP,UAAQ;AACR,WAAS;AACT,YAAU;AACV,kBAAgB;AACpB;AAEA,CAAC;AACG,YAAU;AACV,SAAO;AACX;AAEA,CAAC;AACG,cAAY;AAChB;AAEA,CAAC;AACG,oBAAkB,KAAK;AACvB,aAAW,OAAO;AAClB,QAAM;AACV;AAEA,CAAC;AACG,oBAAkB,MAAM;AACxB,aAAW,OAAO;AACtB;AAQA,CAAC;AACG,YAAU;AACV,SAAO;AACP;AAAA,IAAY;AAAA,MACR,GAAG,MADK;AAAA,MAER,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAFX;AAAA,MAGR,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG;AAErB,UAAQ;AACZ;AAEA,CAAC;AACA,YAAU;AACL,SAAO;AACP,mBAAiB,KAAK,MAAM,WAAW;AACvC,2BAAyB,KAAK,MAAM,WAAW;AAC/C;AAAA,IAAY;AAAA,MAAgB,GAAG,GAAnB;AAAA,MAAwB,KAAK,CAAC,EAAC,CAAC,EAAC,CAAC,EAAC,GAAG,GAAtC;AAAA,MAA2C,KAAK,CAAC,EAAC,CAAC,EAAC,CAAC,EAAC,GAAG;AACrE;AAAA,IAAoB;AAAA,MAAgB,GAAG,GAAG;AAAA,MAAE,KAAK,CAAC,EAAC,CAAC,EAAC,CAAC,EAAC,GAAG,GAAG;AAAA,MAAE,KAAK,CAAC,EAAC,CAAC,EAAC,CAAC,EAAC,GAAG;AAC7E,UAAQ;AACd;AAGA,CAAC;AACG,UAAQ;AACZ;AAIA,CAAC;AACI;AAAA,IAAY;AAAA,MAAgB,MAAM;AAAA,MAAE,YAAY,GAAG;AAAA,MAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK;AACxE,YAAU;AACV,SAAO;AACP,kBAAgB;AAChB,SAAO;AACP,UAAQ;AACR,WAAS;AACd;AACA,CAAC;AACD,YAAU;AACV,WAAS;AACT,SAAO;AACP,UAAO;AACP;AA4BI,CAAC;AAKH;AAEA,CAPG,OAOK;AACN,WAAS;AACT,YAAU;AACV,SAAO;AACP,cAAY,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC1B,WAAS;AACX;AAGA,CAAC;AACC,YAAU;AACV,SAAO;AACP,kBAAgB;AAChB,WAAS;AACT,cAAY,KAAK,CAAC,EAAC,CAAC,EAAC,CAAC,EAAC,IAAI;AAC3B,WAAS;AACT,cAAY,QAAQ,MAAM;AAC1B;AAAA,IAAc;AAAA,MACZ,IAAI,cAAc,IAAI,cAAc,GAAG,IAAI,KAAK,IAAI,IAAI;AAAA,MACxD,YAAY,EAAE,IAAI,QAAQ;AAAA,MAC1B,MAAM,IAAI;AAEJ;AAAA,IAAM;AAAA,MACZ,IAAI,cAAc,IAAI,cAAc,GAAG,IAAI,KAAK,IAAI,IAAI;AAAA,MACxD,YAAY,EAAE,IAAI,QAAQ;AAAA,MAC1B,MAAM,IAAI;AAEd;AAEA,CApCG,OAoCK,OAAO,CApBd;AAoBuB,WAAS;AAAG;AAEpC,OAAO,CAAC,OAAO,EAAE;AACf,GAvBD;AAuBU,aAAS;AAAG;AACvB;AACA,OAAO,CAAC,sBAAsB,EAAE;AAC9B,GA1BD;AA0BU,gBAAY;AAAM;AAC7B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/torch.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(()=>{var i={darkness:.
|
|
1
|
+
"use strict";(()=>{var i={darkness:.5,torchSize:520,clear:300},t=document.getElementById("gallery"),n=document.getElementById("trigger-gallery"),E=document.getElementById("grid"),c=t?.querySelector(".torch");t.style.setProperty("--darkness",String(i.darkness));t.style.setProperty("--torch-size",`${i.torchSize}px`);t.style.setProperty("--clear",`${i.clear}px`);var a=e=>Math.max(0,Math.min(1,e)),u=(e,o)=>{let r=n.getBoundingClientRect(),d=t.getBoundingClientRect(),g=a((e-r.left)/r.width),h=a((o-r.top)/r.height),v=g*d.width,p=h*d.height;t.style.setProperty("--x",`${v}px`),t.style.setProperty("--y",`${p}px`)},y=()=>{let e=t.getBoundingClientRect();t.style.setProperty("--x",`${e.width/2}px`),t.style.setProperty("--y",`${e.height/2}px`)};y();var s=()=>{c&&(c.style.opacity="1")},l=()=>{c&&(c.style.opacity="0"),y()};n&&(n.addEventListener("mousemove",e=>{s(),u(e.clientX,e.clientY)}),n.addEventListener("mouseenter",s),n.addEventListener("mouseleave",l));var m=e=>u(e.clientX,e.clientY);n?.addEventListener("touchstart",e=>{s(),m(e.touches[0])},{passive:!0});n?.addEventListener("touchmove",e=>m(e.touches[0]),{passive:!0});n?.addEventListener("touchend",l);n||(t.addEventListener("mousemove",e=>{let o=t.getBoundingClientRect();t.style.setProperty("--x",`${e.clientX-o.left}px`),t.style.setProperty("--y",`${e.clientY-o.top}px`),s()}),t.addEventListener("mouseleave",l),t.addEventListener("mouseenter",s));})();
|
package/dist/torch.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": [],
|
|
4
|
-
"sourcesContent": [],
|
|
5
|
-
"mappings": "",
|
|
3
|
+
"sources": ["../src/home/hero-animation/torch.ts"],
|
|
4
|
+
"sourcesContent": ["const config: { darkness: number; torchSize: number; clear: number } = { darkness: 0.5, torchSize: 520, clear: 300 };\n\nconst section = document.getElementById('gallery') as HTMLElement;\nconst triggerSection = document.getElementById('trigger-gallery') as HTMLElement | null;\nconst grid = document.getElementById('grid') as HTMLElement | null;\nconst torch = section?.querySelector('.torch') as HTMLElement | null;\n\n\n// Apply config\nsection.style.setProperty('--darkness', String(config.darkness));\nsection.style.setProperty('--torch-size', `${config.torchSize}px`);\nsection.style.setProperty('--clear', `${config.clear}px`);\n\n// Helper to clamp between 0 and 1\nconst clamp01 = (v: number): number => Math.max(0, Math.min(1, v));\n\n// Map a point in the trigger to a point in the gallery\nconst setFromTriggerPoint = (clientX: number, clientY: number): void => {\n const tRect: DOMRect = (triggerSection as HTMLElement).getBoundingClientRect();\n const gRect: DOMRect = section.getBoundingClientRect();\n\n // Relative position inside trigger (0..1)\n const rx = clamp01((clientX - tRect.left) / tRect.width);\n const ry = clamp01((clientY - tRect.top) / tRect.height);\n\n // Map to gallery pixel coords\n const gx = rx * gRect.width;\n const gy = ry * gRect.height;\n\n section.style.setProperty('--x', `${gx}px`);\n section.style.setProperty('--y', `${gy}px`);\n};\n\n// Center by default\nconst centerTorch = (): void => {\n const gRect: DOMRect = section.getBoundingClientRect();\n section.style.setProperty('--x', `${gRect.width / 2}px`);\n section.style.setProperty('--y', `${gRect.height / 2}px`);\n};\ncenterTorch();\n\n// Show/Hide behavior tied to trigger\nconst showTorch = (): void => { if (torch) torch.style.opacity = '1'; };\nconst hideTorch = (): void => { if (torch) torch.style.opacity = '0'; centerTorch(); };\n\n// Mouse events on the trigger control the torch on the gallery\nif (triggerSection) {\n triggerSection.addEventListener('mousemove', (e: MouseEvent) => {\n showTorch();\n setFromTriggerPoint(e.clientX, e.clientY);\n });\n triggerSection.addEventListener('mouseenter', showTorch);\n triggerSection.addEventListener('mouseleave', hideTorch);\n}\n\n// Touch support on the trigger\nconst moveTouch = (touch: Touch): void => setFromTriggerPoint(touch.clientX, touch.clientY);\ntriggerSection?.addEventListener('touchstart', (e: TouchEvent) => { showTorch(); moveTouch(e.touches[0]); }, { passive: true } as AddEventListenerOptions);\ntriggerSection?.addEventListener('touchmove', (e: TouchEvent) => moveTouch(e.touches[0]), { passive: true } as AddEventListenerOptions);\ntriggerSection?.addEventListener('touchend', hideTorch as EventListener);\n\n// Fallback: if no trigger found for any reason, allow direct gallery control\nif (!triggerSection) {\n section.addEventListener('mousemove', (e: MouseEvent) => {\n const r: DOMRect = section.getBoundingClientRect();\n section.style.setProperty('--x', `${e.clientX - r.left}px`);\n section.style.setProperty('--y', `${e.clientY - r.top}px`);\n showTorch();\n });\n section.addEventListener('mouseleave', hideTorch);\n section.addEventListener('mouseenter', showTorch);\n}"],
|
|
5
|
+
"mappings": ";;;AAAA,MAAM,SAAiE,EAAE,UAAU,KAAK,WAAW,KAAK,OAAO,IAAI;AAEnH,MAAM,UAAU,SAAS,eAAe,SAAS;AACjD,MAAM,iBAAiB,SAAS,eAAe,iBAAiB;AAChE,MAAM,OAAO,SAAS,eAAe,MAAM;AAC3C,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAI7C,UAAQ,MAAM,YAAY,cAAc,OAAO,OAAO,QAAQ,CAAC;AAC/D,UAAQ,MAAM,YAAY,gBAAgB,GAAG,OAAO,SAAS,IAAI;AACjE,UAAQ,MAAM,YAAY,WAAW,GAAG,OAAO,KAAK,IAAI;AAGxD,MAAM,UAAU,CAAC,MAAsB,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,CAAC,CAAC;AAGjE,MAAM,sBAAsB,CAAC,SAAiB,YAA0B;AACpE,UAAM,QAAkB,eAA+B,sBAAsB;AAC7E,UAAM,QAAiB,QAAQ,sBAAsB;AAGrD,UAAM,KAAK,SAAS,UAAU,MAAM,QAAQ,MAAM,KAAK;AACvD,UAAM,KAAK,SAAS,UAAU,MAAM,OAAO,MAAM,MAAM;AAGvD,UAAM,KAAK,KAAK,MAAM;AACtB,UAAM,KAAK,KAAK,MAAM;AAEtB,YAAQ,MAAM,YAAY,OAAO,GAAG,EAAE,IAAI;AAC1C,YAAQ,MAAM,YAAY,OAAO,GAAG,EAAE,IAAI;AAAA,EAC9C;AAGA,MAAM,cAAc,MAAY;AAC5B,UAAM,QAAiB,QAAQ,sBAAsB;AACrD,YAAQ,MAAM,YAAY,OAAO,GAAG,MAAM,QAAQ,CAAC,IAAI;AACvD,YAAQ,MAAM,YAAY,OAAO,GAAG,MAAM,SAAS,CAAC,IAAI;AAAA,EAC5D;AACA,cAAY;AAGZ,MAAM,YAAY,MAAY;AAAE,QAAI,MAAO,OAAM,MAAM,UAAU;AAAA,EAAK;AACtE,MAAM,YAAY,MAAY;AAAE,QAAI,MAAO,OAAM,MAAM,UAAU;AAAK,gBAAY;AAAA,EAAG;AAGrF,MAAI,gBAAgB;AAChB,mBAAe,iBAAiB,aAAa,CAAC,MAAkB;AAC5D,gBAAU;AACV,0BAAoB,EAAE,SAAS,EAAE,OAAO;AAAA,IAC5C,CAAC;AACD,mBAAe,iBAAiB,cAAc,SAAS;AACvD,mBAAe,iBAAiB,cAAc,SAAS;AAAA,EAC3D;AAGA,MAAM,YAAY,CAAC,UAAuB,oBAAoB,MAAM,SAAS,MAAM,OAAO;AAC1F,kBAAgB,iBAAiB,cAAc,CAAC,MAAkB;AAAE,cAAU;AAAG,cAAU,EAAE,QAAQ,CAAC,CAAC;AAAA,EAAG,GAAG,EAAE,SAAS,KAAK,CAA4B;AACzJ,kBAAgB,iBAAiB,aAAa,CAAC,MAAkB,UAAU,EAAE,QAAQ,CAAC,CAAC,GAAG,EAAE,SAAS,KAAK,CAA4B;AACtI,kBAAgB,iBAAiB,YAAY,SAA0B;AAGvE,MAAI,CAAC,gBAAgB;AACjB,YAAQ,iBAAiB,aAAa,CAAC,MAAkB;AACrD,YAAM,IAAa,QAAQ,sBAAsB;AACjD,cAAQ,MAAM,YAAY,OAAO,GAAG,EAAE,UAAU,EAAE,IAAI,IAAI;AAC1D,cAAQ,MAAM,YAAY,OAAO,GAAG,EAAE,UAAU,EAAE,GAAG,IAAI;AACzD,gBAAU;AAAA,IACd,CAAC;AACD,YAAQ,iBAAiB,cAAc,SAAS;AAChD,YAAQ,iBAAiB,cAAc,SAAS;AAAA,EACpD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|