Add space backdrop and star layers to landing page for enhanced visual effects

src/app.css

@@ -54,24 +54,109 @@ a {
   position: relative;
   isolation: isolate;
   overflow: clip;
-  background:
+  background: var(--color-bg-deep);
-    radial-gradient(circle at 50% 0%, rgba(181, 140, 255, 0.22), transparent 34rem),
-    linear-gradient(to bottom, rgba(7, 0, 20, 0.18), rgba(54, 0, 95, 0.38));
 }
 
-.landing-page::before {
+.space-backdrop,
-  content: '';
+.space-backdrop::before,
+.space-backdrop::after,
+.star-layer {
+  pointer-events: none;
   position: absolute;
+  inset: 0;
   z-index: -1;
-  inset: -8svh 0;
+}
-  background-image: url('/assets/squiggleverse-bg.webp');
+
-  background-position: center top;
+.space-backdrop {
-  background-size: cover;
+  overflow: hidden;
-  transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.16), 0) scale(1.08);
+  background:
+    radial-gradient(circle at 50% -8%, rgba(209, 183, 255, 0.2), transparent 23rem),
+    radial-gradient(ellipse at 18% 48%, rgba(112, 14, 181, 0.42), transparent 35rem),
+    radial-gradient(ellipse at 84% 50%, rgba(88, 8, 156, 0.38), transparent 34rem),
+    radial-gradient(ellipse at 50% 88%, rgba(111, 0, 185, 0.58), transparent 42rem),
+    linear-gradient(180deg, #03000b 0%, #0d001b 26%, #260047 62%, #57008f 100%);
+}
+
+.space-backdrop::before {
+  content: '';
+  inset: -16svh -8vw;
+  background:
+    radial-gradient(ellipse at 12% 32%, rgba(111, 42, 173, 0.22), transparent 28rem),
+    radial-gradient(ellipse at 88% 28%, rgba(102, 54, 176, 0.18), transparent 24rem),
+    radial-gradient(ellipse at 50% 83%, rgba(113, 0, 178, 0.44), transparent 35rem);
+  filter: blur(18px);
+  transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.08), 0);
+  will-change: transform;
+}
+
+.space-backdrop::after {
+  content: '';
+  opacity: 0.2;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
+  background-size: 13rem 13rem;
+  mask-image: linear-gradient(to bottom, transparent, black 15%, black 86%, transparent);
+}
+
+.star-layer {
+  inset: -18svh -10vw;
+  background-repeat: repeat;
   transform-origin: center top;
   will-change: transform;
 }
 
+.star-layer-dust {
+  opacity: 0.72;
+  background-image:
+    radial-gradient(circle, rgba(255, 255, 255, 0.74) 0 0.8px, transparent 1.4px),
+    radial-gradient(circle, rgba(223, 207, 255, 0.62) 0 0.7px, transparent 1.3px),
+    radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 0.6px, transparent 1.2px);
+  background-position:
+    1rem 2rem,
+    6rem 8rem,
+    11rem 4rem;
+  background-size:
+    9rem 11rem,
+    13rem 17rem,
+    19rem 23rem;
+  transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.1), 0);
+}
+
+.star-layer-far {
+  opacity: 0.78;
+  background-image:
+    radial-gradient(circle, rgba(255, 255, 255, 0.86) 0 1px, transparent 1.8px),
+    radial-gradient(circle, rgba(222, 204, 255, 0.72) 0 1px, transparent 1.7px),
+    radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 0.8px, transparent 1.5px);
+  background-position:
+    2rem 4rem,
+    8rem 13rem,
+    16rem 7rem;
+  background-size:
+    17rem 19rem,
+    23rem 29rem,
+    31rem 37rem;
+  transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.14), 0);
+}
+
+.star-layer-near {
+  opacity: 0.9;
+  background-image:
+    radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 1.4px, rgba(202, 181, 255, 0.48) 2.2px, transparent 8px),
+    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1px, rgba(180, 132, 255, 0.36) 2px, transparent 6px),
+    radial-gradient(circle, rgba(255, 255, 255, 0.78) 0 1px, transparent 2px);
+  background-position:
+    4rem 6rem,
+    14rem 18rem,
+    24rem 10rem;
+  background-size:
+    24rem 31rem,
+    36rem 42rem,
+    19rem 23rem;
+  transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.28), 0);
+}
+
 .hero {
   width: min(1120px, 100%);
   min-height: 100svh;
@@ -217,9 +302,25 @@ a {
 }
 
 @media (max-width: 768px) {
-  .landing-page::before {
+  .space-backdrop::before {
-    inset: -4svh 0;
+    transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.05), 0);
-    transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.1), 0) scale(1.08);
+  }
+
+  .star-layer {
+    inset: -10svh -18vw;
+  }
+
+  .star-layer-far {
+    transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.08), 0);
+  }
+
+  .star-layer-dust {
+    opacity: 0.68;
+    transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.06), 0);
+  }
+
+  .star-layer-near {
+    transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.16), 0);
   }
 
   .hero {
@@ -258,7 +359,10 @@ a {
     transition-duration: 0.001ms !important;
   }
 
-  .landing-page::before {
+  .space-backdrop::before,
+  .star-layer-dust,
+  .star-layer-far,
+  .star-layer-near {
     transform: none;
     will-change: auto;
   }

src/routes/+page.svelte

@@ -35,7 +35,9 @@
   <meta name="twitter:description" content="A whimsical game-based learning system for grammar, usage, and style." />
   <meta name="twitter:image" content="https://squiggleverse.com/og-image.webp" />
 
-  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+  <link rel="icon" href="/favicon.ico" sizes="any" />
+  <link rel="icon" href="/favicon.png" type="image/png" />
+  <link rel="apple-touch-icon" href="/icons/squiggleverse-icon-192.png" />
   <link rel="manifest" href="/site.webmanifest" />
   <meta name="theme-color" content="#160030" />
   <link rel="preload" as="image" href={logo} type="image/webp" />
@@ -45,6 +47,12 @@
 <svelte:window bind:scrollY />
 
 <main class="landing-page" style={`--parallax-y: ${Math.min(scrollY, 1200)}px;`}>
+  <div class="space-backdrop" aria-hidden="true">
+    <div class="star-layer star-layer-dust"></div>
+    <div class="star-layer star-layer-far"></div>
+    <div class="star-layer star-layer-near"></div>
+  </div>
+
   <h1 class="sr-only">Squiggleverse</h1>
 
   <section class="hero" aria-label="Squiggleverse landing page">

static/favicon.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Squiggleverse">
-  <rect width="64" height="64" rx="14" fill="#160030" />
-  <path d="M15 34c0-10 7-18 17-18 8 0 14 5 14 12 0 8-6 13-14 13h-4" fill="none" stroke="#f1e7ff" stroke-width="7" stroke-linecap="round" />
-  <circle cx="44" cy="18" r="4" fill="#43d8ff" />
-  <circle cx="21" cy="48" r="4" fill="#b58cff" />
-</svg>

static/site.webmanifest

@@ -7,9 +7,14 @@
   "theme_color": "#160030",
   "icons": [
     {
-      "src": "/favicon.svg",
+      "src": "/icons/squiggleverse-icon-192.png",
-      "sizes": "64x64",
+      "sizes": "192x192",
-      "type": "image/svg+xml"
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/squiggleverse-icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
     }
   ]
 }