feat: Add HexagonWave component, remove WhirlpoolGalaxy, and expand stories for NeonRails and StartTrail with new configurations and a particle force property.

Author: Niekes

src/BeautifulBackground.ts

@@ -11,6 +11,7 @@ export abstract class BeautifulBackground extends LitElement {
     public width: number = 0;
     public height: number = 0;
     public animationFrameId: number | null = null;
+
     @property({ type: Number, attribute: "trail-opacity" })
     public trailOpacity: number = 0.1;
 
@@ -23,6 +24,14 @@ export abstract class BeautifulBackground extends LitElement {
         this.debouncedResize = debounce(this.resizeCanvas.bind(this), 100);
     }
 
+    protected handleVisibilityChange = () => {
+        if (document.visibilityState === "hidden") {
+            this.stopAnimation();
+        } else {
+            this.startAnimation();
+        }
+    };
+
     protected firstUpdated() {
         if (!this.shadowRoot) {
             this.attachShadow({ mode: "open" });
@@ -34,14 +43,20 @@ export abstract class BeautifulBackground extends LitElement {
         this.startAnimation();
 
         window.addEventListener("resize", this.debouncedResize);
+        document.addEventListener(
+            "visibilitychange",
+            this.handleVisibilityChange,
+        );
     }
 
     disconnectedCallback() {
         super.disconnectedCallback();
         window.removeEventListener("resize", this.debouncedResize);
-        if (this.animationFrameId !== null) {
-            cancelAnimationFrame(this.animationFrameId);
-        }
+        document.removeEventListener(
+            "visibilitychange",
+            this.handleVisibilityChange,
+        );
+        this.stopAnimation();
     }
 
     protected resizeCanvas(): void {
@@ -68,6 +83,8 @@ export abstract class BeautifulBackground extends LitElement {
     }
 
     protected startAnimation() {
+        if (this.animationFrameId !== null) return;
+
         let lastTime = performance.now();
         const animate = (now: number) => {
             const deltaTime = (now - lastTime) / 1000;
@@ -78,6 +95,13 @@ export abstract class BeautifulBackground extends LitElement {
         this.animationFrameId = requestAnimationFrame(animate);
     }
 
+    protected stopAnimation() {
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
+    }
+
     protected abstract loop(deltaTime: number): void;
 
     render() {

src/stories/DigitalRain.stories.ts

@@ -71,7 +71,18 @@ type Story = StoryObj;
 
 export const Default: Story = {
     args: {
-        backgroundColor: "#000",
+        characters: "ｱｲｳｴｵｶｷｸｹｺ",
+        fontColorHueStart: 120,
+        fontColorHueEnd: 140,
+        fontColorSaturationStart: 80,
+        fontColorSaturationEnd: 100,
+        fontColorLightnessStart: 40,
+        fontColorLightnessEnd: 60,
+        backgroundColor: "#000000",
+        speed: 8,
+        fontSize: 20,
+        randomness: 0.95,
+        trailOpacity: 0.08,
     },
 };
 
@@ -90,9 +101,79 @@ export const PurpleRain: Story = {
         characters: "|",
         randomness: 0.98,
         fontSize: 12,
-        fontColorHueStart: 267,
-        fontColorHueEnd: 278,
-        fontColorSaturationStart: 100,
-        speed: 30,
+        fontColorHueStart: 261,
+        fontColorHueEnd: 289,
+        fontColorSaturationStart: 87,
+        speed: 5.4,
+        fontColorLightnessStart: 43,
+        fontColorLightnessEnd: 55,
+    },
+};
+
+export const NeonBlue: Story = {
+    args: {
+        characters: "ABCDEF0123456789",
+        fontColorHueStart: 180,
+        fontColorHueEnd: 210,
+        fontColorSaturationStart: 90,
+        fontColorSaturationEnd: 100,
+        fontColorLightnessStart: 60,
+        fontColorLightnessEnd: 70,
+        backgroundColor: "#001122",
+        speed: 6,
+        fontSize: 18,
+        randomness: 0.9,
+        trailOpacity: 0.12,
+    },
+};
+
+export const OrangeFire: Story = {
+    args: {
+        characters: "▲◆●★",
+        fontColorHueStart: 30,
+        fontColorHueEnd: 45,
+        fontColorSaturationStart: 80,
+        fontColorSaturationEnd: 100,
+        fontColorLightnessStart: 50,
+        fontColorLightnessEnd: 60,
+        backgroundColor: "#220000",
+        speed: 7,
+        fontSize: 22,
+        randomness: 0.92,
+        trailOpacity: 0.15,
+    },
+};
+
+export const GhostWhite: Story = {
+    args: {
+        characters: "░▒▓■□▲▼",
+        fontColorHueStart: 0,
+        fontColorHueEnd: 0,
+        fontColorSaturationStart: 0,
+        fontColorSaturationEnd: 0,
+        fontColorLightnessStart: 80,
+        fontColorLightnessEnd: 100,
+        backgroundColor: "#111111",
+        speed: 4,
+        fontSize: 16,
+        randomness: 0.98,
+        trailOpacity: 0.05,
+    },
+};
+
+export const RainbowChaos: Story = {
+    args: {
+        characters: "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",
+        fontColorHueStart: 0,
+        fontColorHueEnd: 360,
+        fontColorSaturationStart: 70,
+        fontColorSaturationEnd: 100,
+        fontColorLightnessStart: 40,
+        fontColorLightnessEnd: 80,
+        backgroundColor: "#000000",
+        speed: 9,
+        fontSize: 14,
+        randomness: 0.99,
+        trailOpacity: 0.09,
     },
 };