@rtstic.dev/pulse 0.0.10 → 0.0.12
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/depth.js +39 -0
- package/dist/depth.js.map +7 -0
- package/dist/hero-animation/scroll.js +43 -0
- package/dist/hero-animation/scroll.js.map +7 -0
- package/dist/hero-animation/styles.css +1 -0
- package/dist/hero-animation/styles.css.map +7 -0
- package/dist/hero-animation/torch.js +1 -0
- package/dist/hero-animation/torch.js.map +7 -0
- package/dist/styles.css.map +2 -2
- package/dist/tabs.js +1 -0
- package/dist/tabs.js.map +7 -0
- package/dist/torch.js +1 -1
- package/dist/torch.js.map +3 -3
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
[pulse-animation-element=player-inner-elements]{z-index:105;pointer-events:auto}[pulse-animation-element=hero-wrapper]{z-index:100}[pulse-animation-element=hero-blur-overlay]{z-index:95}[pulse-animation-element=hero-blur]{z-index:90}[pulse-animation-element=radial-gradient-wrapper]{z-index:70;opacity:0}[pulse-animation-element=canvas-wrapper]{z-index:85}[pulse-animation-element=player-wrapper]{z-index:80}#spline-container canvas{width:100vw!important}.spline-disc canvas{width:1920px!important;height:1080px!important}#canvas3d{width:100vw!important;height:100%;display:flex;justify-content:center;align-items:center}.block-canvas{display:flex;justify-content:center;align-items:flex-end;height:100vh;width:100vw;overflow:hidden;top:48px}.block_spline-3d{display:flex;position:sticky;top:0;height:100vh;pointer-events:none}.block_hero-text{position:absolute;inset:0%;overflow:hidden;height:100vh;pointer-events:auto}.block_music-player{position:absolute;bottom:0;left:0;width:100vw;height:100vh}.canvas-helper{display:none}.scroll-section{position:relative;height:350vh;pointer-events:none}.box{width:360px;height:449px;background:#0b0b0b;position:relative}.box svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;pointer-events:none}[pulse-animation-element=player-elements]{position:absolute;inset:0}[pulse-animation-element=line-art]{background:transparent}[pulse-animation-element=player-handle]{transform-origin:left center;transform:rotate(0);left:70px}[pulse-animation-element=player-handle-tail]{transform-origin:right center;transform:rotate(0)}.blur-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#000c,#0000);height:100%}.gradient-blur{position:absolute;inset:0;backdrop-filter:blur(25px) brightness(1.2);-webkit-backdrop-filter:blur(25px) brightness(1.2);mask-image:linear-gradient(to top,#0000 35%,#000 70%);-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 35%,rgba(0,0,0,1) 70%);height:100%}[pulse-animation-element=disc-spacer]{height:80px}.vignette{background:radial-gradient(circle,transparent 60%,rgba(0,0,0,.8) 100%);position:absolute;inset:0;pointer-events:none;width:100%;height:100%;z-index:89}.vignite-bg{position:absolute;z-index:90;width:100%;height:100px}#gallery:before{content:"";position:absolute;inset:0;background:#00000006;z-index:2}.torch{position:absolute;inset:0;pointer-events:none;z-index:4;background:rgba(0,0,0,var(--darkness));opacity:0;transition:opacity .16s ease-out;-webkit-mask:radial-gradient(var(--torch-size) var(--torch-size) at var(--x) var(--y),transparent 0 var(--clear),white var(--torch-size));mask:radial-gradient(var(--torch-size) var(--torch-size) at var(--x) var(--y),transparent 0 var(--clear),white var(--torch-size))}#gallery:hover .torch{opacity:1}@media (pointer: coarse){.torch{opacity:1}}@media (prefers-reduced-motion: reduce){.torch{transition:none}}@media (max-width: 500px){.spline-disc canvas{height:800px!important}#canvas3d{width:100vw!important}.box,.col-2-row-2-item-1{width:250px;height:320px}.block-canvas{top:30px}.column_absolute{justify-content:center;align-items:center}.player-progress{padding:12px 12px 18px}}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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\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 }\n\n\n @media (max-width: 500px) {\n .spline-disc canvas{\n height: 800px !important;\n }\n #canvas3d{\n width: 100vw !important;\n}\n\n\n.box {\n width: 250px;\n height: 320px;\n}\n.col-2-row-2-item-1 {\n width: 250px;\n height: 320px;\n}\n.block-canvas {\n top: 30px;\n}\n.column_absolute {\n justify-content: center;\n align-items: center;\n}\n.player-progress {\n padding: 12px;\n padding-bottom: 18px;\n}\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
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));})();
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
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
|
+
"names": []
|
|
7
|
+
}
|
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
|
|
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.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;AAEA,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/tabs.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";(()=>{var s="influur-tablink",b="influur-tabcontent",m="influur-tablink-active",h="influur-tablink-fill";function _(n){return!!n&&n.nodeType===Node.ELEMENT_NODE}function a(n,t){let l=n.getAttribute(t);if(l===null)return null;let o=l.trim();return o.length>0?o:null}function g(n,t=document){return Array.from(t.querySelectorAll(n)).filter(_)}function T(n){for(let t of n)t.style.display="none"}function F(n){for(let t of n)t.setAttribute(m,"false")}function I(n){n.style.display="block"}function O(n,t){for(let l of t){let o=a(l,b);if(o!==null&&o===n)return l}return null}function V(n,t){for(let l of t){let o=a(l,s);if(o!==null&&o===n)return l}return null}function y(n){return n.querySelector(`[${h}]`)??null}function $(n){for(let t of n){let l=y(t);l&&(l.style.width="0%")}}document.addEventListener("DOMContentLoaded",()=>{let n=g(`[${s}]`),t=g(`[${b}]`);if(t.length===0){console.warn("No tab contents found.");return}if(n.length===0){console.warn("No tab links found. Hiding all tab contents."),T(t);return}let l=0,o=null,u=null;function M(){u!==null&&(cancelAnimationFrame(u),u=null)}function H(e){M(),$(n);let r=y(e);if(!r){console.warn(`Active tablink is missing ${h} child`,e);return}let i=Math.max(0,1e3),f=performance.now(),E=k=>{let N=k-f,L=i===0?1:Math.min(1,N/i);r.style.width=`${(L*100).toFixed(4)}%`,e.getAttribute(m)==="true"&&L<1?u=requestAnimationFrame(E):u=null};r.style.width="0%",u=requestAnimationFrame(E)}let c=e=>{if(typeof e!="string"||e.trim().length===0){console.warn("changeTab called with invalid attributeValue:",e);return}T(t),F(n);let r=O(e,t),i=V(e,n);if(!r||!i){console.warn(`No matching pair found for value "${e}"`);return}I(r),i.setAttribute(m,"true");let f=n.indexOf(i);f>=0&&(l=f),H(i)};window.changeTab=c;for(let e of n)e.addEventListener("click",r=>{r.target?.closest("a")&&r.preventDefault();let i=a(e,s);if(i===null){console.warn(`Tablink missing valid ${s} value`,e);return}c(i),p()});let d=a(n[0],s);if(d===null){console.warn(`First tablink missing ${s} value. Hiding all tab contents.`),T(t);return}c(d);function v(){if(n.length===0)return;l=(l+1)%n.length;let e=a(n[l],s);e&&c(e)}function A(){w(),o=window.setInterval(v,1e3)}function w(){o!==null&&(clearInterval(o),o=null)}function p(){A()}A()});})();
|
package/dist/tabs.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/home/tabs.ts"],
|
|
4
|
+
"sourcesContent": ["type TabValue = string;\n\nconst TABLINK_ATTR = \"influur-tablink\";\nconst TABCONTENT_ATTR = \"influur-tabcontent\";\nconst ACTIVE_ATTR = \"influur-tablink-active\";\nconst FILL_ATTR = \"influur-tablink-fill\";\n\n// autoplay interval in milliseconds\nconst TAB_AUTOPLAY_INTERVAL = 1000;\n\nfunction isHTMLElement(node: Element | null): node is HTMLElement {\n return !!node && node.nodeType === Node.ELEMENT_NODE;\n}\n\nfunction getAttr(el: Element, attr: string): string | null {\n const val = el.getAttribute(attr);\n if (val === null) return null;\n const trimmed = val.trim();\n return trimmed.length > 0 ? trimmed : null;\n}\n\nfunction queryAllHTMLElements(selector: string, root: ParentNode = document): HTMLElement[] {\n return Array.from(root.querySelectorAll(selector)).filter(isHTMLElement);\n}\n\nfunction hideAllContents(contents: HTMLElement[]) {\n for (const c of contents) {\n c.style.display = \"none\";\n }\n}\n\nfunction deactivateAllLinks(tablinks: HTMLElement[]) {\n for (const l of tablinks) {\n l.setAttribute(ACTIVE_ATTR, \"false\");\n }\n}\n\nfunction showContent(el: HTMLElement) {\n el.style.display = \"block\";\n}\n\nfunction findContentByValue(value: TabValue, contents: HTMLElement[]): HTMLElement | null {\n for (const c of contents) {\n const v = getAttr(c, TABCONTENT_ATTR);\n if (v !== null && v === value) return c;\n }\n return null;\n}\n\nfunction findLinkByValue(value: TabValue, tablinks: HTMLElement[]): HTMLElement | null {\n for (const l of tablinks) {\n const v = getAttr(l, TABLINK_ATTR);\n if (v !== null && v === value) return l;\n }\n return null;\n}\n\nfunction getFillEl(link: HTMLElement): HTMLElement | null {\n const el = link.querySelector<HTMLElement>(`[${FILL_ATTR}]`);\n return el ?? null;\n}\n\nfunction resetAllFills(tablinks: HTMLElement[]) {\n for (const l of tablinks) {\n const fill = getFillEl(l);\n if (fill) fill.style.width = \"0%\";\n }\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n const tablinks = queryAllHTMLElements(`[${TABLINK_ATTR}]`);\n const contents = queryAllHTMLElements(`[${TABCONTENT_ATTR}]`);\n\n if (contents.length === 0) {\n console.warn(\"No tab contents found.\");\n return;\n }\n if (tablinks.length === 0) {\n console.warn(\"No tab links found. Hiding all tab contents.\");\n hideAllContents(contents);\n return;\n }\n\n let currentIndex = 0;\n let autoplayTimer: number | null = null;\n let rafId: number | null = null;\n\n function cancelFillAnimation() {\n if (rafId !== null) {\n cancelAnimationFrame(rafId);\n rafId = null;\n }\n }\n\n // Animate the fill element inside the active link from 0 to 100 percent over TAB_AUTOPLAY_INTERVAL\n function startFillAnimation(activeLink: HTMLElement) {\n cancelFillAnimation();\n resetAllFills(tablinks);\n\n const fill = getFillEl(activeLink);\n if (!fill) {\n console.warn(`Active tablink is missing ${FILL_ATTR} child`, activeLink);\n return;\n }\n\n const duration = Math.max(0, TAB_AUTOPLAY_INTERVAL);\n const start = performance.now();\n\n const tick = (now: number) => {\n const elapsed = now - start;\n const progress = duration === 0 ? 1 : Math.min(1, elapsed / duration);\n fill.style.width = `${(progress * 100).toFixed(4)}%`;\n\n if (activeLink.getAttribute(ACTIVE_ATTR) === \"true\" && progress < 1) {\n rafId = requestAnimationFrame(tick);\n } else {\n rafId = null;\n }\n };\n\n fill.style.width = \"0%\";\n rafId = requestAnimationFrame(tick);\n }\n\n const changeTab = (attributeValue: TabValue): void => {\n if (typeof attributeValue !== \"string\" || attributeValue.trim().length === 0) {\n console.warn(\"changeTab called with invalid attributeValue:\", attributeValue);\n return;\n }\n\n hideAllContents(contents);\n deactivateAllLinks(tablinks);\n\n const matchContent = findContentByValue(attributeValue, contents);\n const matchLink = findLinkByValue(attributeValue, tablinks);\n\n if (!matchContent || !matchLink) {\n console.warn(`No matching pair found for value \"${attributeValue}\"`);\n return;\n }\n\n showContent(matchContent);\n matchLink.setAttribute(ACTIVE_ATTR, \"true\");\n\n const index = tablinks.indexOf(matchLink);\n if (index >= 0) currentIndex = index;\n\n startFillAnimation(matchLink);\n };\n\n (window as unknown as { changeTab: (v: TabValue) => void }).changeTab = changeTab;\n\n for (const link of tablinks) {\n link.addEventListener(\"click\", (ev) => {\n if ((ev.target as HTMLElement)?.closest(\"a\")) ev.preventDefault();\n const val = getAttr(link, TABLINK_ATTR);\n if (val === null) {\n console.warn(`Tablink missing valid ${TABLINK_ATTR} value`, link);\n return;\n }\n changeTab(val);\n restartAutoplay();\n });\n }\n\n const firstVal = getAttr(tablinks[0], TABLINK_ATTR);\n if (firstVal === null) {\n console.warn(`First tablink missing ${TABLINK_ATTR} value. Hiding all tab contents.`);\n hideAllContents(contents);\n return;\n }\n\n changeTab(firstVal); // ensures initial fill animation starts\n\n function autoplayStep() {\n if (tablinks.length === 0) return;\n currentIndex = (currentIndex + 1) % tablinks.length;\n const val = getAttr(tablinks[currentIndex], TABLINK_ATTR);\n if (val) changeTab(val);\n }\n\n function startAutoplay() {\n stopAutoplayTimerOnly();\n autoplayTimer = window.setInterval(autoplayStep, TAB_AUTOPLAY_INTERVAL);\n }\n\n function stopAutoplayTimerOnly() {\n if (autoplayTimer !== null) {\n clearInterval(autoplayTimer);\n autoplayTimer = null;\n }\n }\n\n function restartAutoplay() {\n // do not cancel fill animation here\n startAutoplay();\n }\n\n startAutoplay();\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/torch.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(()=>{var i={darkness:.
|
|
1
|
+
"use strict";(()=>{var i={darkness:.78,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": [],
|
|
4
|
+
"sourcesContent": [],
|
|
5
|
+
"mappings": "",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|