Add Star Wars feature: implement CSS and JavaScript for hyperspace effect and visibility toggle

2026-02-24 19:24:48 +01:00
parent ad4fb7964b
commit b17c2a6efe
2 changed files with 138 additions and 0 deletions
--- a/Jellyfin.Plugin.Seasonals/Web/starwars.css
+++ b/Jellyfin.Plugin.Seasonals/Web/starwars.css
@@ -0,0 +1,60 @@
+.starwars-container {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 5;
+    contain: strict;
+    overflow: hidden;
+}
+
+.starwars-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+}
+
+.starwars-streak {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 2px;
+    height: 100vh;
+    transform-origin: top center;
+}
+
+.starwars-streak::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 2px;
+    height: 15vh;
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(200, 230, 255, 0.8) 70%, rgba(255, 255, 255, 1) 100%);
+    box-shadow: 0 0 8px #88ccff;
+    border-radius: 2px;
+    animation: warp-streak cubic-bezier(0.7, 0, 1, 1) infinite;
+    animation-duration: inherit;
+    animation-delay: inherit;
+    animation-fill-mode: both;
+    will-change: transform, opacity;
+}
+
+@keyframes warp-streak {
+    0% {
+        transform: translateY(2vh) scaleY(0.1);
+        opacity: 0;
+    }
+    20% {
+        opacity: 1;
+    }
+    100% {
+        transform: translateY(150vh) scaleY(3);
+        opacity: 0;
+    }
+}