Upload beholder.js

beholder.js

@@ -0,0 +1,182 @@
+(() => {
+  const HOST_ID = "injection-beholder-root";
+  const old = document.getElementById(HOST_ID);
+  if (old) { old.remove(); return; }
+
+  const host = document.createElement("div");
+  host.id = HOST_ID;
+  Object.assign(host.style, {
+    position: "fixed", inset: "0", zIndex: "2147483647",
+    pointerEvents: "none", overflow: "hidden"
+  });
+  (document.documentElement || document.body).appendChild(host);
+  const shadow = host.attachShadow({ mode: "open" });
+
+  const style = document.createElement("style");
+  style.textContent = `
+    :host { all: initial; }
+    .beholder {
+      --skin: #8b9c55; --dark: #26301b; --eye: #f4e7c5;
+      position: fixed; right: clamp(18px, 4vw, 58px); bottom: 28px;
+      width: 220px; height: 210px; pointer-events: auto;
+      cursor: grab; transform-origin: 50% 65%;
+      animation: hover 4.8s ease-in-out infinite;
+      filter: drop-shadow(0 13px 12px #0007);
+      user-select: none; touch-action: none;
+    }
+    .beholder:active { cursor: grabbing; }
+    .body {
+      position: absolute; left: 36px; top: 76px; width: 150px; height: 116px;
+      border-radius: 48% 52% 46% 54% / 55% 52% 48% 45%;
+      background: radial-gradient(ellipse at 34% 25%, #c1ca7a 0 8%, transparent 35%),
+        radial-gradient(ellipse at 65% 72%, #536538 0 5%, transparent 42%),
+        linear-gradient(145deg, #a8b76b, var(--skin) 58%, #56673a);
+      border: 3px solid #52613a;
+      box-shadow: inset -10px -13px 17px #26351e88, inset 8px 7px 14px #e5e9a655;
+    }
+    .main-eye {
+      position: absolute; left: 75px; top: 27px; width: 84px; height: 84px;
+      border-radius: 50%; background: radial-gradient(circle at 36% 30%, white, var(--eye) 58%, #c6b994);
+      border: 5px solid #53613b; box-shadow: inset 0 0 0 2px #fff8, 0 2px 8px #0006;
+      overflow: hidden; z-index: 4;
+    }
+    .pupil {
+      position: absolute; left: 29px; top: 24px; width: 28px; height: 38px;
+      border-radius: 50%; background: radial-gradient(ellipse at 35% 25%, #5d6e75, #10191d 70%);
+      transition: transform .12s ease-out;
+    }
+    .pupil:after { content:""; position:absolute; width:8px; height:8px; left:5px; top:5px; border-radius:50%; background:#fff; }
+    .lid {
+      position:absolute; inset:-2px 0 auto; height:0; z-index:5;
+      background:linear-gradient(#81934d,#64773d); border-radius:50%;
+      animation: blink 5.7s infinite;
+    }
+    .stalk {
+      position:absolute; width:8px; height:66px; border-radius:100% 100% 35% 35%;
+      background:linear-gradient(90deg,#53673a,#b3bf70 48%,#687b42);
+      transform-origin:50% 100%; z-index:2; border:1px solid #52613a;
+      animation: sway var(--dur,3s) ease-in-out infinite alternate;
+    }
+    .stalk:after {
+      content:""; position:absolute; width:27px; height:27px; left:50%; top:-17px;
+      transform:translateX(-50%); border-radius:50%;
+      background:radial-gradient(circle at 35% 30%,#fff,#e9dfbd 55%,#a79d7b);
+      border:3px solid #53613b; box-shadow:0 2px 4px #0005;
+    }
+    .stalk .tiny-pupil {
+      position:absolute; z-index:3; width:8px; height:11px; left:50%; top:-9px;
+      transform:translateX(-50%); border-radius:50%; background:#20292a;
+    }
+    .s1 { left:49px; top:48px; --dur:2.7s; transform:rotate(-43deg); }
+    .s2 { left:75px; top:34px; --dur:3.2s; transform:rotate(-20deg); }
+    .s3 { left:151px; top:36px; --dur:2.4s; transform:rotate(22deg); }
+    .s4 { left:177px; top:57px; --dur:3.5s; transform:rotate(47deg); }
+    .s5 { left:35px; top:94px; --dur:2.9s; transform:rotate(-65deg); }
+    .mouth {
+      position:absolute; z-index:6; left:83px; top:151px; width:64px; height:25px;
+      border-radius: 10px 10px 45px 45px; background:#321d20;
+      border:3px solid #45542f; overflow:hidden;
+      transform:rotate(-3deg);
+    }
+    .teeth {
+      position:absolute; left:6px; top:0; width:48px; height:10px;
+      background: repeating-linear-gradient(90deg,#fff0d5 0 8px,#b7ad8e 8px 10px);
+      clip-path:polygon(0 0,100% 0,94% 100%,82% 60%,70% 100%,57% 60%,44% 100%,30% 60%,17% 100%,7% 60%);
+    }
+    .cheek { position:absolute; top:140px; width:15px; height:9px; border-radius:50%; background:#c57d61; opacity:.65; }
+    .c1 { left:60px } .c2 { left:151px }
+    .spark { position:absolute; right:15px; top:83px; color:#e7e6ad; font: bold 20px sans-serif; opacity:0; }
+    .beholder.excited .spark { animation: sparkle .65s ease-out; }
+    .beholder.excited .body { filter:brightness(1.2) saturate(1.25); }
+    .beholder.excited { animation: bounce .55s ease-out 2; }
+    .beholder.sleepy .lid { animation: sleepy 2.2s forwards; }
+    .hint {
+      position:absolute; bottom:-2px; left:35px; width:150px; text-align:center;
+      color:#f4f0d8; font:11px/1.2 system-ui,sans-serif; opacity:0;
+      text-shadow:0 1px 3px #000; transition:opacity .2s;
+    }
+    .beholder:hover .hint { opacity:.85; }
+    @keyframes hover { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-10px) rotate(1deg)} }
+    @keyframes sway { from{rotate:-5deg} to{rotate:7deg} }
+    @keyframes blink { 0%,44%,48%,100%{height:0} 46%{height:88px} }
+    @keyframes sparkle { 0%{opacity:0;transform:scale(.4) rotate(0)} 35%{opacity:1;transform:scale(1.3) rotate(25deg)} 100%{opacity:0;transform:scale(.6) rotate(55deg)} }
+    @keyframes bounce { 0%,100%{translate:0 0} 35%{translate:0 -17px} 65%{translate:0 4px} }
+    @keyframes sleepy { to{height:34px} }
+    @media (prefers-reduced-motion: reduce) { .beholder,.stalk,.lid { animation:none !important } }
+  `;
+  shadow.appendChild(style);
+
+  const creature = document.createElement("div");
+  creature.className = "beholder";
+  creature.setAttribute("role", "button");
+  creature.setAttribute("aria-label", "Injection Beholder. Click to wake it up. Press Escape to dismiss.");
+  creature.innerHTML = `
+    <div class="stalk s1"><i class="tiny-pupil"></i></div>
+    <div class="stalk s2"><i class="tiny-pupil"></i></div>
+    <div class="stalk s3"><i class="tiny-pupil"></i></div>
+    <div class="stalk s4"><i class="tiny-pupil"></i></div>
+    <div class="stalk s5"><i class="tiny-pupil"></i></div>
+    <div class="body"></div>
+    <div class="main-eye"><div class="pupil"></div><div class="lid"></div></div>
+    <div class="cheek c1"></div><div class="cheek c2"></div>
+    <div class="mouth"><div class="teeth"></div></div>
+    <div class="spark">✦</div>
+    <div class="hint">click me · drag me · Esc to dismiss</div>`;
+  shadow.appendChild(creature);
+
+  const pupil = creature.querySelector(".pupil");
+  const tinyPupils = [...creature.querySelectorAll(".tiny-pupil")];
+  let targetX = 0, targetY = 0, dragging = false, offsetX = 0, offsetY = 0;
+  const look = (x, y) => {
+    const r = creature.getBoundingClientRect();
+    const cx = r.left + r.width / 2, cy = r.top + 70;
+    const dx = Math.max(-9, Math.min(9, (x - cx) / 22));
+    const dy = Math.max(-9, Math.min(9, (y - cy) / 22));
+    targetX = dx; targetY = dy;
+    pupil.style.transform = `translate(${dx}px,${dy}px)`;
+    tinyPupils.forEach((p, i) => p.style.transform = `translate(calc(-50% + ${dx * (i%2 ? .35 : -.35)}px), ${dy*.35}px)`);
+  };
+  const onMove = e => {
+    if (dragging) {
+      creature.style.left = `${e.clientX - offsetX}px`;
+      creature.style.top = `${e.clientY - offsetY}px`;
+      creature.style.right = "auto"; creature.style.bottom = "auto";
+    }
+    look(e.clientX, e.clientY);
+  };
+  const onDown = e => {
+    if (!creature.contains(e.target)) return;
+    dragging = true;
+    const r = creature.getBoundingClientRect();
+    offsetX = e.clientX - r.left; offsetY = e.clientY - r.top;
+    creature.setPointerCapture?.(e.pointerId);
+    e.preventDefault();
+  };
+  const onUp = () => { dragging = false; };
+  const onClick = () => {
+    creature.classList.remove("sleepy");
+    creature.classList.add("excited");
+    setTimeout(() => creature.classList.remove("excited"), 1300);
+  };
+  const onKey = e => { if (e.key === "Escape") cleanup(); };
+  const cleanup = () => {
+    document.removeEventListener("pointermove", onMove, true);
+    document.removeEventListener("pointerup", onUp, true);
+    document.removeEventListener("keydown", onKey, true);
+    host.remove();
+  };
+  document.addEventListener("pointermove", onMove, true);
+  document.addEventListener("pointerup", onUp, true);
+  document.addEventListener("keydown", onKey, true);
+  creature.addEventListener("pointerdown", onDown);
+  creature.addEventListener("click", onClick);
+  // A gentle idle drift in the gaze when the pointer is away.
+  const idle = setInterval(() => {
+    if (!host.isConnected) { clearInterval(idle); return; }
+    if (!dragging && !creature.matches(":hover")) {
+      const t = Date.now() / 900;
+      pupil.style.transform = `translate(${Math.sin(t)*3}px,${Math.cos(t*.7)*2}px)`;
+    }
+  }, 900);
+  host.addEventListener("DOMNodeRemoved", () => clearInterval(idle), { once: true });
+})();