Home page with demo loading

src/shared/prerendered-app/Intro/blob-anim/index.ts

@@ -225,16 +225,12 @@ class BackgroundBlobs {
             minDuration: 2000,
             maxDuration: 5000,
           }),
-          velocity:
-            Math.random() * (bgBlobsMaxVelocity - bgBlobsMinVelocity) +
-            bgBlobsMinVelocity,
+          velocity: rand(bgBlobsMinVelocity, bgBlobsMaxVelocity),
           alpha:
             Math.random() ** 3 * (bgBlobsMaxAlpha - bgBlobsMinAlpha) +
             bgBlobsMinAlpha,
           alphaMultiplier: 1,
-          spinTime:
-            Math.random() * (bgBlobsMaxSpinTime - bgBlobsMinSpinTime) +
-            bgBlobsMinSpinTime,
+          spinTime: rand(bgBlobsMinSpinTime, bgBlobsMaxSpinTime),
           rotatePos: 0,
           radius:
             Math.random() ** 3 * (bgBlobsMaxRadius - bgBlobsMinRadius) +

src/shared/prerendered-app/Intro/index.tsx

@@ -19,25 +19,29 @@ import { startBlobs } from './blob-anim/meta';
 
 const demos = [
   {
-    description: 'Large photo (2.8mb)',
+    description: 'Large photo',
+    size: '2.8mb',
     filename: 'photo.jpg',
     url: largePhoto,
     iconUrl: largePhotoIcon,
   },
   {
-    description: 'Artwork (2.9mb)',
+    description: 'Artwork',
+    size: '2.9mb',
     filename: 'art.jpg',
     url: artwork,
     iconUrl: artworkIcon,
   },
   {
-    description: 'Device screen (1.6mb)',
+    description: 'Device screen',
+    size: '1.6mb',
     filename: 'pixel3.png',
     url: deviceScreen,
     iconUrl: deviceScreenIcon,
   },
   {
-    description: 'SVG icon (13k)',
+    description: 'SVG icon',
+    size: '13k',
     filename: 'squoosh.svg',
     url: logo,
     iconUrl: logoIcon,
@@ -298,7 +302,37 @@ export default class Intro extends Component<Props, State> {
               class={style.mainWave}
             />
           </svg>
-          <div class={style.contentPadding}>Hello</div>
+          <div class={style.contentPadding}>
+            <p class={style.demoTitle}>
+              Or <strong>try one</strong> of these:
+            </p>
+            <ul class={style.demos}>
+              {demos.map((demo, i) => (
+                <li>
+                  <button
+                    class="unbutton"
+                    onClick={(event) => this.onDemoClick(i, event)}
+                  >
+                    <div>
+                      <div class={style.demoIconContainer}>
+                        <img
+                          class={style.demoIcon}
+                          src={demo.iconUrl}
+                          alt={demo.description}
+                        />
+                        {fetchingDemoIndex === i && (
+                          <div class={style.demoLoader}>
+                            <loading-spinner />
+                          </div>
+                        )}
+                      </div>
+                      <div class={style.demoSize}>{demo.size}</div>
+                    </div>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
         </div>
         <div class={style.footer}>
           <svg viewBox="0 0 1920 79" class={style.topWave}>

src/shared/prerendered-app/Intro/style.css

@@ -131,13 +131,13 @@
   gap: 4rem;
 }
 
-.footer-link,
-.footer-link-with-logo {
+.footer-link {
   text-decoration: none;
   color: inherit;
 }
 
 .footer-link-with-logo {
+  composes: footer-link;
   display: grid;
   grid-template-columns: 1.8em max-content;
   align-items: center;
@@ -167,3 +167,59 @@
   font-size: 1.6rem;
   animation: fade-in 600ms ease-in-out;
 }
+
+.demo-title {
+  color: var(--white);
+  margin: 0;
+  font-size: 2rem;
+  text-align: center;
+}
+
+.demos {
+  display: grid;
+  gap: 6rem;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  justify-items: center;
+  justify-content: center;
+  padding: 0;
+  width: max-content;
+  margin: 3rem auto;
+
+  & > li {
+    display: block;
+  }
+}
+
+.demo-size {
+  background: var(--dim-blue);
+  border-radius: 1000px;
+  color: var(--white);
+  width: max-content;
+  padding: 0.5rem 1.2rem;
+  margin: 0.7rem auto 0;
+}
+
+.demo-icon-container {
+  --size: 100px;
+  border-radius: var(--size);
+  position: relative;
+  overflow: hidden;
+}
+.demo-icon {
+  width: var(--size);
+  height: var(--size);
+  display: block;
+}
+.demo-loader {
+  composes: abs-fill from global;
+  background: rgba(0, 0, 0, 0.5);
+  display: grid;
+  justify-content: center;
+  align-content: center;
+  animation: fade-in 600ms ease-in-out;
+
+  & > loading-spinner {
+    --color: var(--white);
+  }
+}

src/shared/prerendered-app/colors.css

@@ -2,13 +2,13 @@ html {
   --pink: #ff3385;
   --hot-pink: #ff0066;
   --white: #fff;
+  --dim-blue: #0a7bcc;
   --deep-blue: #09f;
   --light-blue: #76c8ff;
   --light-gray: #eaeaea;
   --dark-text: #343a3e;
 
-  /*
-  Old stuff:
+  /* Old stuff: */
   --gray-dark: rgba(0, 0, 0, 0.8);
 
   --button-fg-color: 95, 180, 228;
@@ -16,5 +16,4 @@ html {
 
   --negative: rgb(207, 113, 127);
   --positive: rgb(149, 212, 159);
-  */
 }