dsh-skin-galactic-opera 0.1.7 → 0.1.8

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this package will be documented in this file.
 
+## 0.1.8 - 2026-09-03
+
+### Added
+
+- Adds a subtle black-hole infall effect using a lightweight pseudo-element particle layer and a send-time pull animation.
+
+### Changed
+
+- Reduces idle black-hole animation cost by slowing the new infall layer, shrinking its paint area, lowering opacity, and removing animated filters.
+- Keeps telemetry panel chrome clipped through the same cutout layer in both typing and idle states.
+
+### Fixed
+
+- Fixes telemetry panel cutout artifacts that could show a filled or rectangular top-left corner while typing.
+
 ## 0.1.7 - 2026-09-03
 
 ### Changed

package/lib/client.js

@@ -324,7 +324,32 @@ body.dsh-skin-galactic-opera .dsh-skin-nebula-core {
     0 0 112px rgba(255,71,120,0.10);
   filter: blur(0.55px) saturate(1.22);
   mix-blend-mode: screen;
-  animation: dsh-skin-blackhole-breathe 7.2s ease-in-out infinite;
+  animation: dsh-skin-blackhole-breathe 9.6s ease-in-out infinite;
+}
+
+body.dsh-skin-galactic-opera .dsh-skin-nebula-core::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  border-radius: 50%;
+  mix-blend-mode: screen;
+  inset: -22%;
+  opacity: 0;
+  background:
+    radial-gradient(circle at 50% 14%, rgba(255,255,255,0.72) 0 1px, transparent 1.8px),
+    radial-gradient(circle at 80% 44%, rgba(125,227,255,0.58) 0 1.1px, transparent 2px),
+    radial-gradient(circle at 24% 66%, rgba(255,207,92,0.48) 0 1px, transparent 1.8px);
+  -webkit-mask-image: radial-gradient(circle, transparent 0 16%, #000 24% 68%, transparent 82%);
+  mask-image: radial-gradient(circle, transparent 0 16%, #000 24% 68%, transparent 82%);
+  animation: dsh-skin-blackhole-infall 9.8s cubic-bezier(.42,0,.18,1) infinite;
+}
+
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-hyperspace .dsh-skin-nebula-core {
+  animation: dsh-skin-blackhole-warp-pull 880ms cubic-bezier(.16,.8,.25,1) both;
+}
+
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-hyperspace .dsh-skin-nebula-core::after {
+  animation: dsh-skin-blackhole-infall-burst 880ms cubic-bezier(.16,.8,.25,1) both;
 }
 
 body.dsh-skin-galactic-opera .dsh-skin-orb {
@@ -612,10 +637,12 @@ body.dsh-skin-galactic-opera .dsh-skin-mission-crawl::before {
 }
 
 body.dsh-skin-galactic-opera :is(.dsh-skin-twinkle, .dsh-skin-nebula-core, .dsh-skin-orb, .dsh-skin-scanner, .dsh-skin-scanner-target, .dsh-skin-pulse),
+body.dsh-skin-galactic-opera .dsh-skin-nebula-core::after,
 body.dsh-skin-galactic-opera .dsh-skin-satellite::before,
 body.dsh-skin-galactic-opera .dsh-skin-satellite-orbit::before,
 body.dsh-skin-galactic-opera .dsh-skin-satellite-orbit-front::before,
 body.dsh-skin-galactic-opera #dsh-skin-galactic-opera-decor :is(.dsh-skin-twinkle, .dsh-skin-nebula-core, .dsh-skin-orb, .dsh-skin-scanner, .dsh-skin-scanner-target, .dsh-skin-pulse),
+body.dsh-skin-galactic-opera #dsh-skin-galactic-opera-decor .dsh-skin-nebula-core::after,
 body.dsh-skin-galactic-opera #dsh-skin-galactic-opera-decor .dsh-skin-satellite::before,
 body.dsh-skin-galactic-opera #dsh-skin-galactic-opera-decor .dsh-skin-satellite-orbit::before,
 body.dsh-skin-galactic-opera #dsh-skin-galactic-opera-decor .dsh-skin-satellite-orbit-front::before {
@@ -732,28 +759,21 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel {
   gap: 4px;
   width: min(260px, 36vw);
   max-height: none;
-  overflow: visible;
+  overflow: hidden;
   padding: 19px 12px 12px;
-  border: 1px solid rgba(125,227,255,0.48);
-  border-left-color: rgba(255,207,92,0.62);
-  border-bottom-color: rgba(255,71,120,0.36);
+  border: 0;
   clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 14px);
   color: rgba(248,251,255,0.92);
-  background:
-    linear-gradient(135deg, rgba(255,207,92,0.20) 0 10px, transparent 11px),
-    linear-gradient(315deg, rgba(125,227,255,0.18) 0 12px, transparent 13px),
-    linear-gradient(180deg, rgba(6,10,26,0.92), rgba(10,17,42,0.84));
-  box-shadow:
-    inset 0 0 0 1px rgba(255,255,255,0.07),
-    inset 0 0 24px rgba(125,227,255,0.09),
-    0 0 28px rgba(125,227,255,0.22),
-    0 0 52px rgba(255,71,120,0.10);
-  backdrop-filter: blur(12px) saturate(1.35);
-  -webkit-backdrop-filter: blur(12px) saturate(1.35);
+  background: transparent;
+  box-shadow: none;
   pointer-events: none;
 }
 
 body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active .dsh-skin-telemetry-panel {
+  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 14px);
+}
+
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active .dsh-skin-telemetry-panel::after {
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
 }
@@ -778,6 +798,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel[data-collapsed="true"] .d
 body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel::before {
   content: "TELEMETRY";
   position: absolute;
+  z-index: 1;
   left: 14px;
   top: 5px;
   color: rgba(255,207,92,0.82);
@@ -789,12 +810,24 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel::before {
 body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel::after {
   content: "";
   position: absolute;
-  inset: 4px;
-  border: 1px solid rgba(125,227,255,0.16);
-  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 11px);
+  z-index: 0;
+  inset: 0;
+  border: 1px solid rgba(125,227,255,0.48);
+  border-left-color: rgba(255,207,92,0.62);
+  border-bottom-color: rgba(255,71,120,0.36);
+  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 14px);
   background:
     repeating-linear-gradient(90deg, transparent 0 18px, rgba(125,227,255,0.045) 19px, transparent 20px 36px),
-    linear-gradient(90deg, rgba(125,227,255,0.10), transparent 30%, rgba(255,71,120,0.06));
+    linear-gradient(90deg, rgba(125,227,255,0.10), transparent 30%, rgba(255,71,120,0.06)),
+    linear-gradient(315deg, rgba(125,227,255,0.18) 0 12px, transparent 13px),
+    linear-gradient(180deg, rgba(6,10,26,0.92), rgba(10,17,42,0.84));
+  box-shadow:
+    inset 0 0 0 1px rgba(255,255,255,0.07),
+    inset 0 0 24px rgba(125,227,255,0.09),
+    0 0 28px rgba(125,227,255,0.22),
+    0 0 52px rgba(255,71,120,0.10);
+  backdrop-filter: blur(12px) saturate(1.35);
+  -webkit-backdrop-filter: blur(12px) saturate(1.35);
   pointer-events: none;
 }
 
@@ -938,8 +971,29 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 }
 
 @keyframes dsh-skin-blackhole-breathe {
-  0%, 100% { opacity: 0.18; transform: translate(-50%, -50%) scale(0.96) rotate(0deg); filter: blur(0.65px) saturate(1.08); }
-  50% { opacity: 0.30; transform: translate(-50%, -50%) scale(1.05) rotate(7deg); filter: blur(0.45px) saturate(1.36); }
+  0%, 100% { opacity: 0.18; transform: translate(-50%, -50%) scale(0.97) rotate(0deg); }
+  50% { opacity: 0.28; transform: translate(-50%, -50%) scale(1.03) rotate(5deg); }
+}
+
+@keyframes dsh-skin-blackhole-infall {
+  0% { opacity: 0; transform: rotate(-16deg) scale(1.12); }
+  18% { opacity: 0.22; }
+  64% { opacity: 0.12; transform: rotate(20deg) scale(0.78); }
+  100% { opacity: 0; transform: rotate(32deg) scale(0.60); }
+}
+
+@keyframes dsh-skin-blackhole-warp-pull {
+  0% { opacity: 0.24; transform: translate(-50%, -50%) scale(1) rotate(0deg); filter: blur(0.55px) saturate(1.22); }
+  16% { opacity: 0.34; transform: translate(-50%, -50%) scale(0.88) rotate(-8deg); filter: blur(0.42px) saturate(1.55) brightness(1.12); }
+  46% { opacity: 0.40; transform: translate(-50%, -50%) scale(1.12) rotate(12deg); filter: blur(0.38px) saturate(1.62) brightness(1.18); }
+  100% { opacity: 0.24; transform: translate(-50%, -50%) scale(1.02) rotate(0deg); filter: blur(0.55px) saturate(1.22); }
+}
+
+@keyframes dsh-skin-blackhole-infall-burst {
+  0% { opacity: 0; transform: rotate(-24deg) scale(1.42); }
+  18% { opacity: 0.62; transform: rotate(10deg) scale(0.72); }
+  42% { opacity: 0.48; transform: rotate(26deg) scale(0.50); }
+  100% { opacity: 0; transform: rotate(58deg) scale(0.34); }
 }
 
 @keyframes dsh-skin-orb-hover {
@@ -978,9 +1032,10 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 }
 
 @keyframes dsh-skin-galactic-opera-hyperspace-burst {
-  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.32) rotate(0deg); }
-  15% { opacity: 0.9; }
-  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45) rotate(10deg); }
+  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.82) rotate(-8deg); filter: blur(0.8px) brightness(0.82); }
+  12% { opacity: 0.88; transform: translate(-50%, -50%) scale(0.24) rotate(0deg); filter: blur(0.2px) brightness(1.52); }
+  28% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.42) rotate(4deg); filter: blur(0.12px) brightness(1.36); }
+  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(12deg); filter: blur(0.4px) brightness(0.9); }
 }
 
 @keyframes dsh-skin-route-pulse {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-skin-galactic-opera",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Unofficial cinematic space-opera dark skin bundle for the DSH Web GUI.",
   "repository": {
     "type": "git",