feat: artwork controller tweaks

src/pages/constituents/blur/artwork-controller/_applet.astro

···
 ---
 
 <main>
+  <section class="artwork"></section>
+
   <section class="controller">
     <div class="gradient-blur">
       <div></div>
···
       <div></div>
     </div>
 
+    <div class="controller__background"></div>
+
     <!-- Content -->
     <section class="controller__inner"></section>
   </section>
···
   main {
     background: var(--color-3);
     color: white;
+    display: flex;
+    flex-direction: column;
     font-size: var(--fs-sm);
     height: 100vh;
-    max-width: var(--container-3xs);
+    max-width: var(--container-2xs);
     overflow: hidden;
     position: relative;
     transition:
···
   /* Artwork */
 
   .artwork {
-    aspect-ratio: 1 / 1;
-    height: 90%;
-    left: 50%;
+    flex: 1;
+    pointer-events: none;
+    position: relative;
+  }
+
+  .artwork img {
+    height: 100%;
+    left: 0;
     object-fit: cover;
-    pointer-events: none;
     position: absolute;
     top: 0;
-    transform: translateX(-50%);
     width: 100%;
-    z-index: 0;
   }
 
   /* Progress bars */
···
   /* Controller */
 
   .controller {
-    bottom: 0;
-    left: 0;
+    flex-shrink: 0;
     padding: var(--space-md);
+    position: relative;
+  }
+
+  .controller__background {
+    inset: 0;
+    opacity: 0.5;
     position: absolute;
-    right: 0;
-    z-index: 10;
+    transition: background-color 500ms;
+    z-index: 1;
   }
 
   .controller__inner {
···
 
   .gradient-blur {
     bottom: 0;
-    height: 200%;
+    height: 125%;
     left: 0;
     pointer-events: none;
     position: absolute;
     right: 0;
-    z-index: 0;
+    z-index: 2;
   }
 
   .gradient-blur > div {
···
   }
 
   .gradient-blur > div:nth-of-type(1) {
-    backdrop-filter: blur(0.5px);
+    backdrop-filter: blur(1px);
     mask: linear-gradient(
       to bottom,
       rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 1) 12.5%,
-      rgba(0, 0, 0, 1) 25%,
-      rgba(0, 0, 0, 0) 37.5%
+      rgba(0, 0, 0, 1) 4.166666665%,
+      rgba(0, 0, 0, 1) 8.333333332%,
+      rgba(0, 0, 0, 0) 12.499999999%
     );
     z-index: 1;
   }
 
   .gradient-blur > div:nth-of-type(2) {
-    backdrop-filter: blur(1px);
+    backdrop-filter: blur(2px);
     mask: linear-gradient(
       to bottom,
-      rgba(0, 0, 0, 0) 12.5%,
-      rgba(0, 0, 0, 1) 25%,
-      rgba(0, 0, 0, 1) 37.5%,
-      rgba(0, 0, 0, 0) 50%
+      rgba(0, 0, 0, 0) 4.166666665%,
+      rgba(0, 0, 0, 1) 8.333333332%,
+      rgba(0, 0, 0, 1) 12.499999999%,
+      rgba(0, 0, 0, 0) 16.666666666%
     );
     z-index: 2;
   }
 
   .gradient-blur > div:nth-of-type(3) {
-    backdrop-filter: blur(2px);
+    backdrop-filter: blur(4px);
     mask: linear-gradient(
       to bottom,
-      rgba(0, 0, 0, 0) 25%,
-      rgba(0, 0, 0, 1) 37.5%,
-      rgba(0, 0, 0, 1) 50%,
-      rgba(0, 0, 0, 0) 62.5%
+      rgba(0, 0, 0, 0) 8.333333332%,
+      rgba(0, 0, 0, 1) 12.499999999%,
+      rgba(0, 0, 0, 1) 16.666666666%,
+      rgba(0, 0, 0, 0) 20.833333333%
     );
     z-index: 3;
   }
 
   .gradient-blur > div:nth-of-type(4) {
-    backdrop-filter: blur(4px);
+    backdrop-filter: blur(8px);
     mask: linear-gradient(
       to bottom,
-      rgba(0, 0, 0, 0) 37.5%,
-      rgba(0, 0, 0, 1) 50%,
-      rgba(0, 0, 0, 1) 62.5%,
-      rgba(0, 0, 0, 0) 75%
+      rgba(0, 0, 0, 0) 12.499999999%,
+      rgba(0, 0, 0, 1) 16.666666666%,
+      rgba(0, 0, 0, 1) 20.833333333%,
+      rgba(0, 0, 0, 0) 25%
     );
     z-index: 4;
   }
 
   .gradient-blur > div:nth-of-type(5) {
-    backdrop-filter: blur(8px);
+    backdrop-filter: blur(16px);
     mask: linear-gradient(
       to bottom,
-      rgba(0, 0, 0, 0) 50%,
-      rgba(0, 0, 0, 1) 62.5%,
-      rgba(0, 0, 0, 1) 75%,
-      rgba(0, 0, 0, 0) 87.5%
+      rgba(0, 0, 0, 0) 16.666666666%,
+      rgba(0, 0, 0, 1) 20.833333333%,
+      rgba(0, 0, 0, 1) 25%,
+      rgba(0, 0, 0, 0) 100%
     );
     z-index: 5;
   }
 
   .gradient-blur > div:nth-of-type(6) {
-    backdrop-filter: blur(16px);
-    mask: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0) 62.5%,
-      rgba(0, 0, 0, 1) 75%,
-      rgba(0, 0, 0, 1) 87.5%,
-      rgba(0, 0, 0, 0) 100%
-    );
-    z-index: 6;
-  }
-
-  .gradient-blur > div:nth-of-type(7) {
     backdrop-filter: blur(32px);
     mask: linear-gradient(
       to bottom,
-      rgba(0, 0, 0, 0) 75%,
-      rgba(0, 0, 0, 1) 87.5%,
+      rgba(0, 0, 0, 0) 20.833333333%,
+      rgba(0, 0, 0, 1) 25%,
       rgba(0, 0, 0, 1) 100%
     );
-    z-index: 7;
+    z-index: 6;
   }
 
-  .gradient-blur > div:nth-of-type(8) {
+  .gradient-blur > div:nth-of-type(7) {
     backdrop-filter: blur(64px);
-    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 1) 100%);
-    z-index: 8;
+    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 100%);
+    z-index: 7;
   }
 </style>
 
···
   const context = register();
 
   // Stored state
-  const STORE_PREFIX = "@applets/constituents/blur/artwork-controller";
+  const STORE_PREFIX = `@applets/constituents/blur/artwork-controller/${context.groupId || "main"}`;
   const STATE_KEY = `${STORE_PREFIX}/state`;
   const stored = localStorage.getItem(STATE_KEY);
 
···
   ////////////////////////////////////////////
   // UI
   ////////////////////////////////////////////
+  const bg = document.body.querySelector<HTMLElement>(".controller__background");
+  const controller = document.body.querySelector<HTMLElement>(".controller__inner");
   const main = document.body.querySelector("main");
-  const controller = document.body.querySelector(".controller__inner");
+  const showcase = document.body.querySelector<HTMLElement>(".artwork");
 
-  if (!main || !controller) throw new Error("Missing DOM elements");
+  if (!bg || !controller || !main || !showcase) throw new Error("Missing DOM elements");
 
   const h = (
     tag: string,
···
     const art = artwork();
 
     // TODO: Remove existing art?
-    if (art.length === 0) return;
+    if (art.length === 0) {
+      return;
+    }
 
     // Show artwork
     const blob = new Blob([art[0].bytes], { type: art[0].mime });
···
 
     // Remove existing artwork
     // TODO: Fade in new artwork and then remove other
-    const existingArtwork = document.querySelector(".artwork");
-    existingArtwork?.remove();
+    showcase.innerHTML = "";
 
     // Create img for new artwork
     const img = h("img", { src: url, className: "artwork" });
···
       const fac = new FastAverageColor();
       const color = fac.getColor(img as HTMLImageElement);
       main.style.backgroundColor = color.rgba;
+      bg.style.backgroundColor = color.rgba;
     };
 
-    // TODO: Switch to dark/light based on color?
-    //       USE color.isDark OR color.isLight
-
     // Insert new artwork
-    main.appendChild(img);
+    showcase.appendChild(img);
   });
 
   ////////////////////////////////////////////