Update manifest.json for release v2.0.0.0 [skip ci]

- Updated birthday.js to improve balloon visuals and confetti effects, including new color schemes and enhanced pop animations.
- Removed legacy fallback logic in olympia.js and improved image error handling.
- Enhanced space.js with configurable counts for planets, astronauts, satellites, ISS, and rockets; improved shooting star animations and added random image swapping.
- Simplified sports.js by removing legacy emoji fallback logic and optimizing ball creation based on selected categories.
- Adjusted CSS styles across birthday, olympia, space, and sports for better visual consistency and performance.
[skip ci]

Jellyfin.Plugin.Seasonals/Configuration/PluginConfiguration.cs

@@ -32,6 +32,26 @@ public class PluginConfiguration : BasePluginConfiguration
         Summer = new SummerOptions();
         CherryBlossom = new CherryBlossomOptions();
         Carnival = new CarnivalOptions();
+        Matrix = new MatrixOptions();
+        Eurovision = new EurovisionOptions();
+        Storm = new StormOptions();
+        Pride = new PrideOptions();
+        EarthDay = new EarthDayOptions();
+        Rain = new RainOptions();
+        Frost = new FrostOptions();
+        FilmNoir = new FilmNoirOptions();
+        Oscar = new OscarOptions();
+        MarioDay = new MarioDayOptions();
+        StarWars = new StarWarsOptions();
+        Oktoberfest = new OktoberfestOptions();
+        Friday13 = new Friday13Options();
+        Eid = new EidOptions();
+        Spooky = new SpookyOptions();
+        Sports = new SportsOptions();
+        Olympia = new OlympiaOptions();
+        Space = new SpaceOptions();
+        Underwater = new UnderwaterOptions();
+        Birthday = new BirthdayOptions();
     }
 
     /// <summary>
@@ -57,7 +77,7 @@ public class PluginConfiguration : BasePluginConfiguration
     /// <summary>
     /// Gets or sets the seasonal rules configuration as JSON.
     /// </summary>
-    public string SeasonalRules { get; set; } = "[{\"Name\":\"New Year Fireworks\",\"StartDay\":28,\"StartMonth\":12,\"EndDay\":5,\"EndMonth\":1,\"Theme\":\"fireworks\"},{\"Name\":\"Carnival\",\"StartDay\":19,\"StartMonth\":2,\"EndDay\":28,\"EndMonth\":2,\"Theme\":\"carnival\"},{\"Name\":\"Valentine's Day\",\"StartDay\":10,\"StartMonth\":2,\"EndDay\":18,\"EndMonth\":2,\"Theme\":\"hearts\"},{\"Name\":\"Spring\",\"StartDay\":1,\"StartMonth\":3,\"EndDay\":31,\"EndMonth\":5,\"Theme\":\"spring\"},{\"Name\":\"Summer\",\"StartDay\":1,\"StartMonth\":6,\"EndDay\":31,\"EndMonth\":8,\"Theme\":\"summer\"},{\"Name\":\"Santa\",\"StartDay\":22,\"StartMonth\":12,\"EndDay\":27,\"EndMonth\":12,\"Theme\":\"santa\"},{\"Name\":\"Snowflakes (December)\",\"StartDay\":1,\"StartMonth\":12,\"EndDay\":31,\"EndMonth\":12,\"Theme\":\"snowflakes\"},{\"Name\":\"Snowfall (January)\",\"StartDay\":1,\"StartMonth\":1,\"EndDay\":31,\"EndMonth\":1,\"Theme\":\"snowfall\"},{\"Name\":\"Snowfall (February)\",\"StartDay\":1,\"StartMonth\":2,\"EndDay\":29,\"EndMonth\":2,\"Theme\":\"snowfall\"},{\"Name\":\"Easter\",\"StartDay\":25,\"StartMonth\":3,\"EndDay\":25,\"EndMonth\":4,\"Theme\":\"easter\"},{\"Name\":\"Halloween\",\"StartDay\":24,\"StartMonth\":10,\"EndDay\":5,\"EndMonth\":11,\"Theme\":\"halloween\"},{\"Name\":\"Autumn\",\"StartDay\":1,\"StartMonth\":9,\"EndDay\":30,\"EndMonth\":11,\"Theme\":\"autumn\"}]";
+    public string SeasonalRules { get; set; } = "[{\"Name\":\"New Year Fireworks\",\"StartDay\":28,\"StartMonth\":12,\"EndDay\":5,\"EndMonth\":1,\"Theme\":\"fireworks\"},{\"Name\":\"Carnival\",\"StartDay\":19,\"StartMonth\":2,\"EndDay\":28,\"EndMonth\":2,\"Theme\":\"carnival\"},{\"Name\":\"Valentine's Day\",\"StartDay\":10,\"StartMonth\":2,\"EndDay\":18,\"EndMonth\":2,\"Theme\":\"hearts\"},{\"Name\":\"Spring\",\"StartDay\":1,\"StartMonth\":3,\"EndDay\":31,\"EndMonth\":5,\"Theme\":\"spring\"},{\"Name\":\"Summer\",\"StartDay\":1,\"StartMonth\":6,\"EndDay\":31,\"EndMonth\":8,\"Theme\":\"summer\"},{\"Name\":\"Santa\",\"StartDay\":22,\"StartMonth\":12,\"EndDay\":27,\"EndMonth\":12,\"Theme\":\"santa\"},{\"Name\":\"Snowflakes (December)\",\"StartDay\":1,\"StartMonth\":12,\"EndDay\":31,\"EndMonth\":12,\"Theme\":\"snowflakes\"},{\"Name\":\"Snowfall (January)\",\"StartDay\":1,\"StartMonth\":1,\"EndDay\":31,\"EndMonth\":1,\"Theme\":\"snowfall\"},{\"Name\":\"Snowfall (February)\",\"StartDay\":1,\"StartMonth\":2,\"EndDay\":29,\"EndMonth\":2,\"Theme\":\"snowfall\"},{\"Name\":\"Easter\",\"StartDay\":25,\"StartMonth\":3,\"EndDay\":25,\"EndMonth\":4,\"Theme\":\"easter\"},{\"Name\":\"Halloween\",\"StartDay\":24,\"StartMonth\":10,\"EndDay\":5,\"EndMonth\":11,\"Theme\":\"halloween\"},{\"Name\":\"Autumn\",\"StartDay\":1,\"StartMonth\":9,\"EndDay\":30,\"EndMonth\":11,\"Theme\":\"autumn\"},{\"Name\":\"Cherry Blossom\",\"StartDay\":1,\"StartMonth\":4,\"EndDay\":30,\"EndMonth\":4,\"Theme\":\"cherryblossom\"}]";
 
     /// <summary>
     /// Gets or sets the Seasonals options.
@@ -77,6 +97,26 @@ public class PluginConfiguration : BasePluginConfiguration
     public SummerOptions Summer { get; set; }
     public CherryBlossomOptions CherryBlossom { get; set; }
     public CarnivalOptions Carnival { get; set; }
+    public MatrixOptions Matrix { get; set; }
+    public EurovisionOptions Eurovision { get; set; }
+    public StormOptions Storm { get; set; }
+    public PrideOptions Pride { get; set; }
+    public EarthDayOptions EarthDay { get; set; }
+    public RainOptions Rain { get; set; }
+    public FrostOptions Frost { get; set; }
+    public FilmNoirOptions FilmNoir { get; set; }
+    public OscarOptions Oscar { get; set; }
+    public MarioDayOptions MarioDay { get; set; }
+    public StarWarsOptions StarWars { get; set; }
+    public OktoberfestOptions Oktoberfest { get; set; }
+    public Friday13Options Friday13 { get; set; }
+    public EidOptions Eid { get; set; }
+    public SpookyOptions Spooky { get; set; }
+    public SportsOptions Sports { get; set; }
+    public OlympiaOptions Olympia { get; set; }
+    public SpaceOptions Space { get; set; }
+    public UnderwaterOptions Underwater { get; set; }
+    public BirthdayOptions Birthday { get; set; }
 }
 
 public class AutumnOptions
@@ -134,6 +174,8 @@ public class HalloweenOptions
     public bool EnableRandomSymbols { get; set; } = true;
     public bool EnableRandomSymbolsMobile { get; set; } = false;
     public bool EnableDifferentDuration { get; set; } = true;
+    public bool EnableSpiders { get; set; } = true;
+    public bool EnableMice { get; set; } = true;
 }
 
 public class HeartsOptions
@@ -234,3 +276,169 @@ public class CherryBlossomOptions
     public bool EnableRandomCherryBlossomMobile { get; set; } = false;
     public bool EnableDifferentDuration { get; set; } = true;
 }
+
+public class MatrixOptions
+{
+    public int SymbolCount { get; set; } = 25;
+    public bool EnableMatrix { get; set; } = true;
+    public bool EnableRandomMatrix { get; set; } = true;
+    public bool EnableRandomMatrixMobile { get; set; } = false;
+    public bool EnableDifferentDuration { get; set; } = true;
+    public bool EnableMatrixBackground { get; set; } = false;
+    public string MatrixChars { get; set; } = "0123456789";
+}
+
+public class EurovisionOptions
+{
+    public int SymbolCount { get; set; } = 25;
+    public bool EnableEurovision { get; set; } = true;
+    public bool EnableRandomEurovision { get; set; } = true;
+    public bool EnableRandomEurovisionMobile { get; set; } = false;
+    public bool EnableDifferentDuration { get; set; } = true;
+    public bool EnableColorfulNotes { get; set; } = true;
+    public string EurovisionColors { get; set; } = "#ff0026ff,#17a6ffff,#32d432ff,#FFD700,#f0821bff,#f826f8ff";
+    public int EurovisionGlowSize { get; set; } = 8;
+}
+
+public class StormOptions
+{
+    public int RaindropCount { get; set; } = 300;
+    public int RaindropCountMobile { get; set; } = 150;
+    public bool EnableStorm { get; set; } = true;
+    public bool EnableLightning { get; set; } = true;
+    public double RainSpeed { get; set; } = 1;
+}
+
+public class PrideOptions
+{
+    public bool EnablePride { get; set; } = true;
+    public int HeartCount { get; set; } = 20;
+    public int HeartSize { get; set; } = 2;
+    public bool ColorHeader { get; set; } = true;
+}
+
+public class EarthDayOptions
+{
+    public bool EnableEarthDay { get; set; } = true;
+    public int VineCount { get; set; } = 4;
+}
+
+public class RainOptions
+{
+    public bool EnableRain { get; set; } = true;
+    public int RaindropCount { get; set; } = 300;
+    public int RaindropCountMobile { get; set; } = 150;
+    public double RainSpeed { get; set; } = 1;
+}
+
+public class FrostOptions
+{
+    public bool EnableFrost { get; set; } = true;
+}
+
+public class FilmNoirOptions
+{
+    public bool EnableFilmNoir { get; set; } = true;
+}
+
+public class OscarOptions
+{
+    public bool EnableOscar { get; set; } = true;
+}
+
+public class MarioDayOptions
+{
+    public bool EnableMarioDay { get; set; } = true;
+}
+
+public class StarWarsOptions
+{
+    public bool EnableStarWars { get; set; } = true;
+}
+
+public class OktoberfestOptions
+{
+    public bool EnableOktoberfest { get; set; } = true;
+}
+
+public class Friday13Options
+{
+    public bool EnableFriday13 { get; set; } = true;
+}
+
+public class EidOptions
+{
+    public bool EnableEid { get; set; } = true;
+}
+
+public class SpookyOptions
+{
+    public bool EnableSpooky { get; set; } = true;
+    public int SymbolCount { get; set; } = 25;
+    public bool EnableSpookySway { get; set; } = true;
+    public int SpookySize { get; set; } = 20;
+    public int SpookyGlowSize { get; set; } = 2;
+}
+
+public class SportsOptions
+{
+    public int SymbolCount { get; set; } = 5;
+    public bool EnableSports { get; set; } = true;
+    public bool EnableRandomSymbols { get; set; } = true;
+    public bool EnableRandomSymbolsMobile { get; set; } = false;
+    public bool EnableDifferentDuration { get; set; } = true;
+    public string TurfColor { get; set; } = "#228b22";
+    public string SportsBalls { get; set; } = "football,basketball,tennis,volleyball";
+    public bool EnableTrophy { get; set; } = false;
+}
+
+public class OlympiaOptions
+{
+    public int SymbolCount { get; set; } = 25;
+    public bool EnableOlympia { get; set; } = true;
+    public bool EnableRandomSymbols { get; set; } = true;
+    public bool EnableRandomSymbolsMobile { get; set; } = false;
+    public bool EnableDifferentDuration { get; set; } = true;
+}
+
+public class SpaceOptions
+{
+    public int PlanetCount { get; set; } = 12;
+    public int AstronautCount { get; set; } = 5;
+    public int SatelliteCount { get; set; } = 2;
+    public int IssCount { get; set; } = 1;
+    public int RocketCount { get; set; } = 1;
+    public bool EnableSpace { get; set; } = true;
+    public bool EnableRandomSymbols { get; set; } = true;
+    public bool EnableRandomSymbolsMobile { get; set; } = false;
+    public bool EnableDifferentDuration { get; set; } = true;
+}
+
+public class UnderwaterOptions
+{
+    public int SymbolCount { get; set; } = 15;
+    public bool EnableUnderwater { get; set; } = true;
+    public bool EnableRandomSymbols { get; set; } = true;
+    public bool EnableRandomSymbolsMobile { get; set; } = false;
+    public bool EnableDifferentDuration { get; set; } = true;
+    public bool EnableLightRays { get; set; } = true;
+    public int SeaweedCount { get; set; } = 30;
+    public int CrabCount { get; set; } = 2;
+    public int StarfishCount { get; set; } = 2;
+    public int ShellCount { get; set; } = 2;
+    public int FishCount { get; set; } = 15;
+    public int SeahorseCount { get; set; } = 3;
+    public int JellyfishCount { get; set; } = 3;
+    public int TurtleCount { get; set; } = 1;
+}
+
+public class BirthdayOptions
+{
+    public int SymbolCount { get; set; } = 5;
+    public int ConfettiCount { get; set; } = 60;
+    public bool EnableBirthday { get; set; } = true;
+    public bool EnableRandomSymbols { get; set; } = true;
+    public bool EnableRandomSymbolsMobile { get; set; } = false;
+    public bool EnableDifferentDuration { get; set; } = true;
+    public bool EnableGarland { get; set; } = true;
+}

Jellyfin.Plugin.Seasonals/Jellyfin.Plugin.Seasonals.csproj

@@ -12,7 +12,7 @@
     <!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
     <Title>Jellyfin Seasonals Plugin</Title>
     <Authors>CodeDevMLH</Authors>
-    <Version>1.7.1.5</Version>
+    <Version>2.0.0.0</Version>
     <RepositoryUrl>https://github.com/CodeDevMLH/Jellyfin-Seasonals</RepositoryUrl>
   </PropertyGroup>
 

Jellyfin.Plugin.Seasonals/Web/autumn.css

@@ -8,12 +8,15 @@
   height: 100%;
   pointer-events: none;
   z-index: 10;
+  contain: layout paint;
 }
 
 .leaf {
   position: fixed;
   z-index: 15;
-  top: -10%;
+  top: 0;
+  will-change: transform;
+  translate: 0 -10vh;
   font-size: 1em;
   color: #fff;
   font-family: Arial, sans-serif;
@@ -40,30 +43,30 @@
 
 @-webkit-keyframes leaf-fall {
   0% {
-    top: -10%;
+    translate: 0 -10vh;
   }
 
   100% {
-    top: 100%;
+    translate: 0 100vh;
   }
 }
 
 @keyframes leaf-fall {
   0% {
-    top: -10%;
+    translate: 0 -10vh;
   }
 
   100% {
-    top: 100%;
+    translate: 0 100vh;
   }
 }
 
 @-webkit-keyframes leaf-shake {
   0%, 100% {
-    -webkit-transform: translateX(0) rotate(var(--rotate-start, -20deg));
+    transform: translateX(0) rotate(var(--rotate-start, -20deg));
   }
   50% {
-    -webkit-transform: translateX(80px) rotate(var(--rotate-end, 20deg));
+    transform: translateX(80px) rotate(var(--rotate-end, 20deg));
   }
 }
 

Jellyfin.Plugin.Seasonals/Web/autumn.js

@@ -7,6 +7,25 @@ const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? co
 const enableRotation = config.EnableRotation !== undefined ? config.EnableRotation : false; // enable/disable leaf rotation
 const leafCount = config.LeafCount || 25; // count of random extra leaves
 
+const images = [
+  "../Seasonals/Resources/autumn_images/acorn1.png",
+  "../Seasonals/Resources/autumn_images/acorn2.png",
+  "../Seasonals/Resources/autumn_images/leaf1.png",
+  "../Seasonals/Resources/autumn_images/leaf2.png",
+  "../Seasonals/Resources/autumn_images/leaf3.png",
+  "../Seasonals/Resources/autumn_images/leaf4.png",
+  "../Seasonals/Resources/autumn_images/leaf5.png",
+  "../Seasonals/Resources/autumn_images/leaf6.png",
+  "../Seasonals/Resources/autumn_images/leaf7.png",
+  "../Seasonals/Resources/autumn_images/leaf8.png",
+  "../Seasonals/Resources/autumn_images/leaf9.png",
+  "../Seasonals/Resources/autumn_images/leaf10.png",
+  "../Seasonals/Resources/autumn_images/leaf11.png",
+  "../Seasonals/Resources/autumn_images/leaf12.png",
+  "../Seasonals/Resources/autumn_images/leaf13.png",
+  "../Seasonals/Resources/autumn_images/leaf14.png",
+  "../Seasonals/Resources/autumn_images/leaf15.png",
+];
 
 let msgPrinted = false; // flag to prevent multiple console messages
 
@@ -38,35 +57,13 @@ function toggleAutumn() {
 
 // observe changes in the DOM
 const observer = new MutationObserver(toggleAutumn);
-
-// start observation
 observer.observe(document.body, {
-  childList: true,    // observe adding/removing of child elements
+  childList: true,
-  subtree: true,      // observe all levels of the DOM tree
+  subtree: true,
-  attributes: true    // observe changes to attributes (e.g. class changes)
+  attributes: true
 });
 
 
-const images = [
-  "../Seasonals/Resources/autumn_images/acorn1.png",
-  "../Seasonals/Resources/autumn_images/acorn2.png",
-  "../Seasonals/Resources/autumn_images/leaf1.png",
-  "../Seasonals/Resources/autumn_images/leaf2.png",
-  "../Seasonals/Resources/autumn_images/leaf3.png",
-  "../Seasonals/Resources/autumn_images/leaf4.png",
-  "../Seasonals/Resources/autumn_images/leaf5.png",
-  "../Seasonals/Resources/autumn_images/leaf6.png",
-  "../Seasonals/Resources/autumn_images/leaf7.png",
-  "../Seasonals/Resources/autumn_images/leaf8.png",
-  "../Seasonals/Resources/autumn_images/leaf9.png",
-  "../Seasonals/Resources/autumn_images/leaf10.png",
-  "../Seasonals/Resources/autumn_images/leaf11.png",
-  "../Seasonals/Resources/autumn_images/leaf12.png",
-  "../Seasonals/Resources/autumn_images/leaf13.png",
-  "../Seasonals/Resources/autumn_images/leaf14.png",
-  "../Seasonals/Resources/autumn_images/leaf15.png",
-];
-
 function addRandomLeaves(count) {
   const autumnContainer = document.querySelector('.autumn-container'); // get the leave container
   if (!autumnContainer) return; // exit if leave container is not found
@@ -90,7 +87,7 @@ function addRandomLeaves(count) {
     // set random horizontal position, animation delay and size(uncomment lines to enable) 
     const randomLeft = Math.random() * 100; // position (0% to 100%)
     const randomAnimationDelay = Math.random() * 12; // delay for fall (0s to 12s)
-    const randomAnimationDelay2 = Math.random() * 4; // delay for shake+rotate (0s to 4s)
+    const randomAnimationDelay2 = -(Math.random() * 4); // delay for shake+rotate (-4s to 0s)
 
     // apply styles
     leaveDiv.style.left = `${randomLeft}%`;

Jellyfin.Plugin.Seasonals/Web/birthday.css

@@ -0,0 +1,153 @@
+.birthday-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+    z-index: 9999;
+    overflow: hidden;
+    contain: strict;
+}
+
+.birthday-symbol {
+    position: fixed;
+    top: 0;
+    left: 0;
+    animation: birthday-rise linear infinite forwards;
+    opacity: 0.95;
+    z-index: 40;
+    pointer-events: none; 
+}
+
+.birthday-sway {
+    will-change: transform;
+    animation-name: birthday-sway;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+
+.birthday-inner {
+    pointer-events: auto; /* Allow hover over the actual item */
+    cursor: crosshair;
+    display: inline-block;
+}
+
+/* MARK: Balloon Size */
+.birthday-symbol img {
+    width: 18vh;
+    height: auto;
+    max-width: 100px;
+    object-fit: contain;
+}
+
+.birthday-confetti-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 30;
+    will-change: transform;
+    animation-name: birthday-confetti-fall;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    pointer-events: none;
+}
+
+.birthday-confetti {
+    width: 8px;
+    height: 16px;
+    background-color: rgb(0, 0, 0);
+    will-change: transform;
+    animation-name: birthday-flutter;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+}
+
+.birthday-confetti.circle {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
+
+.birthday-confetti.square {
+    width: 8px;
+    height: 8px;
+}
+
+.birthday-confetti.triangle {
+    width: 10px;
+    height: 10px;
+    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+}
+
+@keyframes birthday-rise {
+    0% { transform: translate3d(var(--x-pos, 0vw), 110vh, 0) rotate(var(--start-rot, 0deg)); opacity: 0; }
+    10% { opacity: 1; }
+    90% { opacity: 1; }
+    100% { transform: translate3d(var(--x-pos, 0vw), -20vh, 0) rotate(calc(var(--start-rot, 0deg) * -1)); opacity: 0; }
+}
+
+@keyframes birthday-confetti-fall {
+    0% { transform: translate3d(var(--x-pos, 0vw), -10vh, 0); }
+    100% { transform: translate3d(var(--x-pos, 0vw), 110vh, 0); }
+}
+
+@keyframes birthday-sway {
+    0% { transform: translateX(calc(var(--sway-amount, 50px) * -1)); }
+    100% { transform: translateX(var(--sway-amount, 50px)); }
+}
+
+@keyframes birthday-flutter {
+    0% { transform: rotate3d(var(--rx, 1), var(--ry, 1), var(--rz, 0), 0deg); }
+    100% { transform: rotate3d(var(--rx, 1), var(--ry, 1), var(--rz, 0), var(--rot-dir, 360deg)); }
+}
+
+@keyframes birthday-pop {
+    0% { transform: scale(1); opacity: 1; filter: brightness(1); }
+    30% { transform: scale(1.3); opacity: 1; filter: brightness(1.5); }
+    100% { transform: scale(0); opacity: 0; filter: brightness(2); }
+}
+
+.birthday-burst-wrapper {
+    position: absolute;
+    pointer-events: none;
+    z-index: 1000;
+    will-change: transform, opacity;
+    animation: birthday-burst-y 1.2s cubic-bezier(0.42, 0, 1, 1) forwards;
+}
+
+.birthday-burst-confetti {
+    will-change: transform;
+    animation: birthday-burst-x 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
+}
+
+.birthday-burst-confetti.circle {
+    border-radius: 50%;
+}
+
+.birthday-burst-confetti.triangle {
+    width: 10px;
+    height: 10px;
+    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+}
+
+@keyframes birthday-burst-y {
+    0% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+    100% {
+        transform: translateY(calc(var(--burst-y) + 150px)); /* Gravity pull downwards */
+        opacity: 0;
+    }
+}
+
+@keyframes birthday-burst-x {
+    0% {
+        transform: translateX(0) rotate3d(var(--rx), var(--ry), var(--rz), 0deg);
+    }
+    100% {
+        transform: translateX(calc(var(--burst-x) * 1.5)) rotate3d(var(--rx), var(--ry), var(--rz), var(--rot-dir));
+    }
+}

Jellyfin.Plugin.Seasonals/Web/birthday.js

@@ -0,0 +1,319 @@
+const config = window.SeasonalsPluginConfig?.Birthday || {};
+
+const birthday = config.EnableBirthday !== undefined ? config.EnableBirthday : true;
+const symbolCount = config.SymbolCount || 5;
+const useRandomSymbols = config.EnableRandomSymbols !== undefined ? config.EnableRandomSymbols : true;
+const enableRandomMobile = config.EnableRandomSymbolsMobile !== undefined ? config.EnableRandomSymbolsMobile : false;
+const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true;
+
+
+const birthdayImages = [
+    '../Seasonals/Resources/birthday_assets/balloon_blue.gif',
+    '../Seasonals/Resources/birthday_assets/balloon_green.gif',
+    '../Seasonals/Resources/birthday_assets/balloon_lightblue.gif',
+    '../Seasonals/Resources/birthday_assets/balloon_orange.gif',
+    '../Seasonals/Resources/birthday_assets/balloon_pink.gif',
+    '../Seasonals/Resources/birthday_assets/balloon_red.gif',
+    '../Seasonals/Resources/birthday_assets/balloon_yellow.gif',
+    '../Seasonals/Resources/birthday_assets/balloon_turquoise.gif',
+    '../Seasonals/Resources/birthday_assets/balloon_violet.gif'
+];
+
+
+const balloonColors = {
+    'balloon_blue': ['#3498db', '#2980b9', '#1f618d'],
+    'balloon_green': ['#2ecc71', '#27ae60', '#1e8449'],
+    'balloon_lightblue': ['#36c5f0', '#81ecec', '#00cec9'],
+    'balloon_orange': ['#e67e22', '#d35400', '#a04000'],
+    'balloon_pink': ['#ff726d', '#f4306d', '#e84393'],
+    'balloon_red': ['#e74c3c', '#c0392b', '#922b21'],
+    'balloon_yellow': ['#f1c40f', '#f39c12', '#b7950b'],
+    'balloon_turquoise': ['#36c5f0', '#81ecec', '#00cec9'],
+    'balloon_violet': ['#9b59b6', '#8e44ad', '#6c3483']
+};
+
+let msgPrinted = false;
+
+function toggleBirthday() {
+  const container = document.querySelector('.birthday-container');
+  if (!container) return;
+
+  const videoPlayer = document.querySelector('.videoPlayerContainer');
+  const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+  const isDashboard = document.body.classList.contains('dashboardDocument');
+  const hasUserMenu = document.querySelector('#app-user-menu');
+
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    container.style.display = 'none';
+    if (!msgPrinted) {
+      console.log('Birthday hidden');
+      msgPrinted = true;
+    }
+  } else {
+    container.style.display = 'block';
+    if (msgPrinted) {
+      console.log('Birthday visible');
+      msgPrinted = false;
+    }
+  }
+}
+
+const observer = new MutationObserver(toggleBirthday);
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
+
+function createBalloonPopConfetti(container, x, y, colors) {
+    const popConfettiColors = colors || [
+        '#fce18a', '#ff726d', '#b48def', '#f4306d', 
+        '#36c5f0', '#2ccc5d', '#e9b31d', '#9b59b6', 
+        '#3498db', '#e74c3c', '#1abc9c', '#f1c40f'
+    ];
+    
+    // Spawn 15-20 particles
+    const particleCount = Math.floor(Math.random() * 5) + 15;
+    
+    for (let i = 0; i < particleCount; i++) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'birthday-burst-wrapper';
+        wrapper.style.position = 'absolute';
+        wrapper.style.left = `${x}px`;
+        wrapper.style.top = `${y}px`;
+        wrapper.style.zIndex = '1000';
+
+        const particle = document.createElement('div');
+        particle.classList.add('birthday-burst-confetti');
+        
+        // Random color
+        const color = popConfettiColors[Math.floor(Math.random() * popConfettiColors.length)];
+        particle.style.backgroundColor = color;
+        
+        // Random shape
+        const shape = Math.random();
+        if (shape > 0.66) {
+            particle.classList.add('circle');
+            const size = Math.random() * 4 + 4; // 4-8px
+            particle.style.width = `${size}px`;
+            particle.style.height = `${size}px`;
+        } else if (shape > 0.33) {
+            particle.classList.add('rect');
+            const width = Math.random() * 3 + 3; // 3-6px
+            const height = Math.random() * 4 + 6; // 6-10px
+            particle.style.width = `${width}px`;
+            particle.style.height = `${height}px`;
+        } else {
+            particle.classList.add('triangle');
+        }
+
+        // Random direction for explosion (circular)
+        const angle = Math.random() * 2 * Math.PI; 
+        const distance = Math.random() * 60 + 20; // 20-80px burst radius
+        
+        const xOffset = Math.cos(angle) * distance;
+        const yOffset = Math.sin(angle) * distance;
+        
+        particle.style.setProperty('--burst-x', `${xOffset}px`);
+        wrapper.style.setProperty('--burst-y', `${yOffset}px`);
+        
+        // Random rotation during fall
+        particle.style.setProperty('--rot-dir', `${(Math.random() > 0.5 ? 1 : -1) * 360}deg`);
+        particle.style.setProperty('--rx', Math.random().toFixed(2));
+        particle.style.setProperty('--ry', Math.random().toFixed(2));
+        particle.style.setProperty('--rz', (Math.random() * 0.5).toFixed(2));
+        
+        wrapper.appendChild(particle);
+        container.appendChild(wrapper);
+        
+        // Remove particle after animation
+        setTimeout(() => wrapper.remove(), 1000);
+    }
+}
+
+function createBirthday() {
+    const container = document.querySelector('.birthday-container') || document.createElement('div');
+
+    if (!document.querySelector('.birthday-container')) {
+        container.className = 'birthday-container';
+        container.setAttribute("aria-hidden", "true");
+        document.body.appendChild(container);
+    }
+
+    // Cake and Garland have been removed
+
+    const standardCount = 15;
+    const totalSymbols = symbolCount + standardCount;
+    
+    let isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
+    let finalCount = totalSymbols;
+
+    if (isMobile) {
+        finalCount = enableRandomMobile ? totalSymbols : standardCount;
+    }
+
+    const useRandomDuration = enableDifferentDuration !== false;
+
+    // Arrays moved to top of file
+
+    for (let i = 0; i < finalCount; i++) {
+        let symbol = document.createElement('div');
+        
+        const randomImage = birthdayImages[Math.floor(Math.random() * birthdayImages.length)];
+        const randomItem = randomImage.split('/').pop().split('.')[0]; // Extracts "balloon_blue"
+        symbol.className = `birthday-symbol birthday-${randomItem}`;
+
+        // Create inner div for sway
+        let innerDiv = document.createElement('div');
+        innerDiv.className = 'birthday-inner';
+
+        let img = document.createElement('img');
+        img.src = randomImage;
+        img.onerror = function() {
+            symbol.remove(); // Remove element completely on error
+        };
+        innerDiv.appendChild(img);
+        
+        // Sway wrapper
+        let swayWrapper = document.createElement('div');
+        swayWrapper.className = 'birthday-sway';
+        const swayDuration = Math.random() * 3 + 3; // 3-6s per cycle
+        swayWrapper.style.animationDuration = `${swayDuration}s`;
+        swayWrapper.style.animationDelay = `-${Math.random() * 5}s`;
+        const swayAmount = Math.random() * 60 + 20; // 20-80px
+        const direction = Math.random() > 0.5 ? 1 : -1;
+        swayWrapper.style.setProperty('--sway-amount', `${swayAmount * direction}px`);
+        
+        swayWrapper.appendChild(innerDiv);
+        symbol.appendChild(swayWrapper);
+
+        const leftPos = Math.random() * 95;
+        
+        // Far away effect
+        const depth = Math.random();
+        // MARK: balloon size
+        const scale = 0.85 + depth * 0.3; // 0.85 to 1.15
+        const zIndex = Math.floor(depth * 30) + 10;
+        
+        img.style.transform = `scale(${scale})`;
+        symbol.style.zIndex = zIndex;
+
+        let durationSeconds = 9;
+        if (useRandomDuration) {
+            // Far strings climb slower
+            durationSeconds = (1 - depth) * 6 + 7 + Math.random() * 4; 
+        }
+        
+        // Negative delay correctly scatters them initially across the screen vertically
+        // avoiding them all popping up at bottom edge together
+        const delaySeconds = -(Math.random() * durationSeconds);
+
+        const isBalloon = randomItem.startsWith('balloon');
+
+        if (isBalloon) {
+            // Sway animation is now handled natively by the GIF motion.
+            
+            // Interaction to pop is handled visually by the GIF, but we can still remove it on hover
+            innerDiv.addEventListener('mouseenter', function(e) {
+                if (!this.classList.contains('popped')) {
+                    this.classList.add('popped');
+                    this.style.animation = 'birthday-pop 0.2s ease-out forwards';
+                    this.style.pointerEvents = 'none'; // avoid re-triggering
+                    
+                    // Create confetti burst at balloon's screen position
+                    const rect = this.getBoundingClientRect();
+                    const cx = rect.left + rect.width / 2;
+                    // explosion height
+                    const cy = rect.top + rect.height * -0.05;
+                    // Ensure the burst container is appended to the main document body or the birthday container
+                    createBalloonPopConfetti(document.body, cx, cy, balloonColors[randomItem]);
+                }
+            }, { once: true });
+        }
+
+        const startRot = (Math.random() * 20) - 10; // -10 to +10 spread
+        symbol.style.setProperty('--start-rot', `${startRot}deg`);
+        symbol.style.setProperty('--x-pos', `${leftPos}vw`);
+
+        symbol.style.animationDuration = `${durationSeconds}s`;
+        symbol.style.animationDelay = `${delaySeconds}s`;
+
+        container.appendChild(symbol);
+    }
+
+    // Party Confetti
+    const baseConfettiCount = config.ConfettiCount !== undefined ? config.ConfettiCount : 60;
+    const confettiCount = isMobile ? Math.floor(baseConfettiCount / 2) : baseConfettiCount;
+    const allColors = ['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];
+    
+    for (let i = 0; i < confettiCount; i++) {
+        const wrapper = document.createElement('div');
+        wrapper.classList.add('birthday-confetti-wrapper');
+        
+        // Use carnival.js 3D advanced fluttering logic
+        let swayWrapper = document.createElement('div');
+        swayWrapper.classList.add('birthday-sway');
+        wrapper.appendChild(swayWrapper);
+
+        const confetti = document.createElement('div');
+        confetti.classList.add('birthday-confetti');
+
+        const color = allColors[Math.floor(Math.random() * allColors.length)];
+        confetti.style.backgroundColor = color;
+
+        // Shape assignments
+        const shape = Math.random();
+        if (shape > 0.8) confetti.classList.add('circle');
+        else if (shape > 0.6) confetti.classList.add('square');
+        else if (shape > 0.4) confetti.classList.add('triangle');
+        else confetti.classList.add('rect'); // default
+
+        // Sizing
+        if (!confetti.classList.contains('circle') && !confetti.classList.contains('square') && !confetti.classList.contains('triangle')) {
+            const width = Math.random() * 3 + 4; // 4-7px
+            const height = Math.random() * 5 + 8; // 8-13px
+            confetti.style.width = `${width}px`;
+            confetti.style.height = `${height}px`;
+        } else if (confetti.classList.contains('circle') || confetti.classList.contains('square')) {
+            const size = Math.random() * 5 + 5; // 5-10px
+            confetti.style.width = `${size}px`;
+            confetti.style.height = `${size}px`;
+        }
+
+        const duration = Math.random() * 5 + 5; 
+        const delay = -Math.random() * duration; // Spawn fully integrated across screen width/height
+        
+        wrapper.style.setProperty('--x-pos', `${Math.random() * 100}vw`);
+        wrapper.style.animationDelay = `${delay}s`;
+        wrapper.style.animationDuration = `${duration}s`;
+        
+        // Sway handling
+        const swayDuration = Math.random() * 2 + 3; // 3-5s per cycle
+        swayWrapper.style.animationDuration = `${swayDuration}s`;
+        swayWrapper.style.animationDelay = `-${Math.random() * 5}s`;
+        const swayAmount = Math.random() * 70 + 30; // 30-100px
+        const direction = Math.random() > 0.5 ? 1 : -1;
+        swayWrapper.style.setProperty('--sway-amount', `${swayAmount * direction}px`);
+        
+        // 3D Flutter Rotation
+        confetti.style.animationDuration = `${Math.random() * 2 + 1}s`;
+        confetti.style.setProperty('--rx', Math.random().toFixed(2));
+        confetti.style.setProperty('--ry', Math.random().toFixed(2));
+        confetti.style.setProperty('--rz', (Math.random() * 0.5).toFixed(2));
+        const rotDir = Math.random() > 0.5 ? 1 : -1;
+        confetti.style.setProperty('--rot-dir', `${rotDir * 360}deg`);
+
+        swayWrapper.appendChild(confetti);
+        container.appendChild(wrapper);
+    }
+}
+
+/* Removed fallback logic */
+
+function initializeBirthday() {
+  if (!birthday) return;
+  createBirthday();
+  toggleBirthday();
+}
+
+initializeBirthday();

Jellyfin.Plugin.Seasonals/Web/carnival.css

@@ -9,13 +9,14 @@
   pointer-events: none;
   z-index: 10;
   perspective: 600px;
+  contain: layout paint;
 }
 
 .carnival-wrapper {
   position: fixed;
   z-index: 15;
-  top: -20px;
+  top: 0;
-  will-change: top;
+  will-change: transform;
   animation-name: carnival-fall;
   animation-timing-function: linear;
   animation-iteration-count: 1;
@@ -33,7 +34,7 @@
 .carnival-confetti {
   width: 8px;
   height: 16px;
-  background-color: #f0f;
+  background-color: rgb(0, 0, 0);
   will-change: transform;
   animation-name: carnival-flutter;
   animation-timing-function: linear;
@@ -59,10 +60,10 @@
 
 @keyframes carnival-fall {
   0% {
-    top: -10%;
+    transform: translate3d(0, -10vh, 0);
   }
   100% {
-    top: 110%;
+    transform: translate3d(0, 110vh, 0);
   }
 }
 

Jellyfin.Plugin.Seasonals/Web/carnival.js

@@ -7,6 +7,12 @@ const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? c
 const enableSway = config.EnableCarnivalSway !== undefined ? config.EnableCarnivalSway : true; // Enable side-to-side sway animation
 const carnivalCount = config.ObjectCount || 120; // Number of confetti pieces to spawn
 
+const confettiColors = [
+    '#fce18a', '#ff726d', '#b48def', '#f4306d', 
+    '#36c5f0', '#2ccc5d', '#e9b31d', '#9b59b6', 
+    '#3498db', '#e74c3c', '#1abc9c', '#f1c40f'
+];
+
 let msgPrinted = false;
 
 // function to check and control the carnival animation
@@ -37,20 +43,12 @@ function toggleCarnival() {
 
 // observe changes in the DOM
 const observer = new MutationObserver(toggleCarnival);
-
-// start observation
 observer.observe(document.body, {
-  childList: true,    // observe adding/removing of child elements
+  childList: true,
-  subtree: true,      // observe all levels of the DOM tree
+  subtree: true,
-  attributes: true    // observe changes to attributes (e.g. class changes)
+  attributes: true
 });
 
-const confettiColors = [
-    '#fce18a', '#ff726d', '#b48def', '#f4306d', 
-    '#36c5f0', '#2ccc5d', '#e9b31d', '#9b59b6', 
-    '#3498db', '#e74c3c', '#1abc9c', '#f1c40f'
-];
-
 function createConfettiPiece(container, isInitial = false) {
     const wrapper = document.createElement('div');
     wrapper.classList.add('carnival-wrapper');
@@ -85,7 +83,6 @@ function createConfettiPiece(container, isInitial = false) {
     // Random position
     wrapper.style.left = `${Math.random() * 100}%`;
 
-    // Random dimensions
     // MARK: CONFETTI SIZE (RECTANGLES)
     if (!confetti.classList.contains('circle') && !confetti.classList.contains('square') && !confetti.classList.contains('triangle')) {
         const width = Math.random() * 3 + 4; // 4-7px
@@ -99,7 +96,6 @@ function createConfettiPiece(container, isInitial = false) {
         confetti.style.height = `${size}px`;
     }
 
-    // Animation settings
     // MARK: CONFETTI FALLING SPEED (in seconds)
     const duration = Math.random() * 5 + 5; 
 
@@ -119,14 +115,12 @@ function createConfettiPiece(container, isInitial = false) {
         swayWrapper.style.animationDuration = `${swayDuration}s`;
         swayWrapper.style.animationDelay = `-${Math.random() * 5}s`;
         
-        // Random sway amplitude (using CSS variable for dynamic keyframe)
         // MARK: SWAY DISTANCE RANGE (in px)
         const swayAmount = Math.random() * 70 + 30; // 30-100px
         const direction = Math.random() > 0.5 ? 1 : -1;
         swayWrapper.style.setProperty('--sway-amount', `${swayAmount * direction}px`);
     }
     
-    // Flutter speed and random 3D rotation axis
     // MARK: CONFETTI FLUTTER ROTATION SPEED
     confetti.style.animationDuration = `${Math.random() * 2 + 1}s`;
     confetti.style.setProperty('--rx', Math.random().toFixed(2));
@@ -184,7 +178,7 @@ function initCarnivalObjects() {
 
 // initialize carnival
 function initializeCarnival() {
-  if (!carnival) return; // exit if carnival is disabled
+  if (!carnival) return;
     initCarnivalObjects();
     toggleCarnival();
 

Jellyfin.Plugin.Seasonals/Web/cherryblossom.css

@@ -8,19 +8,21 @@
     height: 100%;
     pointer-events: none;
     z-index: 1000; 
+    contain: layout paint;
 }
 
 /* Petals */
 .cherryblossom-petal {
     position: fixed;
-    top: -20px;
+    top: 0;
     z-index: 1005;
     width: 15px;
     height: 10px;
     background-color: #ffc0cb; 
     border-radius: 15px 0px 15px 0px; 
     
-    will-change: transform, top;
+    will-change: transform;
+    translate: 0 -10vh;
     animation-name: cherryblossom-fall, cherryblossom-sway;
     animation-timing-function: linear, ease-in-out;
     animation-iteration-count: infinite, infinite;
@@ -44,8 +46,8 @@
 }
 
 @keyframes cherryblossom-fall {
-    0% { top: -10%; }
+    0% { translate: 0 -10vh; }
-    100% { top: 100%; }
+    100% { translate: 0 110vh; }
 }
 
 @keyframes cherryblossom-sway {

Jellyfin.Plugin.Seasonals/Web/cherryblossom.js

@@ -33,7 +33,11 @@ function toggleCherryBlossom() {
 }
 
 const observer = new MutationObserver(toggleCherryBlossom);
-observer.observe(document.body, { childList: true, subtree: true, attributes: true });
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
 
 function createPetal(container) {
     const petal = document.createElement('div');

Jellyfin.Plugin.Seasonals/Web/christmas.css

@@ -8,12 +8,15 @@
   height: 100%;
   pointer-events: none;
   z-index: 10;
+  contain: layout paint;
 }
 
 .christmas {
   position: fixed;
   z-index: 15;
-  top: -10%;
+  top: 0;
+  will-change: transform;
+  translate: 0 -10vh;
   font-size: 1em;
   color: #fff;
   font-family: Arial, sans-serif;
@@ -33,11 +36,11 @@
 
 @-webkit-keyframes christmas-fall {
   0% {
-    top: -10%;
+    translate: 0 -10vh;
   }
 
   100% {
-    top: 100%;
+    translate: 0 110vh;
   }
 }
 
@@ -45,28 +48,25 @@
 
   0%,
   100% {
-    -webkit-transform: translateX(0);
     transform: translateX(0);
   }
 
   50% {
-    -webkit-transform: translateX(80px);
     transform: translateX(80px);
   }
 }
 
 @keyframes christmas-fall {
   0% {
-    top: -10%;
+    translate: 0 -10vh;
   }
 
   100% {
-    top: 100%;
+    translate: 0 110vh;
   }
 }
 
 @keyframes christmas-shake {
-
   0%,
   100% {
     transform: translateX(0);

Jellyfin.Plugin.Seasonals/Web/christmas.js

@@ -6,6 +6,8 @@ const randomChristmasMobile = config.EnableRandomChristmasMobile !== undefined ?
 const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different duration for the random Christmas symbols
 const christmasCount = config.SymbolCount || 25; // count of random extra christmas
 
+// Array of christmas characters
+const christmasSymbols = ['❆', '🎁', '❄️', '🎁', '🎅', '🎊', '🎁', '🎉'];
 
 let msgPrinted = false; // flag to prevent multiple console messages
 
@@ -37,17 +39,12 @@ function toggleChristmas() {
 
 // observe changes in the DOM
 const observer = new MutationObserver(toggleChristmas);
-
-// start observation
 observer.observe(document.body, {
-  childList: true,    // observe adding/removing of child elements
+  childList: true,
-  subtree: true,      // observe all levels of the DOM tree
+  subtree: true,
-  attributes: true    // observe changes to attributes (e.g. class changes)
+  attributes: true
 });
 
-// Array of christmas characters
-const christmasSymbols = ['❆', '🎁', '❄️', '🎁', '🎅', '🎊', '🎁', '🎉'];
-
 function addRandomChristmas(count) {
   const christmasContainer = document.querySelector('.christmas-container'); // get the christmas container
   if (!christmasContainer) return; // exit if christmas container is not found

Jellyfin.Plugin.Seasonals/Web/earthday.css

@@ -0,0 +1,35 @@
+.earthday-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100vw;
+    height: 8vh;
+    pointer-events: none;
+    z-index: 1000;
+    overflow: hidden;
+}
+
+.earthday-meadow {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transform-origin: bottom;
+    animation: grow-meadow 3s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
+}
+
+@keyframes grow-meadow {
+    0%   { transform: translateY(100%); opacity: 0; }
+    100% { transform: translateY(0); opacity: 0.95; }
+}
+
+.earthday-sway {
+    transform-origin: bottom center;
+    animation: sway-grass 4s ease-in-out infinite alternate;
+}
+
+@keyframes sway-grass {
+    0%   { transform: skewX(-2deg); }
+    100% { transform: skewX(2deg); }
+}

Jellyfin.Plugin.Seasonals/Web/earthday.js

@@ -0,0 +1,127 @@
+const config = window.SeasonalsPluginConfig?.EarthDay || {};
+
+const enabled = config.EnableEarthDay !== undefined ? config.EnableEarthDay : true;
+const vineCount = config.VineCount || 4;
+
+const flowerColors = ['#FF69B4', '#FFD700', '#87CEFA', '#FF4500', '#BA55D3', '#FFA500', '#FF1493'];
+
+let msgPrinted = false;
+
+// Toggle Function
+function toggleEarthDay() {
+  const container = document.querySelector('.earthday-container');
+  if (!container) return;
+
+  const videoPlayer = document.querySelector('.videoPlayerContainer');
+  const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+  const isDashboard = document.body.classList.contains('dashboardDocument');
+  const hasUserMenu = document.querySelector('#app-user-menu');
+
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    container.style.display = 'none';
+    if (!msgPrinted) {
+      console.log('EarthDay hidden');
+      msgPrinted = true;
+    }
+  } else {
+    container.style.display = 'block';
+    if (msgPrinted) {
+      console.log('EarthDay visible');
+      msgPrinted = false;
+    }
+  }
+}
+
+const observer = new MutationObserver(toggleEarthDay);
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
+
+
+function createElements() {
+  const container = document.querySelector('.earthday-container') || document.createElement('div');
+
+  if (!document.querySelector('.earthday-container')) {
+    container.className = 'earthday-container';
+    container.setAttribute('aria-hidden', 'true');
+    document.body.appendChild(container);
+  }
+
+  const w = window.innerWidth;
+  // MARK: GRASS HEIGHT CONFIGURATION
+  // To prevent squishing, hSVG calculation MUST match the height in earthday.css exactly
+  // earthday.css uses 8vh, so here it is 0.08
+  const hSVG = Math.floor(window.innerHeight * 0.08) || 80;
+  let paths = '';
+  
+  // Generate Grass
+  for (let i = 0; i < 400; i++) {
+      const x = Math.random() * w;
+      const h = hSVG * 0.2 + Math.random() * (hSVG * 0.8);
+      const cY = hSVG - h;
+      const bend = x + (Math.random() * 15 - 7.5); // curvature
+      const color = Math.random() > 0.5 ? '#2E8B57' : '#3CB371';
+      const width = 1 + Math.random() * 2;
+      paths += `<path d="M ${x} ${hSVG} Q ${bend} ${cY+hSVG*0.2} ${bend} ${cY}" stroke="${color}" stroke-width="${width}" fill="none"/>`;
+  }
+
+  // Generate Flowers
+  const flowerCount = Math.max(10, vineCount * 15);
+  for (let i = 0; i < flowerCount; i++) {
+      const x = 10 + Math.random() * (w - 20);
+      const y = hSVG * 0.1 + Math.random() * (hSVG * 0.5);
+      const col = flowerColors[Math.floor(Math.random() * flowerColors.length)];
+      
+      paths += `<path d="M ${x} ${hSVG} Q ${x - 5 + Math.random() * 10} ${y+15} ${x} ${y}" stroke="#006400" stroke-width="1.5" fill="none"/>`;
+      
+      const r = 2 + Math.random() * 1.5;
+      paths += `<circle cx="${x-r}" cy="${y-r}" r="${r}" fill="${col}"/>`;
+      paths += `<circle cx="${x+r}" cy="${y-r}" r="${r}" fill="${col}"/>`;
+      paths += `<circle cx="${x-r}" cy="${y+r}" r="${r}" fill="${col}"/>`;
+      paths += `<circle cx="${x+r}" cy="${y+r}" r="${r}" fill="${col}"/>`;
+      paths += `<circle cx="${x}" cy="${y}" r="${r*0.7}" fill="#FFF8DC"/>`;
+  }
+
+  const svgContent = `
+  <svg class="earthday-meadow" viewBox="0 0 ${w} ${hSVG}" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+      <g class="earthday-sway">
+          ${paths}
+      </g>
+  </svg>
+  `;
+
+  container.innerHTML = svgContent;
+}
+
+// Responsive Resize
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+const handleResize = debounce(() => {
+    const container = document.querySelector('.earthday-container');
+    if (container) {
+        container.innerHTML = '';
+        createElements();
+    }
+}, 250);
+
+window.addEventListener('resize', handleResize);
+
+function initializeEarthDay() {
+  if (!enabled) return;
+  createElements();
+  toggleEarthDay();
+}
+
+initializeEarthDay();

Jellyfin.Plugin.Seasonals/Web/easter.css

@@ -1,160 +1,63 @@
 .easter-container {
     display: block;
     position: fixed;
-  overflow: hidden;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
-  z-index: 10;
+    z-index: 10000;
+    contain: strict;
+    overflow: hidden;
+}
+
+.easter-grass-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 8vh;
+    pointer-events: none;
+    z-index: 1000;
+}
+
+.easter-meadow-layer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.easter-meadow {
+    width: 100%;
+    height: 100%;
+    display: block;
+    overflow: visible;
+}
+
+/* sway */
+.easter-sway {
+    transform-origin: bottom center;
+    animation: easter-wind-sway 6s ease-in-out infinite alternate;
+}
+
+@keyframes easter-wind-sway {
+    0% { transform: skewX(-3deg); }
+    100% { transform: skewX(5deg); }
 }
 
 .hopping-rabbit {
-    position: fixed;
+    position: absolute;
-    z-index: 15;
+    bottom: -15px;
-    bottom: 10px;
+    left: 0;
-    width: 70px;
+    width: 160px;
-    overflow: hidden;
+    height: auto;
-    pointer-events: none;
+    will-change: transform;
 }
 
-
 @media (max-width: 768px) {
     .hopping-rabbit {
         width: 60px;
     }
 }
-
-
-.easter {
-    position: fixed;
-    z-index: 15;
-    top: -10%;
-    font-size: 1em;
-    color: #fff;
-    font-family: Arial, sans-serif;
-    text-shadow: 0 0 5px #000;
-    user-select: none;
-    -webkit-user-select: none;
-    cursor: default;
-    -webkit-animation-name: easter-fall, easter-shake;
-    -webkit-animation-timing-function: linear, ease-in-out;
-    -webkit-animation-iteration-count: infinite, infinite;
-    animation-name: easter-fall, easter-shake;
-    animation-timing-function: linear, ease-in-out;
-    animation-iteration-count: infinite, infinite;
-}
-
-.easter img {
-    z-index: 15;
-    height: auto;
-    width: 20px;
-}
-
-@-webkit-keyframes easter-fall {
-    0% {
-        top: -10%;
-    }
-
-    100% {
-        top: 100%;
-    }
-}
-
-@-webkit-keyframes easter-shake {
-
-    0%,
-    100% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
-    }
-
-    50% {
-        -webkit-transform: translateX(80px);
-        transform: translateX(80px);
-    }
-}
-
-@keyframes easter-fall {
-    0% {
-        top: -10%;
-    }
-
-    100% {
-        top: 100%;
-    }
-}
-
-@keyframes easter-shake {
-
-    0%,
-    100% {
-        transform: translateX(0);
-    }
-
-    50% {
-        transform: translateX(80px);
-    }
-}
-
-
-.easter:nth-of-type(0) {
-    left: 0%;
-    animation-delay: 0s, 0s;
-}
-
-.easter:nth-of-type(1) {
-    left: 10%;
-    animation-delay: 1s, 1s;
-}
-
-.easter:nth-of-type(2) {
-    left: 20%;
-    animation-delay: 6s, 0.5s;
-}
-
-.easter:nth-of-type(3) {
-    left: 30%;
-    animation-delay: 4s, 2s;
-}
-
-.easter:nth-of-type(4) {
-    left: 40%;
-    animation-delay: 2s, 2s;
-}
-
-.easter:nth-of-type(5) {
-    left: 50%;
-    animation-delay: 8s, 3s;
-}
-
-.easter:nth-of-type(6) {
-    left: 60%;
-    animation-delay: 6s, 2s;
-}
-
-.easter:nth-of-type(7) {
-    left: 70%;
-    animation-delay: 2.5s, 1s;
-}
-
-.easter:nth-of-type(8) {
-    left: 80%;
-    animation-delay: 1s, 0s;
-}
-
-.easter:nth-of-type(9) {
-    left: 90%;
-    animation-delay: 3s, 1.5s;
-}
-
-.easter:nth-of-type(10) {
-    left: 25%;
-    animation-delay: 2s, 0s;
-}
-
-.easter:nth-of-type(11) {
-    left: 65%;
-    animation-delay: 4s, 2.5s;
-}

Jellyfin.Plugin.Seasonals/Web/easter.js

@@ -1,66 +1,19 @@
 const config = window.SeasonalsPluginConfig?.Easter || {};
 
-const easter = config.EnableEaster !== undefined ? config.EnableEaster : true; // enable/disable easter
+const easter = config.EnableEaster !== undefined ? config.EnableEaster : true;
-const randomEaster = config.EnableRandomEaster !== undefined ? config.EnableRandomEaster : true; // enable random easter
+const enableBunny = config.EnableBunny !== undefined ? config.EnableBunny : true;
-const randomEasterMobile = config.EnableRandomEasterMobile !== undefined ? config.EnableRandomEasterMobile : false; // enable random easter on mobile devices (Warning: High values may affect performance)
+/* MARK: Bunny movement config */
-const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different duration for the random easter
+const jumpDistanceVw = 5; // Distance in vw the bunny covers per jump
-const easterEggCount = config.EggCount || 20; // count of random extra easter
+const jumpDurationMs = 770; // Time in ms the bunny spends moving during a jump
+const pauseDurationMs = 116.6666; // Time in ms the bunny pauses between jumps
 
-const bunny = config.EnableBunny !== undefined ? config.EnableBunny : true; // enable/disable hopping bunny
+const minBunnyRestTime = config.MinBunnyRestTime || 2000;
-const bunnyDuration = config.BunnyDuration || 12000; // duration of the bunny animation in ms
+const maxBunnyRestTime = config.MaxBunnyRestTime || 5000;
-const hopHeight = config.HopHeight || 12; // height of the bunny hops in px
+const eggCount = config.EggCount || 15;
-const minBunnyRestTime = config.MinBunnyRestTime || 2000; // minimum time the bunny rests in ms
-const maxBunnyRestTime = config.MaxBunnyRestTime || 5000; // maximum time the bunny rests in ms
 
+const rabbit = "../Seasonals/Resources/easter_images/Osterhase.gif";
 
-let msgPrinted = false; // flag to prevent multiple console messages
+const easterEggImages = [
-let animationFrameId;
-
-// function to check and control the easter
-function toggleEaster() {
-    const easterContainer = document.querySelector('.easter-container');
-    if (!easterContainer) return;
-
-    const videoPlayer = document.querySelector('.videoPlayerContainer');
-    const trailerPlayer = document.querySelector('.youtubePlayerContainer');
-    const isDashboard = document.body.classList.contains('dashboardDocument');
-    const hasUserMenu = document.querySelector('#app-user-menu');
-
-    // hide easter if video/trailer player is active or dashboard is visible
-    if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
-        easterContainer.style.display = 'none'; // hide easter
-        if (animationFrameId) {
-            cancelAnimationFrame(animationFrameId);
-            animationFrameId = null;
-        }
-        if (!msgPrinted) {
-            console.log('Easter hidden');
-            msgPrinted = true;
-        }
-    } else {
-        easterContainer.style.display = 'block'; // show easter
-        if (!animationFrameId) {
-            animateRabbit(); // start animation
-        }
-        if (msgPrinted) {
-            console.log('Easter visible');
-            msgPrinted = false;
-        }
-    }
-}
-
-// observe changes in the DOM
-const observer = new MutationObserver(toggleEaster);
-
-// start observation
-observer.observe(document.body, {
-    childList: true,    // observe adding/removing of child elements
-    subtree: true,      // observe all levels of the DOM tree
-    attributes: true    // observe changes to attributes (e.g. class changes)
-});
-
-
-const images = [
     "../Seasonals/Resources/easter_images/egg_1.png",
     "../Seasonals/Resources/easter_images/egg_2.png",
     "../Seasonals/Resources/easter_images/egg_3.png",
@@ -73,121 +26,238 @@ const images = [
     "../Seasonals/Resources/easter_images/egg_10.png",
     "../Seasonals/Resources/easter_images/egg_11.png",
     "../Seasonals/Resources/easter_images/egg_12.png",
+    "../Seasonals/Resources/easter_images/eggs.png"
 ];
-const  rabbit = "../Seasonals/Resources/easter_images/easter-bunny.png";
 
-function addRandomEaster(count) {
+let msgPrinted = false;
-    const easterContainer = document.querySelector('.easter-container'); // get the leave container
-    if (!easterContainer) return; // exit if leave container is not found
-
-    console.log('Adding random easter eggs');
-
-    // Array of leave characters
-    for (let i = 0; i < count; i++) {
-        // create a new leave element
-        const eggDiv = document.createElement('div');
-        eggDiv.className = "easter";
-
-        // pick a random easter symbol
-        const imageSrc = images[Math.floor(Math.random() * images.length)];
-        const img = document.createElement("img");
-        img.src = imageSrc;
-
-        eggDiv.appendChild(img);
-
-        // set random horizontal position, animation delay and size(uncomment lines to enable) 
-        const randomLeft = Math.random() * 100; // position (0% to 100%)
-        const randomAnimationDelay = Math.random() * 12; // delay (0s to 12s)
-        const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
-
-        // apply styles
-        eggDiv.style.left = `${randomLeft}%`;
-        eggDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
-
-        // set random animation duration
-        if (enableDiffrentDuration) {
-            const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
-            const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
-            eggDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
-        }
-
-
-        // add the leave to the container
-        easterContainer.appendChild(eggDiv);
-    }
-    console.log('Random easter added');
-}
-
-function addHoppingRabbit() {
-    if (!bunny) return; // Nur ausführen, wenn Easter aktiviert ist
 
+// Check visibility
+function toggleEaster() {
     const easterContainer = document.querySelector('.easter-container');
     if (!easterContainer) return;
 
-    // Hase erstellen
+    const videoPlayer = document.querySelector('.videoPlayerContainer');
+    const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+    const isDashboard = document.body.classList.contains('dashboardDocument');
+    const hasUserMenu = document.querySelector('#app-user-menu');
+
+    if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+        easterContainer.style.display = 'none';
+        if (rabbitTimeout) {
+            clearTimeout(rabbitTimeout);
+            isAnimating = false;
+        }
+        if (!msgPrinted) {
+            console.log('Easter hidden');
+            msgPrinted = true;
+        }
+    } else {
+        easterContainer.style.display = 'block';
+        if (!isAnimating && enableBunny) {
+            animateRabbit(document.querySelector('#rabbit'));
+        }
+        if (msgPrinted) {
+            console.log('Easter visible');
+            msgPrinted = false;
+        }
+    }
+}
+
+const observer = new MutationObserver(toggleEaster);
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
+
+
+function createEasterGrassAndEggs(container) {
+    let grassContainer = container.querySelector('.easter-grass-container');
+    if (!grassContainer) {
+        grassContainer = document.createElement('div');
+        grassContainer.className = 'easter-grass-container';
+        container.appendChild(grassContainer);
+    }
+    
+    grassContainer.innerHTML = '';
+    
+    let pathsBg = '';
+    let pathsFg = '';
+    const w = window.innerWidth;
+    const hSVG = 80; // Grass 80px high
+    
+    // Generate Grass
+    const bladeCount = w / 5;
+    for (let i = 0; i < bladeCount; i++) {
+        const height = Math.random() * 40 + 20;
+        const x = i * 5 + Math.random() * 3;
+        const hue = 80 + Math.random() * 40; // slightly more yellow-green for spring/easter
+        const color = `hsl(${hue}, 60%, 40%)`;
+        const line = `<line x1="${x}" y1="${hSVG}" x2="${x}" y2="${hSVG - height}" stroke="${color}" stroke-width="2" />`;
+        if (Math.random() > 0.33) pathsBg += line; else pathsFg += line;
+    }
+
+    for (let i = 0; i < 200; i++) {
+        const x = Math.random() * w;
+        const h = 20 + Math.random() * 50;
+        const cY = hSVG - h;
+        const bend = x + (Math.random() * 40 - 20);
+        const color = Math.random() > 0.5 ? '#4caf50' : '#8bc34a';
+        const width = 1 + Math.random() * 2;
+        const path = `<path d="M ${x} ${hSVG} Q ${bend} ${cY+20} ${bend} ${cY}" stroke="${color}" stroke-width="${width}" fill="none"/>`;
+        if (Math.random() > 0.33) pathsBg += path; else pathsFg += path;
+    }
+
+    // Generate Flowers
+    const colors = ['#FF69B4', '#FFD700', '#87CEFA', '#FF4500', '#BA55D3', '#FFA500', '#FF1493'];
+    for (let i = 0; i < 40; i++) {
+        const x = 10 + Math.random() * (w - 20);
+        const y = hSVG * 0.1 + Math.random() * (hSVG * 0.5);
+        const col = colors[Math.floor(Math.random() * colors.length)];
+        
+        let path = '';
+        path += `<path d="M ${x} ${hSVG} Q ${x - 5 + Math.random() * 10} ${y+15} ${x} ${y}" stroke="#006400" stroke-width="1.5" fill="none"/>`;
+        
+        const r = 2 + Math.random() * 1.5;
+        path += `<circle cx="${x-r}" cy="${y-r}" r="${r}" fill="${col}"/>`;
+        path += `<circle cx="${x+r}" cy="${y-r}" r="${r}" fill="${col}"/>`;
+        path += `<circle cx="${x-r}" cy="${y+r}" r="${r}" fill="${col}"/>`;
+        path += `<circle cx="${x+r}" cy="${y+r}" r="${r}" fill="${col}"/>`;
+        path += `<circle cx="${x}" cy="${y}" r="${r*0.7}" fill="#FFF8DC"/>`;
+        
+        if (Math.random() > 0.33) pathsBg += path; else pathsFg += path;
+    }
+
+    grassContainer.innerHTML = `
+    <div class="easter-meadow-layer" style="z-index: 1001;">
+        <svg class="easter-meadow" viewBox="0 0 ${w} ${hSVG}" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+            <g class="easter-sway">
+                ${pathsBg}
+            </g>
+        </svg>
+    </div>
+    <div class="easter-meadow-layer" style="z-index: 1003;">
+        <svg class="easter-meadow" viewBox="0 0 ${w} ${hSVG}" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+            <g class="easter-sway" style="animation-delay: -2s;">
+                ${pathsFg}
+            </g>
+        </svg>
+    </div>
+    `;
+
+    // Add Easter Eggs
+    for (let i = 0; i < eggCount; i++) {
+        const x = 2 + Math.random() * 96;
+        const y = Math.random() * 18; // 0 to 18px off bottom
+        const imageSrc = easterEggImages[Math.floor(Math.random() * easterEggImages.length)];
+        
+        const eggImg = document.createElement('img');
+        eggImg.src = imageSrc;
+        eggImg.style.position = 'absolute';
+        eggImg.style.left = `${x}vw`;
+        eggImg.style.bottom = `${y}px`;
+        eggImg.style.width = `${15 + Math.random() * 10}px`;
+        eggImg.style.height = 'auto';
+        eggImg.style.transform = `rotate(${Math.random() * 60 - 30}deg)`;
+        eggImg.style.zIndex = Math.random() > 0.5 ? '1000' : '1004'; // Between grass layers
+        
+        grassContainer.appendChild(eggImg);
+    }
+}
+
+let rabbitTimeout;
+let isAnimating = false;
+
+function addHoppingRabbit(container) {
+    if (!enableBunny) return;
+
     const rabbitImg = document.createElement("img");
     rabbitImg.id = "rabbit";
-    rabbitImg.src = rabbit; // Bildpfad aus der bestehenden Definition
+    rabbitImg.src = rabbit;
-    rabbitImg.alt = "Hoppelnder Osterhase";
+    rabbitImg.alt = "Hopping Easter Bunny";
+    rabbitImg.className = "hopping-rabbit";
     
-    // CSS-Klassen hinzufügen
+    rabbitImg.style.bottom = "-15px";
-    rabbitImg.classList.add("hopping-rabbit");
+    rabbitImg.style.position = "absolute";
 
-    easterContainer.appendChild(rabbitImg);
+    container.appendChild(rabbitImg);
-
-    rabbitImg.style.bottom = (hopHeight / 2 + 6) + "px";
 
     animateRabbit(rabbitImg);
 }
 
-function animateRabbit(rabbitElement) {
+function animateRabbit(rabbit) {
-    const rabbit = rabbitElement || document.querySelector('#rabbit');
+    if (!rabbit || isAnimating) return;
-    if (!rabbit) return;
+    isAnimating = true;
+
+    const startFromLeft = Math.random() >= 0.5;
+    const startX = startFromLeft ? -15 : 115;
+    let currentX = startX;
+    const endX = startFromLeft ? 115 : -15;
+    const direction = startFromLeft ? 1 : -1;
+
+    rabbit.style.transition = 'none';
+    const transformScale = startFromLeft ? 'scaleX(-1)' : '';
+    rabbit.style.transform = `translateX(${currentX}vw) ${transformScale}`;
+
+    const loopDurationMs = jumpDurationMs + pauseDurationMs;
 
     let startTime = null;
 
     function animationStep(timestamp) {
+        if (!document.querySelector('.easter-container') || rabbit.style.display === 'none') {
+            isAnimating = false;
+            return;
+        }
+
         if (!startTime) {
             startTime = timestamp;
-
+            // resetting gif, forces the browser to restart the GIF from the first frame (crucial for syncing hops with movement)
-            // random start position and direction
+            const currSrc = rabbit.src.split('?')[0];
-            const startFromLeft = Math.random() >= 0.5;
+            rabbit.src = '';
-            rabbit.startX = startFromLeft ? -10 : 110;
+            rabbit.src = currSrc;
-            rabbit.endX = startFromLeft ? 110 : -10;
-            rabbit.direction = startFromLeft ? 1 : -1;
-
-            // mirror the rabbit image if it starts from the right
-            rabbit.style.transform = startFromLeft ? '' : 'scaleX(-1)';
         }
-        const progress = timestamp - startTime;
 
-        // calculate the horizontal position (linear interpolation)
+        const elapsed = timestamp - startTime;
-        const x = rabbit.startX + (progress / bunnyDuration) * (rabbit.endX - rabbit.startX);
         
-        // calculate the vertical position (sinus curve)
+        const completedLoops = Math.floor(elapsed / loopDurationMs);
-        const y = Math.sin((progress / 500) * Math.PI) * hopHeight; // 500ms for one hop
+        const timeInCurrentLoop = elapsed % loopDurationMs;
 
-        // set the new position
+        // Determine if we are currently jumping or pausing
-        rabbit.style.transform = `translate(${x}vw, ${y}px) scaleX(${rabbit.direction})`;
+        let currentLoopDistance = 0;
-
+        if (timeInCurrentLoop < jumpDurationMs) {
-        if (progress < bunnyDuration) {
+            // We are in the jumping phase
-            animationFrameId = requestAnimationFrame(animationStep);
+            currentLoopDistance = (timeInCurrentLoop / jumpDurationMs) * jumpDistanceVw;
         } else {
-            // let the bunny rest for a while before hiding easter eggs again
+            // We are in the paused phase
-            const pauseDuration = Math.random() * (maxBunnyRestTime - minBunnyRestTime) + minBunnyRestTime;
+            currentLoopDistance = jumpDistanceVw;
-            setTimeout(() => {
-                startTime = null;
-                animationFrameId = requestAnimationFrame(animationStep);
-            }, pauseDuration);
-        }
         }
 
-    animationFrameId = requestAnimationFrame(animationStep);
+        currentX = startX + (completedLoops * jumpDistanceVw + currentLoopDistance) * direction;
+        
+        // Update DOM without CSS transitions
+        rabbit.style.transform = `translateX(${currentX}vw) ${transformScale}`;
+
+        // Check if finished crossing
+        if ((direction === 1 && currentX >= endX) || (direction === -1 && currentX <= endX)) {
+            let restTime = Math.random() * (maxBunnyRestTime - minBunnyRestTime) + minBunnyRestTime;
+
+            isAnimating = false;
+            rabbitTimeout = setTimeout(() => {
+                animateRabbit(document.querySelector('#rabbit'));
+            }, restTime);
+            return;
         }
 
+        rabbitTimeout = requestAnimationFrame(animationStep);
+    }
+
+    // Start loop
+    rabbitTimeout = requestAnimationFrame(animationStep);
+}
+
+function initializeEaster() {
+    if (!easter) return;
 
-// initialize standard easter
-function initEaster() {
     const container = document.querySelector('.easter-container') || document.createElement("div");
 
     if (!document.querySelector('.easter-container')) {
@@ -196,48 +266,17 @@ function initEaster() {
         document.body.appendChild(container);
     }
 
-    // shuffle the easter images
+    createEasterGrassAndEggs(container);
-    let currentIndex = images.length;
+    addHoppingRabbit(container);
-    let randomIndex;
+    
-    while (currentIndex != 0) {
+    // Add resize listener to regenerate meadow
-        randomIndex = Math.floor(Math.random() * currentIndex);
+    window.addEventListener('resize', () => {
-        currentIndex--;
+        if(document.querySelector('.easter-container')) {
-        [images[currentIndex], images[randomIndex]] = [images[randomIndex], images[currentIndex]];
+            createEasterGrassAndEggs(container);
         }
+    });
 
-    for (let i = 0; i < 12; i++) {
-        const eggDiv = document.createElement("div");
-        eggDiv.className = "easter";
-
-        const img = document.createElement("img");
-        img.src = images[i];
-
-        // set random animation duration
-        if (enableDiffrentDuration) {
-            const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
-            const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
-            eggDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
-        }
-
-        eggDiv.appendChild(img);
-        container.appendChild(eggDiv);
-    }
-
-    addHoppingRabbit();
-}
-
-
-// initialize easter and add random easter after the DOM is loaded
-function initializeEaster() {
-    if (!easter) return; // exit if easter are disabled
-    initEaster();
     toggleEaster();
-
-    const screenWidth = window.innerWidth;
-    if (randomEaster && (screenWidth > 768 || randomEasterMobile)) { // add random easter only on larger screens, unless enabled for mobile devices
-        addRandomEaster(easterEggCount);
 }
-}
-
 
 initializeEaster();

Jellyfin.Plugin.Seasonals/Web/eid.css

@@ -0,0 +1,53 @@
+.eid-container {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10;
+    contain: strict;
+    overflow: hidden;
+}
+
+.eid-symbol {
+    position: absolute;
+    user-select: none;
+    font-size: 1.5em;
+}
+
+.eid-symbol.floating-star {
+    opacity: 0;
+    animation: eid-twinkle 4s ease-in-out infinite;
+    mix-blend-mode: screen;
+}
+
+.lantern-rope {
+    position: absolute;
+    top: 0;
+    width: 2px;
+    background: linear-gradient(to bottom, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.6));
+    transform-origin: top center;
+    animation: lantern-swing 4s ease-in-out infinite alternate;
+}
+
+.lantern-emoji {
+    position: absolute;
+    bottom: -20px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 2.5em;
+    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
+}
+
+@keyframes lantern-swing {
+    0% { transform: rotate(-8deg); }
+    100% { transform: rotate(8deg); }
+}
+
+@keyframes eid-twinkle {
+    0% { transform: scale(0.8); opacity: 0; text-shadow: 0 0 5px gold; }
+    50% { transform: scale(1.2); opacity: 0.8; text-shadow: 0 0 20px gold; }
+    100% { transform: scale(0.8); opacity: 0; text-shadow: 0 0 5px gold; }
+}

Jellyfin.Plugin.Seasonals/Web/eid.js

@@ -0,0 +1,96 @@
+const config = window.SeasonalsPluginConfig?.Eid || {};
+const eid = config.EnableEid !== undefined ? config.EnableEid : true;
+
+const eidSymbols = ['🌙', '⭐', '✨'];
+
+let msgPrinted = false;
+
+function toggleEid() {
+    const container = document.querySelector('.eid-container');
+    if (!container) return;
+
+    const videoPlayer = document.querySelector('.videoPlayerContainer');
+    const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+    const isDashboard = document.body.classList.contains('dashboardDocument');
+    const hasUserMenu = document.querySelector('#app-user-menu');
+
+    if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+        container.style.display = 'none';
+        if (!msgPrinted) {
+            console.log('Eid hidden');
+            msgPrinted = true;
+        }
+    } else {
+        container.style.display = 'block';
+        if (msgPrinted) {
+            console.log('Eid visible');
+            msgPrinted = false;
+        }
+    }
+}
+
+const observer = new MutationObserver(toggleEid);
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
+
+
+function createEid(container) {
+    const starCount = 20;
+    const lanternCount = Math.floor(Math.random() * 3) + 4; // 4 to 6 lanterns
+
+    // Create evenly spaced lanterns
+    const segmentWidth = 100 / lanternCount;
+    for (let i = 0; i < lanternCount; i++) {
+        const symbol = document.createElement('div');
+        symbol.className = 'eid-symbol lantern-rope';
+        
+        // Base position within segment, with slight random jitter
+        const baseLeft = (i * segmentWidth) + (segmentWidth * 0.2);
+        const jitter = Math.random() * (segmentWidth * 0.6);
+        symbol.style.left = `${baseLeft + jitter}%`;
+        
+        symbol.style.animationDelay = `${Math.random() * -4}s`;
+        const ropeLen = 15 + Math.random() * 15; // 15vh to 30vh
+        symbol.style.height = `${ropeLen}vh`;
+
+        const lanternSpan = document.createElement('span');
+        lanternSpan.className = 'lantern-emoji';
+        lanternSpan.textContent = '🏮';
+        symbol.appendChild(lanternSpan);
+        
+        container.appendChild(symbol);
+    }
+    
+    // Create random floating stars
+    for (let i = 0; i < starCount; i++) {
+        const symbol = document.createElement('div');
+        symbol.className = 'eid-symbol floating-star';
+        symbol.textContent = eidSymbols[Math.floor(Math.random() * eidSymbols.length)];
+        symbol.style.left = `${Math.random() * 100}%`;
+        symbol.style.top = `${Math.random() * 100}%`;
+        symbol.style.animationDelay = `${Math.random() * -5}s`;
+        
+        symbol.addEventListener('animationiteration', () => {
+            symbol.style.left = `${Math.random() * 90 + 5}%`;
+            symbol.style.top = `${Math.random() * 100}%`;
+        });
+
+        container.appendChild(symbol);
+    }
+}
+
+function initializeEid() {
+    if (!eid) return;
+    const container = document.querySelector('.eid-container') || document.createElement("div");
+    if (!document.querySelector('.eid-container')) {
+        container.className = "eid-container";
+        container.setAttribute("aria-hidden", "true");
+        document.body.appendChild(container);
+    }
+    createEid(container);
+    toggleEid();
+}
+initializeEid();

Jellyfin.Plugin.Seasonals/Web/eurovision.css

@@ -0,0 +1,42 @@
+.eurovision-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+    z-index: 1000;
+    overflow: hidden;
+    contain: layout paint;
+}
+
+.music-note-wrapper {
+    position: absolute;
+    left: 0;
+    opacity: 0;
+    animation: move-right linear infinite;
+    will-change: transform, opacity;
+}
+
+.music-note {
+    display: block;
+    font-size: 2rem;
+    color: rgba(255, 255, 255, 0.9);
+    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
+    animation: sway ease-in-out infinite alternate;
+    will-change: transform;
+}
+
+/* Horizontal scroll from left to right */
+@keyframes move-right {
+    0%   { transform: translateX(-10vw); opacity: 0; }
+    10%  { opacity: 1; }
+    90%  { opacity: 1; }
+    100% { transform: translateX(110vw); opacity: 0; }
+}
+
+/* Sine-wave style vertical bouncing for the note itself */
+@keyframes sway {
+    0%   { transform: translateY(-30px); }
+    100% { transform: translateY(30px); }
+}

Jellyfin.Plugin.Seasonals/Web/eurovision.js

@@ -0,0 +1,101 @@
+const config = window.SeasonalsPluginConfig?.Eurovision || {};
+
+const enabled = config.EnableEurovision !== undefined ? config.EnableEurovision : true;
+const elementCount = config.SymbolCount || 25;
+const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true;
+const enableColorfulNotes = config.EnableColorfulNotes !== undefined ? config.EnableColorfulNotes : true;
+const eurovisionColorsStr = config.EurovisionColors || '#ff0026ff, #17a6ffff, #32d432ff, #FFD700, #f0821bff, #f826f8ff';
+const glowSize = config.EurovisionGlowSize !== undefined ? config.EurovisionGlowSize : 2;
+
+let msgPrinted = false;
+
+// Toggle Function
+function toggleEurovision() {
+  const container = document.querySelector('.eurovision-container');
+  if (!container) return;
+
+  const videoPlayer = document.querySelector('.videoPlayerContainer');
+  const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+  const isDashboard = document.body.classList.contains('dashboardDocument');
+  const hasUserMenu = document.querySelector('#app-user-menu');
+
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    container.style.display = 'none';
+    if (!msgPrinted) {
+      console.log('Eurovision hidden');
+      msgPrinted = true;
+    }
+  } else {
+    container.style.display = 'block';
+    if (msgPrinted) {
+      console.log('Eurovision visible');
+      msgPrinted = false;
+    }
+  }
+}
+
+const observer = new MutationObserver(toggleEurovision);
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
+
+function createElements() {
+  const container = document.querySelector('.eurovision-container') || document.createElement('div');
+
+  if (!document.querySelector('.eurovision-container')) {
+    container.className = 'eurovision-container';
+    container.setAttribute('aria-hidden', 'true');
+    document.body.appendChild(container);
+  }
+
+  const notesSymbols = ['♪', '♫', '♬', '♭', '♮', '♯', '𝄞', '𝄢'];
+  const pColors = eurovisionColorsStr.split(',').map(s => s.trim()).filter(s => s);
+
+  for (let i = 0; i < elementCount; i++) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'music-note-wrapper';
+    
+    const note = document.createElement('span');
+    note.className = 'music-note';
+    note.textContent = notesSymbols[Math.floor(Math.random() * notesSymbols.length)];
+    wrapper.appendChild(note);
+
+    wrapper.style.top = `${Math.random() * 90}vh`;
+
+    const minMoveDur = 10;
+    const maxMoveDur = 25;
+    const moveDur = enableDifferentDuration 
+        ? minMoveDur + Math.random() * (maxMoveDur - minMoveDur) 
+        : (minMoveDur + maxMoveDur) / 2;
+    wrapper.style.animationDuration = `${moveDur}s`;
+    wrapper.style.animationDelay = `${Math.random() * 15}s`;
+
+    const minSwayDur = 1;
+    const maxSwayDur = 3;
+    const swayDur = minSwayDur + Math.random() * (maxSwayDur - minSwayDur);
+    note.style.animationDuration = `${swayDur}s`;
+    note.style.animationDelay = `${Math.random() * 2}s`;
+
+    note.style.fontSize = `${Math.random() * 1.5 + 1.5}rem`;
+
+    if (enableColorfulNotes && pColors.length > 0) {
+        note.style.color = pColors[Math.floor(Math.random() * pColors.length)];
+        note.style.textShadow = `0 0 ${glowSize}px ${note.style.color}`;
+    } else {
+        note.style.color = `rgba(255, 255, 255, 0.9)`;
+        note.style.textShadow = `0 0 ${glowSize}px rgba(255, 255, 255, 0.6)`;
+    }
+
+    container.appendChild(wrapper);
+  }
+}
+
+function initializeEurovision() {
+  if (!enabled) return;
+  createElements();
+  toggleEurovision();
+}
+
+initializeEurovision();

Jellyfin.Plugin.Seasonals/Web/filmnoir.css

@@ -0,0 +1,86 @@
+.filmnoir-tint {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+    z-index: 10000;
+    background-color: #8c7355;
+    mix-blend-mode: color;
+}
+
+.filmnoir-effects {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+    z-index: 1100;
+}
+
+/* Film grain */
+.filmnoir-grain {
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="200" height="200" filter="url(%23n)" opacity="0.4"/></svg>');
+    animation: grain-dance 0.2s steps(4) infinite;
+    pointer-events: none;
+    mix-blend-mode: overlay;
+    opacity: 0.3;
+}
+
+/* Vignette */
+.filmnoir-vignette {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.8) 120%);
+    box-shadow: inset 0 0 100px rgba(0,0,0,0.6);
+}
+
+/* Occasional flicker and scratch */
+.filmnoir-scratches {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    background: linear-gradient(to right, transparent 50%, rgba(255,255,255,0.2) 51%, transparent 52%);
+    background-size: 200% 100%;
+    animation: scratch 4s infinite linear, flicker 6s infinite alternate;
+    opacity: 0.2;
+    mix-blend-mode: screen;
+}
+
+@keyframes grain-dance {
+    0% { transform: translate(0,0); }
+    25% { transform: translate(-5%,-5%); }
+    50% { transform: translate(-10%,5%); }
+    75% { transform: translate(5%,-10%); }
+    100% { transform: translate(0,0); }
+}
+
+@keyframes scratch {
+    0% { background-position: -200% 0; }
+    10% { background-position: 200% 0; }
+    100% { background-position: 200% 0; }
+}
+
+@keyframes flicker {
+    0% { opacity: 0.2; }
+    5% { opacity: 0.1; }
+    10% { opacity: 0.3; }
+    15% { opacity: 0.2; }
+    50% { opacity: 0.15; }
+    55% { opacity: 0.25; }
+    100% { opacity: 0.2; }
+}

Jellyfin.Plugin.Seasonals/Web/filmnoir.js

@@ -0,0 +1,79 @@
+const config = window.SeasonalsPluginConfig?.FilmNoir || {};
+const filmnoir = config.EnableFilmNoir !== undefined ? config.EnableFilmNoir : true;
+
+let msgPrinted = false;
+
+function toggleFilmNoir() {
+    const tint = document.querySelector('.filmnoir-tint');
+    const effects = document.querySelector('.filmnoir-effects');
+    if (!tint || !effects) return;
+
+    const videoPlayer = document.querySelector('.videoPlayerContainer');
+    const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+    const isDashboard = document.body.classList.contains('dashboardDocument');
+    const hasUserMenu = document.querySelector('#app-user-menu');
+
+    if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+        tint.style.display = 'none';
+        effects.style.display = 'none';
+        if (!msgPrinted) {
+            console.log('FilmNoir hidden');
+            msgPrinted = true;
+        }
+    } else {
+        tint.style.display = 'block';
+        effects.style.display = 'block';
+        if (msgPrinted) {
+            console.log('FilmNoir visible');
+            msgPrinted = false;
+        }
+    }
+}
+
+const observer = new MutationObserver(toggleFilmNoir);
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
+
+
+function createFilmNoir() {
+    if (!document.querySelector('.filmnoir-tint')) {
+        const tint = document.createElement('div');
+        tint.className = 'filmnoir-tint';
+        tint.setAttribute('aria-hidden', 'true');
+        document.body.appendChild(tint);
+    }
+
+    let effects = document.querySelector('.filmnoir-effects');
+    if (!effects) {
+        effects = document.createElement('div');
+        effects.className = 'filmnoir-effects';
+        effects.setAttribute('aria-hidden', 'true');
+        document.body.appendChild(effects);
+
+        const vignette = document.createElement('div');
+        vignette.className = 'filmnoir-vignette';
+
+        const grain = document.createElement('div');
+        grain.className = 'filmnoir-grain';
+
+        const scratches = document.createElement('div');
+        scratches.className = 'filmnoir-scratches';
+
+        effects.appendChild(grain);
+        effects.appendChild(scratches);
+        effects.appendChild(vignette);
+    }
+}
+
+
+function initializeFilmNoir() {
+    if (!filmnoir) return;
+    
+    createFilmNoir();
+    toggleFilmNoir();
+}
+
+initializeFilmNoir();

Jellyfin.Plugin.Seasonals/Web/fireworks.css

@@ -7,6 +7,7 @@
   height: 100%;
   pointer-events: none;
   z-index: 10;
+  contain: layout paint;
 }
 
 .rocket-trail {

Jellyfin.Plugin.Seasonals/Web/fireworks.js

@@ -60,9 +60,9 @@ const observer = new MutationObserver(toggleFirework);
 
 // start observation
 observer.observe(document.body, {
-  childList: true,    // observe adding/removing of child elements
+  childList: true,
-  subtree: true,      // observe all levels of the DOM tree
+  subtree: true,
-  attributes: true    // observe changes to attributes (e.g. class changes)
+  attributes: true 
 });
 
 

Jellyfin.Plugin.Seasonals/Web/friday13.css

@@ -0,0 +1,34 @@
+.friday13-container {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10000;
+    contain: strict;
+    overflow: hidden;
+}
+
+.friday13-cat {
+    position: absolute;
+    width: 150px; /* MARK: Cat size */
+    height: auto;
+    user-select: none;
+    animation-timing-function: linear;
+    opacity: 0;
+}
+
+@keyframes cat-walk-right {
+    0% { left: -10vw; transform: scaleX(-1); opacity: 1; }
+    99% { left: 110vw; transform: scaleX(-1); opacity: 1; }
+    100% { opacity: 0; transform: scaleX(-1); left: 110vw; }
+}
+
+@keyframes cat-walk-left {
+    0% { left: 110vw; transform: scaleX(1); opacity: 1; }
+    99% { left: -10vw; transform: scaleX(1); opacity: 1; }
+    100% { opacity: 0; transform: scaleX(1); left: -10vw; }
+}
+

Jellyfin.Plugin.Seasonals/Web/friday13.js

@@ -0,0 +1,83 @@
+const config = window.SeasonalsPluginConfig?.Friday13 || {};
+const friday13 = config.EnableFriday13 !== undefined ? config.EnableFriday13 : true;
+
+let msgPrinted = false;
+
+function toggleFriday13() {
+    const container = document.querySelector('.friday13-container');
+    if (!container) return;
+
+    const videoPlayer = document.querySelector('.videoPlayerContainer');
+    const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+    const isDashboard = document.body.classList.contains('dashboardDocument');
+    const hasUserMenu = document.querySelector('#app-user-menu');
+
+    if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+        container.style.display = 'none';
+        if (!msgPrinted) {
+            console.log('Friday13 hidden');
+            msgPrinted = true;
+        }
+    } else {
+        container.style.display = 'block';
+        if (msgPrinted) {
+            console.log('Friday13 visible');
+            msgPrinted = false;
+        }
+    }
+}
+
+const observer = new MutationObserver(toggleFriday13);
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
+
+function createFriday13(container) {
+    function spawnCat() {
+        // MARK: Height of the cat from bottom
+        const catBottomPosition = "-15px"; 
+        // MARK: Time it takes for the cat to cross the screen
+        const catWalkDurationSeconds = 20;
+        
+        const cat = document.createElement('img');
+        cat.className = 'friday13-cat';
+        cat.src = '../Seasonals/Resources/friday_assets/black-cat.gif';
+        cat.style.bottom = catBottomPosition;
+        
+        // Either walk left to right or right to left
+        const dir = Math.random() > 0.5 ? 'right' : 'left';
+        cat.style.animationName = `cat-walk-${dir}`;
+        cat.style.animationDuration = `${catWalkDurationSeconds}s`;
+        cat.style.animationIterationCount = `1`; // play once and remove
+        cat.style.animationFillMode = `forwards`;
+        
+        container.appendChild(cat);
+        
+        // Remove and respawn
+        setTimeout(() => {
+            if (cat.parentNode) {
+                cat.parentNode.removeChild(cat);
+            }
+            // Respawn with random delay between 5 to 25 seconds
+            setTimeout(spawnCat, Math.random() * 20000 + 5000);
+        }, (catWalkDurationSeconds * 1000) + 500); // Wait for duration + 500ms safety margin
+    }
+    
+    // Initial spawn with random delay
+    setTimeout(spawnCat, Math.random() * 5000);
+}
+
+function initializeFriday13() {
+    if (!friday13) return;
+    const container = document.querySelector('.friday13-container') || document.createElement("div");
+    if (!document.querySelector('.friday13-container')) {
+        container.className = "friday13-container";
+        container.setAttribute("aria-hidden", "true");
+        document.body.appendChild(container);
+    }
+    createFriday13(container);
+    toggleFriday13();
+}
+initializeFriday13();

Jellyfin.Plugin.Seasonals/Web/frost.css

@@ -0,0 +1,74 @@
+.frost-container {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10;
+    overflow: hidden;
+    contain: strict;
+}
+
+.frost-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    /* A glowing white-blue gradient from edges */
+    background: radial-gradient(ellipse at center, transparent 60%, rgba(180, 220, 255, 0.4) 100%);
+    box-shadow: inset 0 0 60px rgba(200, 230, 255, 0.5), inset 0 0 120px rgba(255, 255, 255, 0.3);
+    
+    filter: url('#frost-filter');
+    
+    animation: frost-creep 4s ease-out forwards;
+}
+
+/* Subtle repeating star/crystal pattern */
+.frost-crystals {
+    position: absolute;
+    top: -5%;
+    left: -5%;
+    width: 110%;
+    height: 110%;
+    /* Use multi-layered star patterns for a random, crystalline spread */
+    background-image: 
+        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><circle cx="10" cy="10" r="1.5" fill="rgba(255,255,255,0.2)"/><circle cx="40" cy="30" r="1" fill="rgba(255,255,255,0.15)"/><circle cx="20" cy="50" r="2" fill="rgba(255,255,255,0.1)"/><path d="M50 10 L51 15 L56 16 L51 17 L50 22 L49 17 L44 16 L49 15 Z" fill="rgba(255,255,255,0.2)"/></svg>'),
+        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="5" cy="20" r="1" fill="rgba(255,255,255,0.15)"/><circle cx="25" cy="5" r="1.5" fill="rgba(255,255,255,0.1)"/><path d="M20 20 L21 23 L24 24 L21 25 L20 28 L19 25 L16 24 L19 23 Z" fill="rgba(255,255,255,0.15)"/></svg>'),
+        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><circle cx="15" cy="15" r="1" fill="rgba(255,255,255,0.2)"/><circle cx="5" cy="5" r="0.8" fill="rgba(255,255,255,0.1)"/></svg>');
+    background-repeat: repeat;
+    background-size: 110px 110px, 60px 60px, 30px 30px;
+    background-position: 0 0, 15px 15px, 5px 10px;
+    mix-blend-mode: overlay;
+    
+    /* Mask out the center so crystals only appear strongly on the edges */
+    -webkit-mask-image: radial-gradient(ellipse at center, transparent 50%, black 100%);
+    mask-image: radial-gradient(ellipse at center, transparent 50%, black 100%);
+    
+    animation: frost-shimmer 6s infinite alternate ease-in-out;
+}
+
+@keyframes frost-creep {
+    0% {
+        opacity: 0;
+        box-shadow: inset 0 0 10px rgba(200, 230, 255, 0);
+    }
+    100% {
+        opacity: 1;
+        box-shadow: inset 0 0 60px rgba(200, 230, 255, 0.5), inset 0 0 120px rgba(255, 255, 255, 0.3);
+    }
+}
+
+@keyframes frost-shimmer {
+    0% {
+        opacity: 0.4;
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0.8;
+        transform: scale(1.02);
+    }
+}

Jellyfin.Plugin.Seasonals/Web/frost.js

@@ -0,0 +1,75 @@
+const config = window.SeasonalsPluginConfig?.Frost || {};
+
+const frost = config.EnableFrost !== undefined ? config.EnableFrost : true;
+
+let msgPrinted = false;
+
+function toggleFrost() {
+    const container = document.querySelector('.frost-container');
+    if (!container) return;
+
+    const videoPlayer = document.querySelector('.videoPlayerContainer');
+    const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+    const isDashboard = document.body.classList.contains('dashboardDocument');
+    const hasUserMenu = document.querySelector('#app-user-menu');
+
+    if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+        container.style.display = 'none';
+        if (!msgPrinted) {
+            console.log('Frost hidden');
+            msgPrinted = true;
+        }
+    } else {
+        container.style.display = 'block';
+        if (msgPrinted) {
+            console.log('Frost visible');
+            msgPrinted = false;
+        }
+    }
+}
+
+const observer = new MutationObserver(toggleFrost);
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
+
+function createFrost(container) {
+    const frostLayer = document.createElement('div');
+    frostLayer.className = 'frost-layer';
+
+    const frostCrystals = document.createElement('div');
+    frostCrystals.className = 'frost-crystals';
+    
+    // An SVG filter to make things look "frozen"/distorted around the edges
+    const svgFilter = document.createElement('div');
+    svgFilter.innerHTML = `
+        <svg style="display:none;">
+            <filter id="frost-filter">
+                <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" result="noise" />
+                <feDisplacementMap in="SourceGraphic" in2="noise" scale="5" xChannelSelector="R" yChannelSelector="G" />
+            </filter>
+        </svg>
+    `;
+    
+    frostLayer.appendChild(frostCrystals);
+    container.appendChild(frostLayer);
+    container.appendChild(svgFilter);
+}
+
+function initializeFrost() {
+    if (!frost) return;
+
+    const container = document.querySelector('.frost-container') || document.createElement("div");
+
+    if (!document.querySelector('.frost-container')) {
+        container.className = "frost-container";
+        container.setAttribute("aria-hidden", "true");
+        document.body.appendChild(container);
+    }
+    
+    createFrost(container);
+}
+
+initializeFrost();

Jellyfin.Plugin.Seasonals/Web/halloween.css

@@ -7,7 +7,8 @@
     width: 100%;
     height: 100%;
     pointer-events: none;
-    z-index: 10;
+    z-index: 10000;
+    contain: layout paint;
 }
 
 .halloween {
@@ -34,11 +35,11 @@
 
 @-webkit-keyframes halloween-fall {
     0% {
-        bottom: -10%
+        bottom: -10%;
     }
 
     100% {
-        bottom: 100%
+        bottom: 110%;
     }
 }
 
@@ -58,11 +59,11 @@
 
 @keyframes halloween-fall {
     0% {
-        bottom: -10%
+        bottom: -10%;
     }
 
     100% {
-        bottom: 100%
+        bottom: 110%;
     }
 }
 
@@ -81,71 +82,183 @@
 .halloween:nth-of-type(0) {
     left: 1%;
     -webkit-animation-delay: 0s, 0s;
-    animation-delay: 0s, 0s
+    animation-delay: 0s, 0s;
 }
 
 .halloween:nth-of-type(1) {
     left: 10%;
-    -webkit-animation-delay: 1s, 1s;
+    -webkit-animation-delay: -1s, -1s;
-    animation-delay: 1s, 1s
+    animation-delay: -1s, -1s;
 }
 
 .halloween:nth-of-type(2) {
     left: 20%;
-    -webkit-animation-delay: 6s, .5s;
+    -webkit-animation-delay: -2s, -2s;
-    animation-delay: 6s, .5s
+    animation-delay: -2s, -2s;
 }
 
 .halloween:nth-of-type(3) {
     left: 30%;
-    -webkit-animation-delay: 4s, 2s;
+    -webkit-animation-delay: -3s, -3s;
-    animation-delay: 4s, 2s
+    animation-delay: -3s, -3s;
 }
 
 .halloween:nth-of-type(4) {
     left: 40%;
-    -webkit-animation-delay: 2s, 2s;
+    -webkit-animation-delay: -4s, -4s;
-    animation-delay: 2s, 2s
+    animation-delay: -4s, -4s;
 }
 
 .halloween:nth-of-type(5) {
     left: 50%;
-    -webkit-animation-delay: 8s, 3s;
+    -webkit-animation-delay: -5s, -5s;
-    animation-delay: 8s, 3s
+    animation-delay: -5s, -5s;
 }
 
 .halloween:nth-of-type(6) {
     left: 60%;
-    -webkit-animation-delay: 6s, 2s;
+    -webkit-animation-delay: -6s, -6s;
-    animation-delay: 6s, 2s
+    animation-delay: -6s, -6s;
 }
 
 .halloween:nth-of-type(7) {
     left: 70%;
-    -webkit-animation-delay: 2.5s, 1s;
+    -webkit-animation-delay: -7s, -7s;
-    animation-delay: 2.5s, 1s
+    animation-delay: -7s, -7s;
 }
 
 .halloween:nth-of-type(8) {
     left: 80%;
-    -webkit-animation-delay: 1s, 0s;
+    -webkit-animation-delay: -8s, -8s;
-    animation-delay: 1s, 0s
+    animation-delay: -8s, -8s;
 }
 
 .halloween:nth-of-type(9) {
     left: 90%;
-    -webkit-animation-delay: 3s, 1.5s;
+    -webkit-animation-delay: -9s, -9s;
-    animation-delay: 3s, 1.5s
+    animation-delay: -9s, -9s;
 }
 
 .halloween:nth-of-type(10) {
     left: 25%;
-    -webkit-animation-delay: 2s, 0s;
+    -webkit-animation-delay: -10s, -10s;
-    animation-delay: 2s, 0s
+    animation-delay: -10s, -10s;
 }
 
 .halloween:nth-of-type(11) {
     left: 65%;
-    -webkit-animation-delay: 4s, 2.5s;
+    -webkit-animation-delay: -11s, -11s;
-    animation-delay: 4s, 2.5s
+    animation-delay: -11s, -11s;
+}
+
+/* --- Fog Layer --- */
+.halloween-fog-layer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 40vh;
+    pointer-events: none;
+    z-index: 1000;
+    overflow: hidden;
+    mask-image: linear-gradient(to top, black, transparent);
+    -webkit-mask-image: linear-gradient(to top, black, transparent);
+}
+.halloween-fog-blob {
+    position: absolute;
+    bottom: -10vh;
+    width: 150vw;
+    height: 50vh;
+    background: radial-gradient(ellipse at center, rgba(120, 130, 140, 0.4) 0%, transparent 60%);
+    border-radius: 50%;
+    filter: blur(15px);
+}
+.halloween-fog-blob:nth-child(1) {
+    left: -20vw;
+    animation: fog-float1 25s ease-in-out infinite alternate;
+}
+.halloween-fog-blob:nth-child(2) {
+    left: -50vw;
+    background: radial-gradient(ellipse at center, rgba(100, 110, 120, 0.3) 0%, transparent 65%);
+    animation: fog-float2 35s ease-in-out infinite alternate;
+}
+@keyframes fog-float1 {
+    0% { transform: translateX(0) scale(1); opacity: 0.8; }
+    50% { opacity: 1; }
+    100% { transform: translateX(20vw) scale(1.1); opacity: 0.6; }
+}
+@keyframes fog-float2 {
+    0% { transform: translateX(0) scale(1.1); opacity: 0.7; }
+    50% { opacity: 1; }
+    100% { transform: translateX(30vw) scale(1); opacity: 0.5; }
+}
+
+/* --- Spiders --- */
+.halloween-spider-wrapper {
+    position: absolute;
+    top: -50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 1002;
+    transform-origin: top;
+    will-change: transform;
+    pointer-events: auto;
+    padding: 20px; /* Increase hit area safely */
+}
+.halloween-thread {
+    width: 30px; /* Wider hit area for mouse interaction */
+    height: 100vh;
+    margin-top: -100vh;
+    position: relative;
+    cursor: pointer;
+}
+.halloween-thread::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 2px;
+    height: 100%;
+    background: linear-gradient(to bottom, rgba(200, 200, 200, 0.1), rgba(200, 200, 200, 0.6));
+}
+.halloween-spider {
+    animation: spider-swing 3s ease-in-out infinite alternate;
+    transform-origin: top center;
+}
+
+/* MARK: SPIDER SWAY CONFIGURATION */
+/* Adjust degrees in 'rotate(...)' to change how far spider and thread swing in wind. */
+@keyframes wind-sway {
+    0% { transform: rotate(0deg); }
+    25% { transform: rotate(2deg); }
+    75% { transform: rotate(-2deg); }
+    100% { transform: rotate(0deg); }
+}
+
+@keyframes spider-drop {
+    0% { transform: translateY(-50px); }
+    30% { transform: translateY(var(--drop-height, 50vh)); }
+    60% { transform: translateY(var(--drop-height, 50vh)); }
+    100% { transform: translateY(-50px); }
+}
+@keyframes spider-swing {
+    0% { transform: rotate(-10deg); }
+    100% { transform: rotate(10deg); }
+}
+
+/* Mice */
+.halloween-mouse {
+    position: absolute;
+    z-index: 10000;
+    pointer-events: none;
+    will-change: left;
+}
+@keyframes mouse-run-right {
+    0% { left: -10vw; }
+    100% { left: 110vw; }
+}
+@keyframes mouse-run-left {
+    0% { left: 110vw; }
+    100% { left: -10vw; }
 }

Jellyfin.Plugin.Seasonals/Web/halloween.js

@@ -4,8 +4,16 @@ const halloween = config.EnableHalloween !== undefined ? config.EnableHalloween
 const randomSymbols = config.EnableRandomSymbols !== undefined ? config.EnableRandomSymbols : true; // enable more random symbols
 const randomSymbolsMobile = config.EnableRandomSymbolsMobile !== undefined ? config.EnableRandomSymbolsMobile : false; // enable random symbols on mobile devices (Warning: High values may affect performance)
 const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different duration for the random halloween symbols
+const enableSpiders = config.EnableSpiders !== undefined ? config.EnableSpiders : true;
+const enableMice = config.EnableMice !== undefined ? config.EnableMice : true;
 const halloweenCount = config.SymbolCount || 25; // count of random extra symbols
 
+const images = [
+  "../Seasonals/Resources/halloween_images/ghost_20x20.png",
+  "../Seasonals/Resources/halloween_images/bat_20x20.png",
+  "../Seasonals/Resources/halloween_images/pumpkin_20x20.png",
+];
+
 let msgPrinted = false; // flag to prevent multiple console messages
 
 // function to check and control the halloween
@@ -36,21 +44,13 @@ function toggleHalloween() {
 
 // observe changes in the DOM
 const observer = new MutationObserver(toggleHalloween);
-
-// start observation
 observer.observe(document.body, {
-  childList: true,    // observe adding/removing of child elements
+  childList: true,
-  subtree: true,      // observe all levels of the DOM tree
+  subtree: true,
-  attributes: true    // observe changes to attributes (e.g. class changes)
+  attributes: true
 });
 
 
-const images = [
-  "../Seasonals/Resources/halloween_images/ghost_20x20.png",
-  "../Seasonals/Resources/halloween_images/bat_20x20.png",
-  "../Seasonals/Resources/halloween_images/pumpkin_20x20.png",
-];
-
 function addRandomSymbols(count) {
   const halloweenContainer = document.querySelector('.halloween-container'); // get the halloween container
   if (!halloweenContainer) return; // exit if halloween container is not found
@@ -74,7 +74,7 @@ function addRandomSymbols(count) {
     // set random horizontal position, animation delay and size(uncomment lines to enable) 
     const randomLeft = Math.random() * 100; // position (0% to 100%)
     const randomAnimationDelay = Math.random() * 10; // delay (0s to 10s)
-    const randomAnimationDelay2 = Math.random() * 3; // delay (0s to 3s)
+    const randomAnimationDelay2 = -(Math.random() * 3); // delay (-3s to 0s)
 
     // apply styles
     halloweenDiv.style.left = `${randomLeft}%`;
@@ -124,12 +124,137 @@ function createHalloween() {
   }
 }
 
+// create fog layer
+function createFog(container) {
+  const fogContainer = document.createElement('div');
+  fogContainer.className = 'halloween-fog-layer';
+  
+  const fog1 = document.createElement('div');
+  fog1.className = 'halloween-fog-blob';
+  
+  const fog2 = document.createElement('div');
+  fog2.className = 'halloween-fog-blob';
+  
+  fogContainer.appendChild(fog1);
+  fogContainer.appendChild(fog2);
+  container.appendChild(fogContainer);
+}
+
+// create dropping spiders
+function createSpider(container) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'halloween-spider-wrapper';
+    
+    wrapper.innerHTML = `
+      <div class="halloween-sway" style="display:flex; flex-direction:column; align-items:center; transform-origin: 50% -100vh;">
+          <div class="halloween-thread"></div>
+          <svg class="halloween-spider" viewBox="0 0 24 24" width="30" height="30">
+            <circle cx="12" cy="12" r="6" fill="#1a1a1a"/>
+            <!-- left legs -->
+            <path d="M12 12 l-8 -4 M12 12 l-9 0 M12 12 l-8 4 M12 12 l-6 8" stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" fill="none"/>
+            <!-- right legs -->
+            <path d="M12 12 l8 -4 M12 12 l9 0 M12 12 l8 4 M12 12 l6 8" stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round" fill="none"/>
+            <circle cx="10" cy="14" r="1.5" fill="#ff3333"/>
+            <circle cx="14" cy="14" r="1.5" fill="#ff3333"/>
+          </svg>
+      </div>
+    `;
+    
+    wrapper.style.left = `${10 + Math.random() * 80}%`;
+    const dropHeight = 30 + Math.random() * 50; // 30vh to 80vh
+    wrapper.style.setProperty('--drop-height', `${dropHeight}vh`);
+    
+    const duration = Math.random() * 6 + 6; // 6-12s drop
+    wrapper.style.animation = `spider-drop ${duration}s ease-in-out forwards`;
+    
+    // Start the sway animation only after the drop completes (30% of total duration)
+    const sway = wrapper.querySelector('.halloween-sway');
+    sway.style.animation = `wind-sway 8s ease-in-out ${duration * 0.3}s infinite`;
+    
+    // Spider retreat logic
+    let isRetreating = false;
+    wrapper.addEventListener('mouseenter', () => {
+        if (isRetreating) return;
+        isRetreating = true;
+        // Retreat smoothly by pushing margin up
+        wrapper.style.transition = 'margin-top 0.4s ease-in';
+        wrapper.style.marginTop = '-100vh';
+        
+        setTimeout(() => {
+            wrapper.remove();
+            setTimeout(() => createSpider(container), Math.random() * 5000 + 1000);
+        }, 500);
+    });
+    
+    wrapper.addEventListener('animationend', () => {
+        if (isRetreating) return;
+        wrapper.remove();
+        setTimeout(() => createSpider(container), Math.random() * 5000 + 1000);
+    });
+    
+    container.appendChild(wrapper);
+}
+
+// create scurrying mice
+function createMouse(container) {
+    const mouse = document.createElement('div');
+    mouse.className = 'halloween-mouse';
+    mouse.innerHTML = `
+      <svg viewBox="0 0 30 15" width="40" height="20">
+        <ellipse cx="15" cy="10" rx="10" ry="5" fill="#111"/>
+        <circle cx="24" cy="10" r="4" fill="#111"/> 
+        <circle cx="24" cy="6" r="3" fill="#333"/> 
+        <path d="M 5 10 Q 0 10 0 2" stroke="#111" stroke-width="1.5" fill="none"/> 
+      </svg>
+    `;
+    
+    const direction = Math.random() > 0.5 ? 'right' : 'left';
+    const duration = Math.random() * 3 + 2; // 2-5s run (fast)
+    
+    if (direction === 'right') {
+        mouse.style.animation = `mouse-run-right ${duration}s linear forwards`;
+        mouse.style.transform = 'scaleX(1)';
+    } else {
+        mouse.style.animation = `mouse-run-left ${duration}s linear forwards`;
+        mouse.style.transform = 'scaleX(-1)';
+    }
+    
+    mouse.style.bottom = `5px`; // Fixated bottom edge
+    
+    mouse.addEventListener('animationend', () => {
+        mouse.remove();
+        setTimeout(() => createMouse(container), Math.random() * 4000 + 2000);
+    });
+    
+    container.appendChild(mouse);
+}
+
 // initialize halloween
 function initializeHalloween() {
   if (!halloween) return; // exit if halloween is disabled
   createHalloween();
   toggleHalloween();
 
+  const container = document.querySelector('.halloween-container');
+
+  if (container) {
+      createFog(container);
+      
+      // Add a few spiders
+      if (enableSpiders) {
+          for (let i = 0; i < 4; i++) {
+              setTimeout(() => createSpider(container), Math.random() * 5000);
+          }
+      }
+      
+      // Add a few mice
+      if (enableMice) {
+          for (let i = 0; i < 3; i++) {
+              setTimeout(() => createMouse(container), Math.random() * 3000);
+          }
+      }
+  }
+
   const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
   if (randomSymbols && (screenWidth > 768 || randomSymbolsMobile)) { // add random halloweens only on larger screens, unless enabled for mobile devices
     addRandomSymbols(halloweenCount);

Jellyfin.Plugin.Seasonals/Web/hearts.css

@@ -8,6 +8,7 @@
     height: 100%;
     pointer-events: none;
     z-index: 10;
+    contain: layout paint;
 }
 
 .heart {
@@ -32,11 +33,11 @@
 
 @-webkit-keyframes heart-fall {
     0% {
-        bottom: -10%
+        bottom: -10%;
     }
 
     100% {
-        bottom: 100%
+        bottom: 110%;
     }
 }
 
@@ -56,11 +57,11 @@
 
 @keyframes heart-fall {
     0% {
-        bottom: -10%
+        bottom: -10%;
     }
 
     100% {
-        bottom: 100%
+        bottom: 110%;
     }
 }
 

Jellyfin.Plugin.Seasonals/Web/hearts.js

@@ -6,6 +6,9 @@ const randomSymbolsMobile = config.EnableRandomSymbolsMobile !== undefined ? con
 const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different animation duration for random symbols
 const heartsCount = config.SymbolCount || 25; // count of random extra symbols
 
+// Array of hearts characters
+const heartSymbols = ['❤️', '💕', '💞', '💓', '💗', '💖'];
+
 let msgPrinted = false; // flag to prevent multiple console messages
 
 // function to check and control the hearts
@@ -36,19 +39,13 @@ function toggleHearts() {
 
 // observe changes in the DOM
 const observer = new MutationObserver(toggleHearts);
-
-// start observation
 observer.observe(document.body, {
-  childList: true,    // observe adding/removing of child elements
+  childList: true,
-  subtree: true,      // observe all levels of the DOM tree
+  subtree: true,
-  attributes: true    // observe changes to attributes (e.g. class changes)
+  attributes: true
 });
 
 
-// Array of hearts characters
-const heartSymbols = ['❤️', '💕', '💞', '💓', '💗', '💖'];
-
-
 function addRandomSymbols(count) {
   const heartsContainer = document.querySelector('.hearts-container'); // get the hearts container
   if (!heartsContainer) return; // exit if hearts container is not found

Jellyfin.Plugin.Seasonals/Web/marioday.css

@@ -0,0 +1,77 @@
+.marioday-container {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10000;
+    contain: strict;
+    overflow: hidden;
+}
+
+.mario-wrapper {
+    position: absolute;
+    bottom: 5px;
+    left: -100px;
+    animation: mario-run 15s linear infinite;
+    will-change: left, transform;
+}
+
+.mario-runner {
+    width: 64px;
+    height: auto;
+    image-rendering: crisp-edges;
+    image-rendering: pixelated;
+    display: block;
+    will-change: transform;
+}
+
+.mario-jump {
+    animation: jump-arc 0.8s ease-in-out;
+}
+
+/* 8-bit coin styling */
+.mario-coin {
+    position: absolute;
+    width: 32px;
+    height: 32px;
+    background-color: #ffd700;
+    border: 4px solid #b8860b;
+    border-radius: 50%;
+    box-shadow: inset 4px 4px 0 #fffbea, inset -4px -4px 0 #daa520;
+    animation: pop-up-arc 2s forwards;
+}
+
+.mario-coin::after {
+    content: '';
+    position: absolute;
+    top: 6px;
+    left: 10px;
+    width: 4px;
+    height: 12px;
+    background: #daa520;
+}
+
+@keyframes mario-run {
+    0% { left: -100px; transform: scaleX(1); }
+    45% { left: 110vw; transform: scaleX(1); }
+    50% { left: 110vw; transform: scaleX(-1); }
+    95% { left: -100px; transform: scaleX(-1); }
+    100% { left: -100px; transform: scaleX(1); }
+}
+
+@keyframes pop-up-arc {
+    0%   { transform: translateY(0) rotateY(0deg); opacity: 0; animation-timing-function: ease-out; }
+    20%  { opacity: 1; }
+    50%  { transform: translateY(-30vh) rotateY(360deg); opacity: 1; animation-timing-function: ease-in; }
+    90%  { opacity: 1; }
+    100% { transform: translateY(20vh) rotateY(720deg); opacity: 0; }
+}
+
+@keyframes jump-arc {
+    0%   { transform: translateY(0); }
+    50%  { transform: translateY(-25vh); }
+    100% { transform: translateY(0); }
+}

Jellyfin.Plugin.Seasonals/Web/marioday.js

@@ -0,0 +1,86 @@
+const config = window.SeasonalsPluginConfig?.MarioDay || {};
+const marioday = config.EnableMarioDay !== undefined ? config.EnableMarioDay : true;
+
+let msgPrinted = false;
+
+function toggleMarioDay() {
+    const container = document.querySelector('.marioday-container');
+    if (!container) return;
+
+    const videoPlayer = document.querySelector('.videoPlayerContainer');
+    const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+    const isDashboard = document.body.classList.contains('dashboardDocument');
+    const hasUserMenu = document.querySelector('#app-user-menu');
+
+    if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+        container.style.display = 'none';
+        if (!msgPrinted) {
+            console.log('MarioDay hidden');
+            msgPrinted = true;
+        }
+    } else {
+        container.style.display = 'block';
+        if (msgPrinted) {
+            console.log('MarioDay visible');
+            msgPrinted = false;
+        }
+    }
+}
+
+const observer = new MutationObserver(toggleMarioDay);
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
+
+
+function createMarioDay(container) {
+    // MARK: Mario's running speed across the screen
+    const marioSpeedSeconds = 18;
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'mario-wrapper';
+    wrapper.style.animationDuration = `${marioSpeedSeconds}s`;
+
+    const mario = document.createElement('img');
+    mario.className = 'mario-runner';
+    mario.src = '../Seasonals/Resources/mario_assets/mario.gif';
+    
+    wrapper.appendChild(mario);
+    container.appendChild(wrapper);
+    
+    // Periodically throw out an 8-bit coin
+    setInterval(() => {
+        if (!document.querySelector('.marioday-container')) return;
+        const coin = document.createElement('div');
+        coin.className = 'mario-coin';
+        
+        // Grab Mario's current screen position to lock the coin's X coordinate
+        const marioRect = wrapper.getBoundingClientRect();
+        coin.style.left = `${marioRect.left + 16}px`;
+        coin.style.bottom = '35px'; // bottom offset
+        
+        container.appendChild(coin);
+        setTimeout(() => coin.remove(), 2000);
+
+    }, 4000);
+}
+
+
+function initializeMarioDay() {
+    if (!marioday) return;
+
+    const container = document.querySelector('.marioday-container') || document.createElement("div");
+
+    if (!document.querySelector('.marioday-container')) {
+        container.className = "marioday-container";
+        container.setAttribute("aria-hidden", "true");
+        document.body.appendChild(container);
+    }
+    
+    createMarioDay(container);
+    toggleMarioDay();
+}
+
+initializeMarioDay();

Jellyfin.Plugin.Seasonals/Web/matrix.css

@@ -0,0 +1,11 @@
+.matrix-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+    z-index: 1000;
+    overflow: hidden;
+    contain: layout paint;
+}

Jellyfin.Plugin.Seasonals/Web/matrix.js

@@ -0,0 +1,164 @@
+const config = window.SeasonalsPluginConfig?.Matrix || {};
+
+const enabled = config.EnableMatrix !== undefined ? config.EnableMatrix : true;
+const maxTrails = config.SymbolCount || 25; 
+const backgroundMode = config.EnableMatrixBackground !== undefined ? config.EnableMatrixBackground : false;
+const matrixChars = config.MatrixChars || '0123456789';
+
+let msgPrinted = false;
+let isHidden = false;
+
+// Toggle Function
+function toggleMatrix() {
+  const container = document.querySelector('.matrix-container');
+  if (!container) return;
+
+  const videoPlayer = document.querySelector('.videoPlayerContainer');
+  const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+  const isDashboard = document.body.classList.contains('dashboardDocument');
+  const hasUserMenu = document.querySelector('#app-user-menu');
+
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    if (!isHidden) {
+      container.style.display = 'none';
+      isHidden = true;
+      if (!msgPrinted) {
+        console.log('Matrix hidden');
+        msgPrinted = true;
+      }
+    }
+  } else {
+    if (isHidden) {
+      container.style.display = 'block';
+      isHidden = false;
+      if (msgPrinted) {
+        console.log('Matrix visible');
+        msgPrinted = false;
+      }
+    }
+  }
+}
+
+const observer = new MutationObserver(toggleMatrix);
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
+
+function createElements() {
+  const container = document.querySelector('.matrix-container') || document.createElement('div');
+
+  if (!document.querySelector('.matrix-container')) {
+    container.className = 'matrix-container';
+    container.setAttribute('aria-hidden', 'true');
+    if (backgroundMode) container.style.zIndex = '5';
+    document.body.appendChild(container);
+  }
+
+  const canvas = document.createElement('canvas');
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  canvas.style.display = 'block';
+  container.appendChild(canvas);
+
+  const ctx = canvas.getContext('2d');
+//   const chars = '0123456789πABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+  const chars = matrixChars.split('');
+  const fontSize = 18;
+
+  class Trail {
+      constructor() {
+          this.reset();
+          this.y = Math.random() * -100; // Allow initial staggered start
+      }
+      reset() {
+          const cols = Math.floor(canvas.width / fontSize);
+          this.x = Math.floor(Math.random() * cols);
+          this.y = -Math.round(Math.random() * 20);
+          this.speed = 0.5 + Math.random() * 0.5;
+          this.len = 10 + Math.floor(Math.random() * 20);
+          this.chars = [];
+          for(let i=0; i<this.len; i++) {
+              this.chars.push(chars[Math.floor(Math.random() * chars.length)]);
+          }
+      }
+      update() {
+          const oldY = Math.floor(this.y);
+          this.y += this.speed;
+          const newY = Math.floor(this.y);
+
+          // If crossed a full vertical unit, push a new character and pop the old one to preserve screen positions
+          if (newY > oldY) {
+              this.chars.unshift(chars[Math.floor(Math.random() * chars.length)]);
+              this.chars.pop();
+          }
+
+          // Randomly mutate some characters (heads mutate faster)
+          for (let i = 0; i < this.len; i++) {
+              const chance = i < 3 ? 0.90 : 0.98;
+              if (Math.random() > chance) {
+                  this.chars[i] = chars[Math.floor(Math.random() * chars.length)];
+              }
+          }
+          if (this.y - this.len > Math.ceil(canvas.height / fontSize)) {
+              this.reset();
+          }
+      }
+      draw(ctx) {
+          const headY = Math.floor(this.y);
+          for (let i = 0; i < this.len; i++) {
+              const charY = headY - i;
+              if (charY < 0 || charY * fontSize > canvas.height + fontSize) continue;
+              
+              const ratio = i / this.len;
+              const alpha = 1 - ratio;
+
+              if (i === 0) {
+                  ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;
+                  ctx.shadowBlur = 8;
+                  ctx.shadowColor = '#0F0';
+              } else if (i === 1) {
+                  ctx.fillStyle = `rgba(150, 255, 150, ${alpha})`;
+                  ctx.shadowBlur = 4;
+                  ctx.shadowColor = '#0F0';
+              } else {
+                  ctx.fillStyle = `rgba(0, 255, 0, ${alpha * 0.8})`;
+                  ctx.shadowBlur = 0;
+              }
+              
+              ctx.fillText(this.chars[i], this.x * fontSize + fontSize/2, charY * fontSize);
+          }
+      }
+  }
+
+  const trails = [];
+  for(let i=0; i<maxTrails; i++) trails.push(new Trail());
+
+  function loop() {
+      if (isHidden) return; // Pause drawing when hidden
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.font = 'bold ' + fontSize + 'px monospace';
+      ctx.textAlign = 'center';
+      for (const t of trails) {
+          t.update();
+          t.draw(ctx);
+      }
+  }
+
+  if (window.matrixInterval) clearInterval(window.matrixInterval);
+  window.matrixInterval = setInterval(loop, 50);
+
+  window.addEventListener('resize', () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+  });
+}
+
+function initializeMatrix() {
+  if (!enabled) return;
+  createElements();
+  toggleMatrix();
+}
+
+initializeMatrix();

Jellyfin.Plugin.Seasonals/Web/oktoberfest.css

@@ -0,0 +1,33 @@
+.oktoberfest-container {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10;
+    contain: strict;
+    overflow: hidden;
+}
+
+.oktoberfest-symbol {
+    position: absolute;
+    top: -10%;
+    font-size: 2.2em;
+    user-select: none;
+    animation-name: oktoberfest-fall, oktoberfest-sway;
+    animation-timing-function: linear, ease-in-out;
+    animation-iteration-count: infinite, infinite;
+}
+
+@keyframes oktoberfest-fall {
+    0% { transform: translateY(0); opacity: 0; }
+    10% { opacity: 1; }
+    100% { transform: translateY(120vh); opacity: 1; }
+}
+
+@keyframes oktoberfest-sway {
+    0%, 100% { margin-left: 0; }
+    50% { margin-left: 50px; }
+}

Jellyfin.Plugin.Seasonals/Web/oktoberfest.js

@@ -0,0 +1,67 @@
+const config = window.SeasonalsPluginConfig?.Oktoberfest || {};
+const oktoberfest = config.EnableOktoberfest !== undefined ? config.EnableOktoberfest : true;
+
+const oktoberfestSymbols = ['🥨', '🍺', '🍻', '🥨', '🥨'];
+
+let msgPrinted = false;
+
+// function to check and control the oktoberfest
+function toggleOktoberfest() {
+  const oktoberfestContainer = document.querySelector('.oktoberfest-container');
+  if (!oktoberfestContainer) return;
+
+  const videoPlayer = document.querySelector('.videoPlayerContainer');
+  const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+  const isDashboard = document.body.classList.contains('dashboardDocument');
+  const hasUserMenu = document.querySelector('#app-user-menu');
+
+  // hide oktoberfest if video/trailer player is active or dashboard is visible
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    oktoberfestContainer.style.display = 'none'; // hide oktoberfest
+    if (!msgPrinted) {
+      console.log('Oktoberfest hidden');
+      msgPrinted = true;
+    }
+  } else {
+    oktoberfestContainer.style.display = 'block'; // show oktoberfest
+    if (msgPrinted) {
+      console.log('Oktoberfest visible');
+      msgPrinted = false;
+    }
+  }
+}
+
+// observe changes in the DOM
+const observer = new MutationObserver(toggleOktoberfest);
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
+
+function createOktoberfest(container) {
+    for (let i = 0; i < 20; i++) {
+        const symbol = document.createElement('div');
+        symbol.className = 'oktoberfest-symbol';
+        symbol.textContent = oktoberfestSymbols[Math.floor(Math.random() * oktoberfestSymbols.length)];
+        symbol.style.left = `${Math.random() * 100}%`;
+        symbol.style.animationDelay = `${Math.random() * 10}s, ${Math.random() * 5}s`;
+        const duration1 = Math.random() * 5 + 8;
+        const duration2 = Math.random() * 3 + 3;
+        symbol.style.animationDuration = `${duration1}s, ${duration2}s`;
+        
+        container.appendChild(symbol);
+    }
+}
+
+function initializeOktoberfest() {
+    if (!oktoberfest) return;
+    const container = document.querySelector('.oktoberfest-container') || document.createElement("div");
+    if (!document.querySelector('.oktoberfest-container')) {
+        container.className = "oktoberfest-container";
+        container.setAttribute("aria-hidden", "true");
+        document.body.appendChild(container);
+    }
+    createOktoberfest(container);
+}
+initializeOktoberfest();

Jellyfin.Plugin.Seasonals/Web/olympia.css

@@ -0,0 +1,139 @@
+.olympia-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+    z-index: 9999;
+    overflow: hidden;
+    contain: strict;
+}
+
+.olympia-symbol {
+    position: absolute;
+    top: -10vh;
+    opacity: 0.95;
+    text-shadow: 0 0 10px rgba(255,255,255,0.2);
+    z-index: 40;
+}
+
+.olympia-flame {
+    position: absolute;
+    bottom: 0vh;
+    z-index: 50;
+    pointer-events: none;
+    transform-origin: bottom center;
+}
+
+.olympia-ring-css {
+    position: relative;
+    width: 40px;
+    height: 40px;
+}
+.olympia-ring-css::before {
+    content: '';
+    position: absolute;
+    top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    width: 30px;
+    height: 30px;
+    border: 5px solid #0081C8; /* Default blue ring */
+    border-radius: 50%;
+}
+.olympia-ring-css[style*="--ring-color"]::before {
+    border-color: var(--ring-color);
+}
+.olympia-symbol {
+    position: absolute;
+    top: -10vh;
+    opacity: 0.95;
+    text-shadow: 0 0 10px rgba(255,255,255,0.2);
+    z-index: 40;
+}
+
+.olympia-inner {
+    display: inline-block;
+    animation: olympia-sway linear infinite alternate;
+}
+
+.olympia-symbol img {
+    width: 6vh;
+    height: auto;
+    max-width: 60px;
+    object-fit: contain;
+}
+
+.olympia-confetti-wrapper {
+  position: fixed;
+  z-index: 15;
+  top: 0;
+  will-change: transform;
+  animation-name: olympia-fall;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+.olympia-confetti-sway {
+  will-change: transform;
+  animation-name: olympia-confetti-sway;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+@keyframes olympia-confetti-sway {
+  0% { transform: translateX(calc(var(--sway-amount, 50px) * -1)); }
+  100% { transform: translateX(var(--sway-amount, 50px)); }
+}
+
+.olympia-confetti {
+    width: 8px;
+    height: 16px;
+    background-color: rgb(0, 0, 0);
+    will-change: transform;
+    animation-name: olympia-confetti-flutter;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+}
+
+.olympia-confetti.circle {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
+
+.olympia-confetti.square {
+    width: 8px;
+    height: 8px;
+}
+
+.olympia-confetti.triangle {
+    width: 10px;
+    height: 10px;
+    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+}
+
+@keyframes olympia-fall {
+    0% { transform: translateY(-10vh); }
+    100% { transform: translateY(110vh); }
+}
+
+@keyframes olympia-sway {
+    0% { transform: rotate(-25deg) translateX(-20px); }
+    100% { transform: rotate(25deg) translateX(20px); }
+}
+
+@keyframes olympia-tumble-3d {
+    0% { transform: rotate3d(calc(var(--rot-x) + 0.001), calc(var(--rot-y) + 0.001), calc(var(--rot-z) + 0.001), 0deg); }
+    100% { transform: rotate3d(calc(var(--rot-x) + 0.001), calc(var(--rot-y) + 0.001), calc(var(--rot-z) + 0.001), 360deg); }
+}
+
+@keyframes olympia-confetti-flutter {
+  0% {
+    transform: rotate3d(var(--rx, 1), var(--ry, 1), var(--rz, 0), 0deg);
+  }
+  100% {
+    transform: rotate3d(var(--rx, 1), var(--ry, 1), var(--rz, 0), var(--rot-dir, 360deg));
+  }
+}

Jellyfin.Plugin.Seasonals/Web/olympia.js

@@ -0,0 +1,252 @@
+const config = window.SeasonalsPluginConfig?.Olympia || {};
+
+const olympia = config.EnableOlympia !== undefined ? config.EnableOlympia : true;
+const symbolCount = config.SymbolCount || 25;
+const useRandomSymbols = config.EnableRandomSymbols !== undefined ? config.EnableRandomSymbols : true;
+const enableRandomMobile = config.EnableRandomSymbolsMobile !== undefined ? config.EnableRandomSymbolsMobile : false;
+const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true;
+
+let msgPrinted = false;
+
+function toggleOlympia() {
+  const container = document.querySelector('.olympia-container');
+  if (!container) return;
+
+  const videoPlayer = document.querySelector('.videoPlayerContainer');
+  const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+  const isDashboard = document.body.classList.contains('dashboardDocument');
+  const hasUserMenu = document.querySelector('#app-user-menu');
+
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    container.style.display = 'none';
+    if (!msgPrinted) {
+      console.log('Olympia hidden');
+      msgPrinted = true;
+    }
+  } else {
+    container.style.display = 'block';
+    if (msgPrinted) {
+      console.log('Olympia visible');
+      msgPrinted = false;
+    }
+  }
+}
+
+const observer = new MutationObserver(toggleOlympia);
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
+
+function createOlympia() {
+    const container = document.querySelector('.olympia-container') || document.createElement('div');
+
+    if (!document.querySelector('.olympia-container')) {
+        container.className = 'olympia-container';
+        container.setAttribute("aria-hidden", "true");
+        document.body.appendChild(container);
+    }
+
+    const standardCount = 15;
+    const totalSymbols = symbolCount + standardCount;
+    
+    let isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
+    let finalCount = totalSymbols;
+
+    if (isMobile) {
+        finalCount = enableRandomMobile ? totalSymbols : standardCount;
+    }
+
+    const useRandomDuration = enableDifferentDuration !== false;
+
+    const activeItems = ['gold', 'silver', 'bronze', 'torch', 'rings_blue', 'rings_yellow', 'rings_black', 'rings_green', 'rings_red'];
+
+    for (let i = 0; i < finalCount; i++) {
+        let symbol = document.createElement('div');
+        
+        const randomItem = activeItems[Math.floor(Math.random() * activeItems.length)];
+        const isRing = randomItem.startsWith('rings');
+        const isMedal = ['gold', 'silver', 'bronze'].includes(randomItem);
+
+        symbol.className = `olympia-symbol olympia-${randomItem}`;
+
+        // Create inner div for sway/rotation
+        let innerDiv = document.createElement('div');
+        innerDiv.className = 'olympia-inner';
+        let img = null;
+
+        if (isRing) {
+             const ringColorMap = {
+                 'rings_blue': '#0081C8',
+                 'rings_yellow': '#FCB131',
+                 'rings_black': '#000000',
+                 'rings_green': '#00A651',
+                 'rings_red': '#EE334E'
+             };
+             let ringDiv = document.createElement('div');
+             ringDiv.className = 'olympia-ring-css';
+             ringDiv.style.setProperty('--ring-color', ringColorMap[randomItem]);
+             innerDiv.appendChild(ringDiv);
+             
+             // Add a 3D flip animation for rings and medals
+             const spinReverse = Math.random() > 0.5 ? 'reverse' : 'normal';
+             innerDiv.style.animation = `olympia-tumble-3d ${Math.random() * 4 + 4}s linear infinite ${spinReverse}`;
+             
+             // Random 3D Rotation Axis for Tumbling
+             innerDiv.style.setProperty('--rot-x', (Math.random() * 2 - 1).toFixed(2));
+             innerDiv.style.setProperty('--rot-y', (Math.random() * 2 - 1).toFixed(2));
+             innerDiv.style.setProperty('--rot-z', (Math.random() * 2 - 1).toFixed(2));
+        } else {
+            img = document.createElement('img');
+            let imgName = randomItem;
+            if (isMedal) {
+                imgName = `${randomItem}_coin.gif`;
+            } else {
+                imgName = `${randomItem}.png`;
+            }
+            img.src = `../Seasonals/Resources/olympic_assets/${imgName}`;
+            img.onerror = function() {
+                symbol.remove();
+            };
+            innerDiv.appendChild(img);
+            
+            if (isMedal) {
+                innerDiv.style.animation = `olympia-flip-3d ${Math.random() * 4 + 3}s linear infinite`;
+            } else {
+                // Torch sways, medals flip
+                const swayDur = Math.random() * 2 + 2; // 2 to 4s
+                const swayDir = Math.random() > 0.5 ? 'normal' : 'reverse';
+                innerDiv.style.animation = `olympia-sway ${swayDur}s ease-in-out infinite alternate ${swayDir}`;
+            }
+        }
+
+        symbol.appendChild(innerDiv);
+
+        const leftPos = Math.random() * 95;
+        const delaySeconds = Math.random() * 10;
+        
+        // Depth logic for medals and rings
+        const depth = Math.random();
+        const scale = 0.8 + depth * 0.4; // 0.8 to 1.2
+        const zIndex = Math.floor(depth * 30) + 10;
+        
+        if (img) {
+            img.style.transform = `scale(${scale})`;
+        } else {
+            innerDiv.firstChild.style.transform = `scale(${scale})`;
+        }
+        symbol.style.zIndex = zIndex;
+
+        let durationSeconds = 8;
+        if (useRandomDuration) {
+            durationSeconds = (1 - depth) * 5 + 6 + Math.random() * 4; 
+        }
+
+        symbol.style.animation = `olympia-fall ${durationSeconds}s linear infinite`;
+        symbol.style.animationDelay = `${delaySeconds}s`;
+        symbol.style.left = `${leftPos}vw`;
+        
+        container.appendChild(symbol);
+    }
+
+    // Olympic Torches (Fixed at bottom corners, symmetrically rotated inward)
+    // Generate one random inward rotation (10 to 25 deg) for both to share
+    const sharedTilt = Math.random() * 15 + 10;
+    
+    const createTorch = (isLeft) => {
+        const torch = document.createElement('div');
+        torch.className = 'olympia-flame';
+        
+        if (isLeft) {
+            torch.style.left = '5vw';
+            // Lean right, face normal
+            torch.style.transform = `rotate(${sharedTilt}deg) scaleX(1)`;
+        } else {
+            torch.style.right = '5vw';
+             // Lean left, mirror image
+            torch.style.transform = `rotate(-${sharedTilt}deg) scaleX(-1)`;
+        }
+        
+        let torchImg = document.createElement('img');
+        torchImg.src = `../Seasonals/Resources/olympic_assets/torch.gif`;
+        torchImg.style.height = '25vh';
+        torchImg.style.objectFit = 'contain';
+        torchImg.onerror = function() {
+            this.style.display = 'none';
+        };
+        torch.appendChild(torchImg);
+        container.appendChild(torch);
+    };
+
+    createTorch(true);
+    createTorch(false);
+
+    // Olympic Ring Colors (Carnival Config)
+    const confettiColors = ['#0081C8', '#FCB131', '#000000', '#00A651', '#EE334E'];
+    const confettiCount = isMobile ? 30 : 60;
+    
+    for (let i = 0; i < confettiCount; i++) {
+        let wrapper = document.createElement('div');
+        wrapper.className = 'olympia-confetti-wrapper';
+        
+        let leftPos = Math.random() * 100;
+        wrapper.style.left = `${leftPos}vw`;
+        
+        let fallDuration = Math.random() * 3 + 4; // 4 to 7 seconds to fall
+        wrapper.style.animationDuration = `${fallDuration}s`;
+        wrapper.style.animationDelay = `-${Math.random() * fallDuration}s`; // Negative delay so it distributes perfectly immediately
+        
+        let swayWrapper = document.createElement('div');
+        swayWrapper.className = 'olympia-confetti-sway';
+        let swayDuration = Math.random() * 2 + 1.5; // 1.5s to 3.5s
+        swayWrapper.style.animationDuration = `${swayDuration}s`;
+        let swayAmount = Math.random() * 30 + 30; // 30px to 60px
+        swayWrapper.style.setProperty('--sway-amount', `${swayAmount}px`);
+        let initSwayDelay = Math.random() * swayDuration;
+        swayWrapper.style.animationDelay = `-${initSwayDelay}s`;
+
+        let confetti = document.createElement('div');
+        confetti.className = 'olympia-confetti';
+        
+        const color = confettiColors[Math.floor(Math.random() * confettiColors.length)];
+        confetti.style.backgroundColor = color;
+        
+        // Random shape
+        const shape = Math.random();
+        if (shape > 0.66) {
+            confetti.classList.add('circle');
+            const size = Math.random() * 5 + 5; 
+            confetti.style.width = `${size}px`;
+            confetti.style.height = `${size}px`;
+        } else if (shape > 0.33) {
+            confetti.classList.add('rect');
+            const width = Math.random() * 4 + 4; 
+            const height = Math.random() * 5 + 8; 
+            confetti.style.width = `${width}px`;
+            confetti.style.height = `${height}px`;
+        } else {
+            confetti.classList.add('triangle');
+        }
+        
+        // Random 3D Rotation for flutter
+        confetti.style.setProperty('--rx', Math.random().toFixed(2));
+        confetti.style.setProperty('--ry', Math.random().toFixed(2));
+        confetti.style.setProperty('--rz', (Math.random() * 0.5).toFixed(2));
+        confetti.style.setProperty('--rot-dir', `${(Math.random() > 0.5 ? 1 : -1) * 360}deg`);
+        let rotateDuration = Math.random() * 0.8 + 0.4;
+        confetti.style.animationDuration = `${rotateDuration}s`;
+
+        swayWrapper.appendChild(confetti);
+        wrapper.appendChild(swayWrapper);
+        container.appendChild(wrapper);
+    }
+}
+
+function initializeOlympia() {
+  if (!olympia) return;
+  createOlympia();
+  toggleOlympia();
+}
+
+initializeOlympia();

Jellyfin.Plugin.Seasonals/Web/oscar.css

@@ -0,0 +1,67 @@
+.oscar-container {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10; /* Behind popups but over background */
+    contain: strict;
+    overflow: hidden;
+}
+
+.oscar-carpet {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 15vh;
+    background: linear-gradient(to top, rgba(139, 0, 0, 0.8) 0%, transparent 100%);
+    opacity: 0.9;
+}
+
+.oscar-spotlights {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.oscar-spotlight {
+    position: absolute;
+    top: -10vh;
+    /* MARK: SPOTLIGHT WIDTH CONFIGURATION */
+    /* To adjust bottom width (spread), change 'width' property (e.g., 20vw for narrow, 40vw for wide). */
+    /* To adjust top width (origin), modify first two percentages in 'clip-path' (e.g., 48% 0, 52% 0 for a very thin start). */
+    width: 30vw;
+    height: 120vh;
+    background: linear-gradient(to bottom, rgba(255, 215, 0, 0.4) 0%, transparent 80%);
+    clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
+    transform-origin: top center;
+    animation: spotlight-sweep 12s infinite alternate ease-in-out;
+    mix-blend-mode: screen;
+}
+
+.oscar-flash {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background: white;
+    border-radius: 50%;
+    box-shadow: 0 0 50px 30px rgba(255, 255, 255, 0.8), 0 0 100px 50px rgba(255, 255, 255, 0.5);
+    animation: flash-pop 0.2s cubic-bezier(0.1, 0.8, 0.1, 1);
+    mix-blend-mode: screen;
+}
+
+@keyframes spotlight-sweep {
+    0% { transform: rotate(-30deg); }
+    100% { transform: rotate(30deg); }
+}
+
+@keyframes flash-pop {
+    0% { transform: scale(0.5); opacity: 1; }
+    50% { transform: scale(2); opacity: 1; }
+    100% { transform: scale(3); opacity: 0; }
+}

Jellyfin.Plugin.Seasonals/Web/oscar.js

@@ -0,0 +1,94 @@
+const config = window.SeasonalsPluginConfig?.Oscar || {};
+const oscar = config.EnableOscar !== undefined ? config.EnableOscar : true;
+
+let msgPrinted = false;
+
+function toggleOscar() {
+    const container = document.querySelector('.oscar-container');
+    if (!container) return;
+
+    const videoPlayer = document.querySelector('.videoPlayerContainer');
+    const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+    const isDashboard = document.body.classList.contains('dashboardDocument');
+    const hasUserMenu = document.querySelector('#app-user-menu');
+
+    if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+        container.style.display = 'none';
+        if (!msgPrinted) {
+            console.log('Oscar hidden');
+            msgPrinted = true;
+        }
+    } else {
+        container.style.display = 'block';
+        if (msgPrinted) {
+            console.log('Oscar visible');
+            msgPrinted = false;
+        }
+    }
+}
+
+const observer = new MutationObserver(toggleOscar);
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
+
+
+function createOscar(container) {
+    // Red carpet floor
+    const carpet = document.createElement('div');
+    carpet.className = 'oscar-carpet';
+
+    // Spotlights
+    const spotlights = document.createElement('div');
+    spotlights.className = 'oscar-spotlights';
+    
+    for (let i = 0; i < 3; i++) {
+        const spot = document.createElement('div');
+        spot.className = 'oscar-spotlight';
+        spot.style.animationDelay = `-${Math.random() * 8}s`;
+        spot.style.left = `${20 + (i * 30)}%`;
+        spot.style.top = `${-5 - Math.random() * 15}vh`; // randomize top origin
+        spotlights.appendChild(spot);
+    }
+
+    container.appendChild(carpet);
+    container.appendChild(spotlights);
+    
+    // Paparazzi flashes with randomized intervals
+    function flashLoop() {
+        if (!document.querySelector('.oscar-container')) {
+            setTimeout(flashLoop, 1000); // Check again later if hidden
+            return;
+        }
+        const flash = document.createElement('div');
+        flash.className = 'oscar-flash';
+        flash.style.left = `${Math.random() * 100}%`;
+        flash.style.top = `${Math.random() * 100}%`;
+        container.appendChild(flash);
+        setTimeout(() => flash.remove(), 200);
+        
+        // Randomize next flash between 200ms and 1500ms
+        const nextDelay = Math.random() * 1300 + 200;
+        setTimeout(flashLoop, nextDelay);
+    }
+    flashLoop();
+}
+
+function initializeOscar() {
+    if (!oscar) return;
+
+    const container = document.querySelector('.oscar-container') || document.createElement("div");
+
+    if (!document.querySelector('.oscar-container')) {
+        container.className = "oscar-container";
+        container.setAttribute("aria-hidden", "true");
+        document.body.appendChild(container);
+    }
+    
+    createOscar(container);
+    toggleOscar();
+}
+
+initializeOscar();

Jellyfin.Plugin.Seasonals/Web/pride.css

@@ -0,0 +1,33 @@
+.pride-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+    z-index: 9999;
+    overflow: hidden;
+    contain: layout paint;
+}
+
+
+.pride-heart {
+    position: absolute;
+    bottom: -50px;
+    animation: pride-rise ease-in infinite;
+    will-change: transform;
+}
+
+
+@keyframes pride-rise {
+    0% { transform: translateY(0) scale(0.8); opacity: 0; }
+    10% { opacity: 1; }
+    90% { opacity: 1; }
+    100% { transform: translateY(-115vh) scale(1.2); opacity: 0; }
+}
+
+/* Coloring the Jellyfin Header */
+body.pride-active .skinHeader,
+body.pride-active .skinHeader-withBackground {
+    background: linear-gradient(90deg, #E40303, #FF8C00, #FFED00, #008026, #24408E, #732982) !important;
+}

Jellyfin.Plugin.Seasonals/Web/pride.js

@@ -0,0 +1,92 @@
+// 1. Read Configuration
+const config = window.SeasonalsPluginConfig?.Pride || {};
+
+const enabled = config.EnablePride !== undefined ? config.EnablePride : true;
+const elementCount = config.HeartCount || 20;
+const heartSize = config.HeartSize || 1.5;
+const colorHeader = config.ColorHeader !== undefined ? config.ColorHeader : true;
+
+let msgPrinted = false;
+
+// 2. Toggle Function
+// Hides the effect when a video player, trailer (in full width mode), dashboard, or user menu is active.
+function togglePride() {
+  const container = document.querySelector('.pride-container');
+  if (!container) return;
+
+  const videoPlayer = document.querySelector('.videoPlayerContainer');
+  const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+  const isDashboard = document.body.classList.contains('dashboardDocument');
+  const hasUserMenu = document.querySelector('#app-user-menu');
+
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    container.style.display = 'none';
+    if (!msgPrinted) {
+      console.log('Pride hidden');
+      msgPrinted = true;
+    }
+  } else {
+    container.style.display = 'block';
+    if (msgPrinted) {
+      console.log('Pride visible');
+      msgPrinted = false;
+    }
+  }
+}
+
+// 3. MutationObserver
+// Watches the DOM for changes so the effect can auto-hide/show.
+const observer = new MutationObserver(togglePride);
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
+
+// 4. Element Creation
+// Create and append your animated elements to the container.
+function createElements() {
+  const container = document.querySelector('.pride-container') || document.createElement('div');
+
+  if (!document.querySelector('.pride-container')) {
+    container.className = 'pride-container';
+    container.setAttribute('aria-hidden', 'true');
+    document.body.appendChild(container);
+  }
+
+  if (colorHeader) {
+      document.body.classList.add('pride-active');
+  }
+
+  const cleanupObserver = new MutationObserver(() => {
+      if (!document.querySelector('.pride-container')) {
+          document.body.classList.remove('pride-active');
+      }
+  });
+  cleanupObserver.observe(document.body, { childList: true });
+
+  const heartEmojis = ['❤️', '🧡', '💛', '💚', '💙', '💜'];
+
+  for (let i = 0; i < elementCount; i++) {
+    const el = document.createElement('div');
+    el.className = 'pride-heart';
+    
+    el.innerText = heartEmojis[Math.floor(Math.random() * heartEmojis.length)];
+    el.style.fontSize = `${heartSize}rem`;
+    el.style.left = `${Math.random() * 100}vw`;
+    el.style.animationDuration = `${5 + Math.random() * 5}s`;
+    el.style.animationDelay = `${Math.random() * 5}s`;
+    el.style.marginLeft = `${(Math.random() - 0.5) * 100}px`;
+
+    container.appendChild(el);
+  }
+}
+
+// 5. Initialization
+function initializePride() {
+  if (!enabled) return;
+  createElements();
+  togglePride();
+}
+
+initializePride();

Jellyfin.Plugin.Seasonals/Web/rain.css

@@ -0,0 +1,26 @@
+.rain-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+    z-index: 1000;
+    overflow: hidden;
+    contain: layout paint;
+}
+
+.raindrop-pure {
+    position: absolute;
+    width: 2px;
+    height: 40px;
+    background: linear-gradient(to bottom, rgba(200, 200, 255, 0), rgba(200, 200, 255, 0.7));
+    transform-origin: bottom;
+}
+
+@keyframes pure-rain {
+    0% { transform: translateY(-30vh) translateX(0) rotate(20deg); opacity: 0; }
+    5% { opacity: 1; }
+    95% { opacity: 1; }
+    100% { transform: translateY(180vh) translateX(-60vh) rotate(20deg); opacity: 0; }
+}

Jellyfin.Plugin.Seasonals/Web/rain.js

@@ -0,0 +1,73 @@
+const config = window.SeasonalsPluginConfig?.Rain || {};
+
+const enabled = config.EnableRain !== undefined ? config.EnableRain : true;
+const isMobile = window.innerWidth <= 768;
+const elementCount = isMobile ? (config.RaindropCountMobile || 150) : (config.RaindropCount || 300);
+const rainSpeed = config.RainSpeed || 1.0;
+
+let msgPrinted = false;
+
+// Toggle Function
+function toggleRain() {
+  const container = document.querySelector('.rain-container');
+  if (!container) return;
+
+  const videoPlayer = document.querySelector('.videoPlayerContainer');
+  const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+  const isDashboard = document.body.classList.contains('dashboardDocument');
+  const hasUserMenu = document.querySelector('#app-user-menu');
+
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    container.style.display = 'none';
+    if (!msgPrinted) {
+      console.log('Rain hidden');
+      msgPrinted = true;
+    }
+  } else {
+    container.style.display = 'block';
+    if (msgPrinted) {
+      console.log('Rain visible');
+      msgPrinted = false;
+    }
+  }
+}
+
+const observer = new MutationObserver(toggleRain);
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
+
+function createElements() {
+  const container = document.querySelector('.rain-container') || document.createElement('div');
+
+  if (!document.querySelector('.rain-container')) {
+    container.className = 'rain-container';
+    container.setAttribute('aria-hidden', 'true');
+    document.body.appendChild(container);
+  }
+
+  for (let i = 0; i < elementCount; i++) {
+    const drop = document.createElement('div');
+    drop.className = 'raindrop-pure';
+    
+    drop.style.left = `${Math.random() * 140}vw`;
+    drop.style.top = `${-20 - Math.random() * 50}vh`;
+
+    const duration = (0.5 + Math.random() * 0.5) / (rainSpeed || 1);
+    drop.style.animation = `pure-rain ${duration}s linear infinite`;
+    drop.style.animationDelay = `${Math.random() * 2}s`;
+    drop.style.opacity = Math.random() * 0.5 + 0.3;
+
+    container.appendChild(drop);
+  }
+}
+
+function initializeRain() {
+  if (!enabled) return;
+  createElements();
+  toggleRain();
+}
+
+initializeRain();

Jellyfin.Plugin.Seasonals/Web/resurrection.css

@@ -8,19 +8,28 @@
     height: 100%;
     pointer-events: none;
     z-index: 10;
+    contain: layout paint;
 }
 
 .resurrection-symbol {
     position: fixed;
     z-index: 15;
-    top: -15%;
+    top: 0;
+    translate: 0 -15vh;
     user-select: none;
     -webkit-user-select: none;
     cursor: default;
-    animation-name: resurrection-fall, resurrection-sway;
+    animation-name: resurrection-fall;
-    animation-timing-function: linear, ease-in-out;
+    animation-timing-function: linear;
-    animation-iteration-count: infinite, infinite;
+    animation-iteration-count: infinite;
-    will-change: transform, top;
+    will-change: transform;
+}
+
+.resurrection-sway-wrapper {
+    will-change: transform;
+    animation-name: resurrection-sway;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
 }
 
 .resurrection-symbol img {
@@ -39,11 +48,11 @@
 
 @keyframes resurrection-fall {
     0% {
-        top: -15%;
+        transform: translate3d(0, -15vh, 0);
     }
 
     100% {
-        top: 105%;
+        transform: translate3d(0, 105vh, 0);
     }
 }
 

Jellyfin.Plugin.Seasonals/Web/resurrection.js

@@ -52,20 +52,27 @@ function createSymbol(imageSrc, leftPercent, delaySeconds) {
     const symbol = document.createElement('div');
     symbol.className = 'resurrection-symbol';
 
+    const swayWrapper = document.createElement('div');
+    swayWrapper.className = 'resurrection-sway-wrapper';
+
     const img = document.createElement('img');
     img.src = imageSrc;
     img.alt = '';
 
     symbol.style.left = `${leftPercent}%`;
-    symbol.style.animationDelay = `${delaySeconds}s, ${Math.random() * 3}s`;
+    symbol.style.animationDelay = `${delaySeconds}s`;
 
     if (enableDifferentDuration) {
         const fallDuration = Math.random() * 7 + 7;
         const swayDuration = Math.random() * 4 + 2;
-        symbol.style.animationDuration = `${fallDuration}s, ${swayDuration}s`;
+        symbol.style.animationDuration = `${fallDuration}s`;
+        swayWrapper.style.animationDuration = `${swayDuration}s`;
     }
 
-    symbol.appendChild(img);
+    swayWrapper.style.animationDelay = `${Math.random() * 3}s`;
+
+    swayWrapper.appendChild(img);
+    symbol.appendChild(swayWrapper);
     return symbol;
 }
 

Jellyfin.Plugin.Seasonals/Web/santa.js

@@ -11,6 +11,21 @@ const minSantaRestTime = config.MinSantaRestTime || 3; // minimum time santa res
 const maxPresentFallSpeed = config.MaxPresentFallSpeed || 5; // maximum speed of falling presents in seconds
 const minPresentFallSpeed = config.MinPresentFallSpeed || 2; // minimum speed of falling presents in seconds
 
+// credits: flaticon.com
+const presentImages = [
+    '../Seasonals/Resources/santa_images/gift1.png',
+    '../Seasonals/Resources/santa_images/gift2.png',
+    '../Seasonals/Resources/santa_images/gift3.png',
+    '../Seasonals/Resources/santa_images/gift4.png',
+    '../Seasonals/Resources/santa_images/gift5.png',
+    '../Seasonals/Resources/santa_images/gift6.png',
+    '../Seasonals/Resources/santa_images/gift7.png',
+    '../Seasonals/Resources/santa_images/gift8.png',
+];
+
+// credits: https://www.animatedimages.org/img-animated-santa-claus-image-0420-85884.htm
+const santaImage = '../Seasonals/Resources/santa_images/santa.gif';
+
 let msgPrinted = false; // flag to prevent multiple console messages
 let isMobile = false; // flag to detect mobile devices
 let canvas, ctx;  // canvas and context for drawing snowflakes
@@ -52,12 +67,10 @@ function toggleSnowfall() {
 
 // observe changes in the DOM
 const observer = new MutationObserver(toggleSnowfall);
-
-// start observation
 observer.observe(document.body, {
-    childList: true,    // observe adding/removing of child elements
+    childList: true,
-    subtree: true,      // observe all levels of the DOM tree
+    subtree: true,
-    attributes: true    // observe changes to attributes (e.g. class changes)
+    attributes: true
 });
 
 let resizeObserver; // Observer for resize events
@@ -179,22 +192,6 @@ function updateSnowflakes() {
     });
 }
 
-// credits: flaticon.com
-const presentImages = [
-    '../Seasonals/Resources/santa_images/gift1.png',
-    '../Seasonals/Resources/santa_images/gift2.png',
-    '../Seasonals/Resources/santa_images/gift3.png',
-    '../Seasonals/Resources/santa_images/gift4.png',
-    '../Seasonals/Resources/santa_images/gift5.png',
-    '../Seasonals/Resources/santa_images/gift6.png',
-    '../Seasonals/Resources/santa_images/gift7.png',
-    '../Seasonals/Resources/santa_images/gift8.png',
-];
-
-// credits: https://www.animatedimages.org/img-animated-santa-claus-image-0420-85884.htm
-const santaImage = '../Seasonals/Resources/santa_images/santa.gif';
-
-
 function createSantaElement() {
     const santa = document.createElement('img');
     santa.src = santaImage;

Jellyfin.Plugin.Seasonals/Web/seasonals.js

@@ -78,6 +78,106 @@ const ThemeConfigs = {
         js: '../Seasonals/Resources/cherryblossom.js',
         containerClass: 'cherryblossom-container'
     },
+    matrix: {
+        css: '../Seasonals/Resources/matrix.css',
+        js: '../Seasonals/Resources/matrix.js',
+        containerClass: 'matrix-container'
+    },
+    eurovision: {
+        css: '../Seasonals/Resources/eurovision.css',
+        js: '../Seasonals/Resources/eurovision.js',
+        containerClass: 'eurovision-container'
+    },
+    storm: {
+        css: '../Seasonals/Resources/storm.css',
+        js: '../Seasonals/Resources/storm.js',
+        containerClass: 'storm-container'
+    },
+    pride: {
+        css: '../Seasonals/Resources/pride.css',
+        js: '../Seasonals/Resources/pride.js',
+        containerClass: 'pride-container'
+    },
+    rain: {
+        css: '../Seasonals/Resources/rain.css',
+        js: '../Seasonals/Resources/rain.js',
+        containerClass: 'rain-container'
+    },
+    earthday: {
+        css: '../Seasonals/Resources/earthday.css',
+        js: '../Seasonals/Resources/earthday.js',
+        containerClass: 'earthday-container'
+    },
+    frost: {
+        css: '../Seasonals/Resources/frost.css',
+        js: '../Seasonals/Resources/frost.js',
+        containerClass: 'frost-container'
+    },
+    filmnoir: {
+        css: '../Seasonals/Resources/filmnoir.css',
+        js: '../Seasonals/Resources/filmnoir.js',
+        containerClass: 'filmnoir-container'
+    },
+    oscar: {
+        css: '../Seasonals/Resources/oscar.css',
+        js: '../Seasonals/Resources/oscar.js',
+        containerClass: 'oscar-container'
+    },
+    marioday: {
+        css: '../Seasonals/Resources/marioday.css',
+        js: '../Seasonals/Resources/marioday.js',
+        containerClass: 'marioday-container'
+    },
+    starwars: {
+        css: '../Seasonals/Resources/starwars.css',
+        js: '../Seasonals/Resources/starwars.js',
+        containerClass: 'starwars-container'
+    },
+    oktoberfest: {
+        css: '../Seasonals/Resources/oktoberfest.css',
+        js: '../Seasonals/Resources/oktoberfest.js',
+        containerClass: 'oktoberfest-container'
+    },
+    friday13: {
+        css: '../Seasonals/Resources/friday13.css',
+        js: '../Seasonals/Resources/friday13.js',
+        containerClass: 'friday13-container'
+    },
+    eid: {
+        css: '../Seasonals/Resources/eid.css',
+        js: '../Seasonals/Resources/eid.js',
+        containerClass: 'eid-container'
+    },
+    spooky: {
+        css: '../Seasonals/Resources/spooky.css',
+        js: '../Seasonals/Resources/spooky.js',
+        containerClass: 'spooky-container'
+    },
+    sports: {
+        css: '../Seasonals/Resources/sports.css',
+        js: '../Seasonals/Resources/sports.js',
+        containerClass: 'sports-container'
+    },
+    olympia: {
+        css: '../Seasonals/Resources/olympia.css',
+        js: '../Seasonals/Resources/olympia.js',
+        containerClass: 'olympia-container'
+    },
+    space: {
+        css: '../Seasonals/Resources/space.css',
+        js: '../Seasonals/Resources/space.js',
+        containerClass: 'space-container'
+    },
+    underwater: {
+        css: '../Seasonals/Resources/underwater.css',
+        js: '../Seasonals/Resources/underwater.js',
+        containerClass: 'underwater-container'
+    },
+    birthday: {
+        css: '../Seasonals/Resources/birthday.css',
+        js: '../Seasonals/Resources/birthday.js',
+        containerClass: 'birthday-container'
+    },
     none: {
         containerClass: 'none'
     },

Jellyfin.Plugin.Seasonals/Web/snowfall.css

@@ -8,6 +8,7 @@
     top: 0;
     left: 0;
     z-index: 10;
+    contain: layout paint;
 }
 
 #snowfallCanvas {

Jellyfin.Plugin.Seasonals/Web/snowfall.js

@@ -47,12 +47,10 @@ function toggleSnowfall() {
 
 // observe changes in the DOM
 const observer = new MutationObserver(toggleSnowfall);
-
-// start observation
 observer.observe(document.body, {
-  childList: true,    // observe adding/removing of child elements
+  childList: true,
-  subtree: true,      // observe all levels of the DOM tree
+  subtree: true,
-  attributes: true    // observe changes to attributes (e.g. class changes)
+  attributes: true
 });
 
 let resizeObserver; // Observer for resize events

Jellyfin.Plugin.Seasonals/Web/snowflakes.css

@@ -8,12 +8,15 @@
   height: 100%;
   pointer-events: none;
   z-index: 10;
+  contain: layout paint;
 }
 
 .snowflake {
   position: fixed;
   z-index: 15;
-  top: -10%;
+  top: 0;
+  will-change: transform;
+  translate: 0 -10vh;
   font-size: 1em;
   color: #fff;
   font-family: Arial, sans-serif;
@@ -33,11 +36,11 @@
 
 @-webkit-keyframes snowflakes-fall {
   0% {
-    top: -10%;
+    translate: 0 -10vh;
   }
 
   100% {
-    top: 100%;
+    translate: 0 110vh;
   }
 }
 
@@ -45,23 +48,21 @@
 
   0%,
   100% {
-    -webkit-transform: translateX(0);
     transform: translateX(0);
   }
 
   50% {
-    -webkit-transform: translateX(80px);
     transform: translateX(80px);
   }
 }
 
 @keyframes snowflakes-fall {
   0% {
-    top: -10%;
+    translate: 0 -10vh;
   }
 
   100% {
-    top: 100%;
+    translate: 0 110vh;
   }
 }
 

Jellyfin.Plugin.Seasonals/Web/snowflakes.js

@@ -7,6 +7,8 @@ const enableColoredSnowflakes = config.EnableColoredSnowflakes !== undefined ? c
 const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different animation duration
 const snowflakeCount = config.SnowflakeCount || 25; // count of random extra snowflakes
 
+const snowflakeSymbols = ['❅', '❆']; // some snowflake symbols
+const snowflakeSymbolsMobile = ['❅', '❆', '❄']; // some snowflake symbols mobile version
 
 let msgPrinted = false; // flag to prevent multiple console messages
 
@@ -38,12 +40,10 @@ function toggleSnowflakes() {
 
 // observe changes in the DOM
 const observer = new MutationObserver(toggleSnowflakes);
-
-// start observation
 observer.observe(document.body, {
-  childList: true,    // observe adding/removing of child elements
+  childList: true,
-  subtree: true,      // observe all levels of the DOM tree
+  subtree: true,
-  attributes: true    // observe changes to attributes (e.g. class changes)
+  attributes: true
 });
 
 function addRandomSnowflakes(count) {
@@ -52,9 +52,6 @@ function addRandomSnowflakes(count) {
 
   console.log('Adding random snowflakes');
 
-  const snowflakeSymbols = ['❅', '❆']; // some snowflake symbols
-  const snowflakeSymbolsMobile = ['❅', '❆', '❄']; // some snowflake symbols mobile version
-
   for (let i = 0; i < count; i++) {
     // create a new snowflake element
     const snowflake = document.createElement('div');
@@ -70,7 +67,7 @@ function addRandomSnowflakes(count) {
     // set random horizontal position, animation delay and size(uncomment lines to enable) 
     const randomLeft = Math.random() * 100; // position (0% to 100%)
     const randomAnimationDelay = Math.random() * 8; // delay (0s to 8s)
-    const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
+    const randomAnimationDelay2 = -(Math.random() * 5); // delay (-5s to 0s)
 
     // apply styles
     snowflake.style.left = `${randomLeft}%`;

Jellyfin.Plugin.Seasonals/Web/snowstorm.css

@@ -8,6 +8,7 @@
     top: 0;
     left: 0;
     z-index: 10;
+    contain: layout paint;
 }
 
 #snowfallCanvas {

Jellyfin.Plugin.Seasonals/Web/snowstorm.js

@@ -49,12 +49,10 @@ function toggleSnowstorm() {
 
 // observe changes in the DOM
 const observer = new MutationObserver(toggleSnowstorm);
-
-// start observation
 observer.observe(document.body, {
-  childList: true,    // observe adding/removing of child elements
+  childList: true,
-  subtree: true,      // observe all levels of the DOM tree
+  subtree: true,
-  attributes: true    // observe changes to attributes (e.g. class changes)
+  attributes: true
 });
 
 let resizeObserver; // Observer for resize events

Jellyfin.Plugin.Seasonals/Web/space.css

@@ -0,0 +1,99 @@
+.space-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+    z-index: 9999;
+    overflow: hidden;
+    contain: strict;
+}
+
+.space-bg-glow {
+    position: absolute;
+    top: 0; left: 0; width: 100vw; height: 100vh;
+    background: radial-gradient(circle at 70% 30%, rgba(138, 43, 226, 0.15), transparent 60%),
+                radial-gradient(circle at 20% 80%, rgba(65, 105, 225, 0.15), transparent 50%);
+    pointer-events: none;
+    z-index: 10;
+    animation: space-nebula-pulse 10s ease-in-out infinite alternate;
+}
+
+@keyframes space-nebula-pulse {
+    0% { opacity: 0.6; }
+    100% { opacity: 1; }
+}
+
+.space-starfield {
+    position: absolute;
+    top: 0; left: 0; width: 100vw; height: 100vh;
+    background: transparent;
+    z-index: 11;
+}
+
+.space-shooting-star {
+    position: absolute;
+    width: 250px;
+    height: 3px;
+    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
+    border-radius: 50%;
+    animation: space-shoot 25s linear infinite;
+    opacity: 0;
+    z-index: 12;
+}
+
+@keyframes space-shoot {
+    0% { transform: rotate(var(--shoot-angle)) translateX(0); opacity: 0; }
+    5% { opacity: 1; }
+    35% { opacity: 1; }
+    40% { transform: rotate(var(--shoot-angle)) translateX(var(--shoot-distance)); opacity: 0; }
+    100% { transform: rotate(var(--shoot-angle)) translateX(var(--shoot-distance)); opacity: 0; }
+}
+
+.space-symbol {
+    position: absolute;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    font-size: 3rem;
+    opacity: 0.85;
+    z-index: 20;
+}
+
+.space-symbol img {
+    width: 6vh;
+    height: auto;
+    max-width: 60px;
+    object-fit: contain;
+    /* Add a slow spin to images */
+    animation: space-slow-spin var(--rot-dur, 20s) linear infinite;
+}
+
+/* Specific elements scaling */
+.space-planet img { width: 8vh; max-width: 80px; }
+.space-astronaut img { width: 10vh; max-width: 100px; }
+.space-satellite img { width: 12vh; max-width: 120px; }
+.space-iss img { width: 25vh; max-width: 180px; }
+.space-rocket img { width: 12vh; max-width: 120px; }
+
+@keyframes space-drift-right {
+    0% { transform: translateX(-10vw) translateY(0) scaleX(-1); }
+    50% { transform: translateX(60vw) translateY(-30vh) scaleX(-1); }
+    100% { transform: translateX(140vw) translateY(0) scaleX(-1); }
+}
+
+@keyframes space-drift-left {
+    0% { transform: translateX(10vw) translateY(0); }
+    50% { transform: translateX(-60vw) translateY(30vh); }
+    100% { transform: translateX(-140vw) translateY(0); }
+}
+
+@keyframes space-slow-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes space-star-drift {
+    from { transform: translateY(0); }
+    to { transform: translateY(-100vh); }
+}

Jellyfin.Plugin.Seasonals/Web/space.js

@@ -0,0 +1,281 @@
+const config = window.SeasonalsPluginConfig?.Space || {};
+
+const space = config.EnableSpace !== undefined ? config.EnableSpace : true;
+const planetCountConf = config.PlanetCount !== undefined ? config.PlanetCount : 6;
+const astronautCountConf = config.AstronautCount !== undefined ? config.AstronautCount : 1;
+const satelliteCountConf = config.SatelliteCount !== undefined ? config.SatelliteCount : 4;
+const issCountConf = config.IssCount !== undefined ? config.IssCount : 1;
+const rocketCountConf = config.RocketCount !== undefined ? config.RocketCount : 1;
+const useRandomSymbols = config.EnableRandomSymbols !== undefined ? config.EnableRandomSymbols : true;
+const enableRandomMobile = config.EnableRandomSymbolsMobile !== undefined ? config.EnableRandomSymbolsMobile : false;
+const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true;
+
+const astronautImages = [
+    "../Seasonals/Resources/space_assets/astronaut_1.gif"
+];
+const planetImages = [
+    "../Seasonals/Resources/space_assets/planet_1.png",
+    "../Seasonals/Resources/space_assets/planet_2.png",
+    "../Seasonals/Resources/space_assets/planet_3.png",
+    "../Seasonals/Resources/space_assets/planet_4.png",
+    "../Seasonals/Resources/space_assets/planet_5.png",
+    "../Seasonals/Resources/space_assets/planet_6.png",
+    "../Seasonals/Resources/space_assets/planet_7.png",
+    "../Seasonals/Resources/space_assets/planet_8.png",
+    "../Seasonals/Resources/space_assets/planet_9.png"
+];
+const satelliteImages = [
+    "../Seasonals/Resources/space_assets/Satellite_1.gif",
+    "../Seasonals/Resources/space_assets/Satellite_2.gif"
+];
+
+const issImage = "../Seasonals/Resources/space_assets/iss.png";
+
+const rocketImages = [
+    "../Seasonals/Resources/space_assets/rocket.gif",
+    "../Seasonals/Resources/space_assets/space-shuttle.png"
+]
+
+let msgPrinted = false;
+
+function toggleSpace() {
+  const container = document.querySelector('.space-container');
+  if (!container) return;
+
+  const videoPlayer = document.querySelector('.videoPlayerContainer');
+  const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+  const isDashboard = document.body.classList.contains('dashboardDocument');
+  const hasUserMenu = document.querySelector('#app-user-menu');
+
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    container.style.display = 'none';
+    if (!msgPrinted) {
+      console.log('Space hidden');
+      msgPrinted = true;
+    }
+  } else {
+    container.style.display = 'block';
+    if (msgPrinted) {
+      console.log('Space visible');
+      msgPrinted = false;
+    }
+  }
+}
+
+const observer = new MutationObserver(toggleSpace);
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
+
+function createSpace() {
+    const container = document.querySelector('.space-container') || document.createElement('div');
+
+    if (!document.querySelector('.space-container')) {
+        container.className = 'space-container';
+        container.setAttribute("aria-hidden", "true");
+        document.body.appendChild(container);
+    }
+
+    const standardPlanetCount = 4;
+    const standardAstronautCount = 1;
+    const standardSatelliteCount = 2;
+    const standardIssCount = 1;
+    const standardRocketCount = 1;
+
+    let isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
+    let pCount = planetCountConf;
+    let aCount = astronautCountConf;
+    let sCount = satelliteCountConf;
+    let iCount = issCountConf;
+    let rCount = rocketCountConf;
+
+    if (isMobile && !enableRandomMobile) {
+        pCount = standardPlanetCount;
+        aCount = standardAstronautCount;
+        sCount = standardSatelliteCount;
+        iCount = standardIssCount;
+        rCount = standardRocketCount;
+    }
+
+    // Add Nebula Glow
+    const bgGlow = document.createElement('div');
+    bgGlow.className = 'space-bg-glow';
+    container.appendChild(bgGlow);
+
+    // Add CSS Starfield
+    const starfield = document.createElement('div');
+    starfield.className = 'space-starfield';
+    let boxShadows1 = [];
+    let boxShadows2 = [];
+    let boxShadows3 = [];
+    
+    // Generate random stars for parallax starfield using CSS % / vw sizes for responsiveness
+    for (let i = 0; i < 150; i++) {
+        let x = (Math.random() * 100).toFixed(2);
+        let y = (Math.random() * 100).toFixed(2);
+        boxShadows1.push(`${x}vw ${y}vh #FFF`);
+        boxShadows1.push(`${x}vw ${(parseFloat(y) + 100).toFixed(2)}vh #FFF`);
+    }
+    for (let i = 0; i < 50; i++) {
+        let x = (Math.random() * 100).toFixed(2);
+        let y = (Math.random() * 100).toFixed(2);
+        boxShadows2.push(`${x}vw ${y}vh #FFF`);
+        boxShadows2.push(`${x}vw ${(parseFloat(y) + 100).toFixed(2)}vh #FFF`);
+    }
+    for (let i = 0; i < 20; i++) {
+        let x = (Math.random() * 100).toFixed(2);
+        let y = (Math.random() * 100).toFixed(2);
+        boxShadows3.push(`${x}vw ${y}vh #FFF`);
+        boxShadows3.push(`${x}vw ${(parseFloat(y) + 100).toFixed(2)}vh #FFF`);
+    }
+
+    const starLayer1 = document.createElement('div');
+    starLayer1.style.width = '1px'; starLayer1.style.height = '1px';
+    starLayer1.style.background = 'transparent';
+    starLayer1.style.boxShadow = boxShadows1.join(", ");
+    starLayer1.style.animation = 'space-star-drift 200s linear infinite';
+    starfield.appendChild(starLayer1);
+
+    const starLayer2 = document.createElement('div');
+    starLayer2.style.width = '2px'; starLayer2.style.height = '2px';
+    starLayer2.style.background = 'transparent';
+    starLayer2.style.boxShadow = boxShadows2.join(", ");
+    starLayer2.style.animation = 'space-star-drift 150s linear infinite';
+    starfield.appendChild(starLayer2);
+
+    const starLayer3 = document.createElement('div');
+    starLayer3.style.width = '3px'; starLayer3.style.height = '3px';
+    starLayer3.style.background = 'transparent';
+    starLayer3.style.boxShadow = boxShadows3.join(", ");
+    starLayer3.style.animation = 'space-star-drift 100s linear infinite';
+    starfield.appendChild(starLayer3);
+    
+    container.appendChild(starfield);
+
+    // Shooting stars
+    const shootingStarCount = isMobile ? 1 : 2; // Less frequent
+    for (let i = 0; i < shootingStarCount; i++) {
+        const streak = document.createElement('div');
+        streak.className = 'space-shooting-star';
+        // Pick a random tail direction and fall direction to match
+        const isFromLeft = Math.random() > 0.5;
+        // Direction angle: random between 15deg-75deg (left) or 105deg-165deg (right)
+        // so they don't always fall in the exact same quadrant trajectory
+        let angle = isFromLeft 
+            ? Math.random() * 60 + 15 
+            : Math.random() * 60 + 105;
+        
+        streak.style.setProperty('--shoot-angle', `${angle}deg`);
+        
+        const topStart = Math.random() * 50; 
+        streak.style.left = isFromLeft ? '-20vw' : '120vw';
+        streak.style.top = `${topStart}vh`;
+        
+        // Travel 200 viewport widths exactly along the rotated angle
+        streak.style.setProperty('--shoot-distance', '200vw');
+        
+        streak.style.animationDelay = `${Math.random() * 20}s`; 
+        
+        // MARK: Shooting Star Speed
+        const flightCycleDuration = Math.random() * 10 + 15; // 15-25s
+        streak.style.animationDuration = `${flightCycleDuration}s`; 
+        
+        container.appendChild(streak);
+    }
+
+    const useRandomDuration = enableDifferentDuration !== false;
+
+    function createSpaceItem(imageArr, cCount, addedClass) {
+        for (let i = 0; i < cCount; i++) {
+            let symbol = document.createElement('div');
+            
+            const randomImage = imageArr[Math.floor(Math.random() * imageArr.length)];
+            symbol.className = `space-symbol ${addedClass}`;
+
+            let img = document.createElement('img');
+            img.src = randomImage;
+            img.onerror = function() {
+                this.style.display = 'none';
+            }; 
+            symbol.appendChild(img);
+
+            const topPos = Math.random() * 90; // 0 to 90vh
+            
+            // Zero gravity sizes / speeds
+            const depth = Math.random(); 
+            // Make background elements (depth close to 0) much smaller than foreground
+            const distanceScale = 0.15 + (depth * 0.85); // 0.15 to 1.0
+            
+            symbol.style.zIndex = Math.floor(depth * 30) + 20;
+
+            let durationSeconds = 30; // Very slow
+            if (useRandomDuration) {
+                durationSeconds = (1 - depth) * 40 + 30 + Math.random() * 10 - 5; 
+            }
+
+            // Randomly pick direction: left-to-right OR right-to-left
+            const goRight = Math.random() > 0.5;
+            const baseTransformScale = goRight ? 'scaleX(-1)' : 'scaleX(1)';
+            
+            if (goRight) {
+                symbol.style.animationName = 'space-drift-right';
+                symbol.style.left = '-20vw';
+                symbol.style.right = 'auto';
+            } else {
+                symbol.style.animationName = 'space-drift-left';
+                symbol.style.right = '-20vw';
+                symbol.style.left = 'auto';
+            }
+
+            symbol.style.top = `${topPos}vh`;
+            symbol.style.animationDuration = `${durationSeconds}s`;
+            
+            // Negative delay correctly scatters them initially across the screen 
+            // so they don't all appear to spawn from the edge at the start
+            const delaySeconds = -(Math.random() * durationSeconds);
+            symbol.style.animationDelay = `${delaySeconds}s`;
+            
+            // Slow rotation inside inner div
+            const rotationDiv = document.createElement('div');
+            const rotDur = Math.random() * 20 + 20; // 20-40s spin
+            const spinReverse = Math.random() > 0.5 ? 'reverse' : 'normal';
+            rotationDiv.style.animation = `space-slow-spin ${rotDur}s linear infinite ${spinReverse}`;
+            
+            // Apply final static scaling and facing to inner image directly
+            img.style.transform = `scale(${distanceScale}) ${baseTransformScale}`;
+            
+            rotationDiv.appendChild(img);
+            symbol.appendChild(rotationDiv);
+
+            // Swap to a random image from the pool every time it completes an orbit (disappears)
+            if (imageArr.length > 1) {
+                // The animation delay pushes the initial cycle, so we use setInterval matched to duration
+                setInterval(() => {
+                    // Update only if currently out of bounds to avoid popping
+                    const rect = symbol.getBoundingClientRect();
+                    if (rect.right < 0 || rect.left > window.innerWidth) {
+                        img.src = imageArr[Math.floor(Math.random() * imageArr.length)];
+                    }
+                }, 2000); // Check occasionally if it's off screen
+            }
+
+            container.appendChild(symbol);
+        }
+    }
+
+    createSpaceItem(planetImages, pCount, 'space-planet');
+    createSpaceItem(astronautImages, aCount, 'space-astronaut');
+    createSpaceItem(satelliteImages, sCount, 'space-satellite');
+    createSpaceItem([issImage], iCount, 'space-iss');
+    createSpaceItem(rocketImages, rCount, 'space-rocket');
+}
+
+function initializeSpace() {
+  if (!space) return;
+  createSpace();
+  toggleSpace();
+}
+
+initializeSpace();