Will it work?

src/page/background/background.html.ts

@@ -5,6 +5,7 @@ export const generate = (
   count: number,
   color?: () => string,
   height?: () => number,
+  isAnimated?: (index) => boolean,
   transform?: () => string
 ): html => `
     <section class="background">
@@ -13,8 +14,12 @@ export const generate = (
             ? new Array(count)
                 .fill(0, 0, count)
                 .map(
-                  _ =>
-                    `<div style="background-color: ${color()}; height: ${height()}px; transform: ${transform()}"></div>`
+                  (_, i) => `
+                    <div class="${
+                      isAnimated(i) ? "animated" : ""
+                    }" style="background-color: ${color()}; height: ${height()}px; transform: ${transform()}"
+                    ></div>
+                `
                 )
                 .join("")
             : ""

src/page/background/background.scss

@@ -9,11 +9,25 @@
   transform-style: preserve-3d;
   overflow: hidden;
 
+  transition: height $slow-transition-time, width $slow-transition-time;
+
   div {
     border-radius: 10000px;
     position: absolute;
     left: 0;
     top: 0;
     width: 160px;
+
+    &.animated {
+      animation: fade-in 1s linear forwards;
+      @keyframes fade-in {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    }
   }
 }

src/page/background/background.ts

@@ -13,6 +13,9 @@ export class PageBackground extends PageElement {
   private colors = ["#fff9e077", "#ffd6d677"];
   private blobSize = 150; // with margin
   private perspective = 5;
+  private currentRealHeight = 0;
+  private currentRealWidth = 0;
+  private currentBlobCount = 0;
 
   public constructor() {
     super();
@@ -39,6 +42,7 @@ export class PageBackground extends PageElement {
       siblings.map(c => {
         const computedStyle = window.getComputedStyle(c);
         return (
+          // ignores margin collapse
           c.clientHeight +
           parseInt(computedStyle.marginTop) +
           parseInt(computedStyle.marginBottom) +
@@ -48,34 +52,45 @@ export class PageBackground extends PageElement {
       })
     );
 
-    const random = randomFactory(42);
+    if (height > this.currentRealHeight || width > this.currentRealWidth) {
+      this.currentRealHeight = height;
+      this.currentRealWidth = width;
 
-    const count = Math.round((width * height) / this.blobSize ** 2);
+      const random = randomFactory(44);
 
-    const randomWithKnownZ = (z: number, bound: number): number => {
-      const l = (bound * (this.perspective + z)) / this.perspective;
-      return randomInInterval(-(l / 2 - bound / 2), l / 2 + bound / 2, random);
-    };
+      const count = Math.round((width * height) / this.blobSize ** 2);
 
-    this.setElement(
-      createElement(
-        generate(
-          count,
-          () => choose(this.colors, random),
-          () => randomInInterval(160, 750, random),
-          () => {
-            const z = randomInInterval(-12, -25, random);
-            return `
+      const randomWithKnownZ = (z: number, bound: number): number => {
+        const l = (bound * (this.perspective + z)) / this.perspective;
+        return randomInInterval(
+          -(l / 2 - bound / 2),
+          l / 2 + bound / 2,
+          random
+        );
+      };
+
+      this.setElement(
+        createElement(
+          generate(
+            count,
+            () => choose(this.colors, random),
+            () => randomInInterval(160, 750, random),
+            i => i >= this.currentBlobCount,
+            () => {
+              const z = randomInInterval(-12, -25, random);
+              return `
               translateX(${randomWithKnownZ(-z, width)}px)
               translateY(${randomWithKnownZ(-z, height)}px)
               translateZ(${z}px)
               rotate(-20deg)
             `;
-          }
+            }
+          )
         )
-      )
-    );
+      );
 
+      this.currentBlobCount = count;
+    }
     this.getElement().style.width = `${width}px`;
     this.getElement().style.height = `${height}px`;
   }