@rtstic.dev/pulse 0.0.11 → 0.0.12

package/dist/styles.css

@@ -0,0 +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}}

package/dist/styles.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/home/hero-animation/styles.css"],
+  "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  }"],
+  "mappings": "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",
+  "names": []
+}

package/dist/torch.js

@@ -0,0 +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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rtstic.dev/pulse",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "pulse website",
   "license": "license-of-your-project",
   "keywords": [],