New homepage (#861)

* Paste button

* Logo and animated blobs

* Predictable initial blob position

* Initial blob shape

* Update canvas on resize if not updating every frame

* lol

* Get styles from CSS

* Background blobs

* Fade into the center

* Get initial focus

* Pause time while page is hidden

* Footer

* Optimise amount of initial CSS

* More CSS optimisation

* Install button

* Home page with demo loading

* Tweak size

* Replace thumbnails

* Responsive demo section

* Responsive main section

* Remove debug stuff

* Fix prerender SVG size

* Changes from feedback

* Blob nudges (#872)

* more smaller blobs

* less blobs that are practically invisible

* more dynamic speed range and stronger gravity

* Reverting resize observer change

The content rect is different to getBoundingClientRect

Co-authored-by: Adam Argyle <atom@argyleink.com>

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

@@ -0,0 +1,417 @@
+import * as style from '../style.css';
+import { startBlobs } from './meta';
+
+/**
+ * Control point x,y - point x,y - control point x,y
+ */
+export type BlobPoint = [number, number, number, number, number, number];
+
+const maxPointDistance = 0.25;
+
+function randomisePoint(point: BlobPoint): BlobPoint {
+  const distance = Math.random() * maxPointDistance;
+  const angle = Math.random() * Math.PI * 2;
+  const xShift = Math.sin(angle) * distance;
+  const yShift = Math.cos(angle) * distance;
+  return [
+    point[0] + xShift,
+    point[1] + yShift,
+    point[2] + xShift,
+    point[3] + yShift,
+    point[4] + xShift,
+    point[5] + yShift,
+  ];
+}
+
+function easeInOutQuad(x: number): number {
+  return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
+}
+
+function easeInExpo(x: number): number {
+  return x === 0 ? 0 : Math.pow(2, 10 * x - 10);
+}
+
+const rand = (min: number, max: number) => Math.random() * (max - min) + min;
+
+interface CircleBlobPointState {
+  basePoint: BlobPoint;
+  pos: number;
+  duration: number;
+  startPoint: BlobPoint;
+  endPoint: BlobPoint;
+}
+
+/** Bezier points for a seven point circle, to 3 decimal places */
+const sevenPointCircle: BlobPoint[] = [
+  [-0.304, -1, 0, -1, 0.304, -1],
+  [0.592, -0.861, 0.782, -0.623, 0.972, -0.386],
+  [1.043, -0.074, 0.975, 0.223, 0.907, 0.519],
+  [0.708, 0.769, 0.434, 0.901, 0.16, 1.033],
+  [-0.16, 1.033, -0.434, 0.901, -0.708, 0.769],
+  [-0.907, 0.519, -0.975, 0.223, -1.043, -0.074],
+  [-0.972, -0.386, -0.782, -0.623, -0.592, -0.861],
+];
+
+/*
+// Should it be needed, here's how the above was created:
+function createBezierCirclePoints(points: number): BlobPoint[] {
+  const anglePerPoint = 360 / points;
+  const matrix = new DOMMatrix();
+  const point = new DOMPoint();
+  const controlDistance = (4 / 3) * Math.tan(Math.PI / (2 * points));
+  return Array.from({ length: points }, (_, i) => {
+    point.x = -controlDistance;
+    point.y = -1;
+    const cp1 = point.matrixTransform(matrix);
+    point.x = 0;
+    point.y = -1;
+    const p = point.matrixTransform(matrix);
+    point.x = controlDistance;
+    point.y = -1;
+    const cp2 = point.matrixTransform(matrix);
+    const basePoint: BlobPoint = [cp1.x, cp1.y, p.x, p.y, cp2.x, cp2.y];
+    matrix.rotateSelf(0, 0, anglePerPoint);
+    return basePoint;
+  });
+}
+*/
+
+interface CircleBlobOptions {
+  minDuration?: number;
+  maxDuration?: number;
+  startPoints?: BlobPoint[];
+}
+
+class CircleBlob {
+  private animStates: CircleBlobPointState[];
+  private minDuration: number;
+  private maxDuration: number;
+  private points: BlobPoint[];
+
+  constructor(
+    basePoints: BlobPoint[],
+    {
+      startPoints = basePoints.map((point) => randomisePoint(point)),
+      minDuration = 4000,
+      maxDuration = 11000,
+    }: CircleBlobOptions = {},
+  ) {
+    this.points = startPoints;
+    this.minDuration = minDuration;
+    this.maxDuration = maxDuration;
+    this.animStates = basePoints.map((basePoint, i) => ({
+      basePoint,
+      pos: 0,
+      duration: rand(minDuration, maxDuration),
+      startPoint: startPoints[i],
+      endPoint: randomisePoint(basePoint),
+    }));
+  }
+
+  advance(timeDelta: number): void {
+    this.points = this.animStates.map((animState) => {
+      animState.pos += timeDelta / animState.duration;
+      if (animState.pos >= 1) {
+        animState.startPoint = animState.endPoint;
+        animState.pos = 0;
+        animState.duration = rand(this.minDuration, this.maxDuration);
+        animState.endPoint = randomisePoint(animState.basePoint);
+      }
+      const eased = easeInOutQuad(animState.pos);
+
+      const point = animState.startPoint.map((startPoint, i) => {
+        const endPoint = animState.endPoint[i];
+        return (endPoint - startPoint) * eased + startPoint;
+      }) as BlobPoint;
+
+      return point;
+    });
+  }
+
+  draw(ctx: CanvasRenderingContext2D) {
+    const points = this.points;
+    ctx.beginPath();
+    ctx.moveTo(points[0][2], points[0][3]);
+
+    for (let i = 0; i < points.length; i++) {
+      const nextI = i === points.length - 1 ? 0 : i + 1;
+      ctx.bezierCurveTo(
+        points[i][4],
+        points[i][5],
+        points[nextI][0],
+        points[nextI][1],
+        points[nextI][2],
+        points[nextI][3],
+      );
+    }
+
+    ctx.closePath();
+    ctx.fill();
+  }
+}
+
+const centralBlobsRotationTime = 120000;
+
+class CentralBlobs {
+  private rotatePos: number = 0;
+  private blobs = Array.from(
+    { length: 4 },
+    (_, i) => new CircleBlob(sevenPointCircle, { startPoints: startBlobs[i] }),
+  );
+
+  advance(timeDelta: number) {
+    this.rotatePos =
+      (this.rotatePos + timeDelta / centralBlobsRotationTime) % 1;
+    for (const blob of this.blobs) blob.advance(timeDelta);
+  }
+
+  draw(ctx: CanvasRenderingContext2D, x: number, y: number, radius: number) {
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.scale(radius, radius);
+    ctx.rotate(Math.PI * 2 * this.rotatePos);
+    for (const blob of this.blobs) blob.draw(ctx);
+    ctx.restore();
+  }
+}
+
+const bgBlobsMinRadius = 7;
+const bgBlobsMaxRadius = 60;
+const bgBlobsMinAlpha = 0.2;
+const bgBlobsMaxAlpha = 0.8;
+const bgBlobsPerPx = 0.000025;
+const bgBlobsMinSpinTime = 20000;
+const bgBlobsMaxSpinTime = 60000;
+const bgBlobsMinVelocity = 0.0015;
+const bgBlobsMaxVelocity = 0.007;
+const gravityVelocityMultiplier = 15;
+const gravityStartDistance = 300;
+
+interface BackgroundBlob {
+  blob: CircleBlob;
+  velocity: number;
+  spinTime: number;
+  alpha: number;
+  alphaMultiplier: number;
+  rotatePos: number;
+  radius: number;
+  x: number;
+  y: number;
+}
+
+const bgBlobsAlphaTime = 2000;
+
+class BackgroundBlobs {
+  private bgBlobs: BackgroundBlob[] = [];
+  private overallAlphaPos = 0;
+
+  constructor(bounds: DOMRect) {
+    const blobs = Math.round(bounds.width * bounds.height * bgBlobsPerPx);
+    this.bgBlobs = Array.from({ length: blobs }, () => {
+      const radiusPos = easeInExpo(Math.random());
+
+      return {
+        blob: new CircleBlob(sevenPointCircle, {
+          minDuration: 2000,
+          maxDuration: 5000,
+        }),
+        // Velocity is based on the size
+        velocity:
+          (1 - radiusPos) * (bgBlobsMaxVelocity - bgBlobsMinVelocity) +
+          bgBlobsMinVelocity,
+        alpha:
+          Math.random() ** 3 * (bgBlobsMaxAlpha - bgBlobsMinAlpha) +
+          bgBlobsMinAlpha,
+        alphaMultiplier: 1,
+        spinTime: rand(bgBlobsMinSpinTime, bgBlobsMaxSpinTime),
+        rotatePos: 0,
+        radius:
+          radiusPos * (bgBlobsMaxRadius - bgBlobsMinRadius) + bgBlobsMinRadius,
+        x: Math.random() * bounds.width,
+        y: Math.random() * bounds.height,
+      };
+    });
+  }
+
+  advance(
+    timeDelta: number,
+    bounds: DOMRect,
+    targetX: number,
+    targetY: number,
+    targetRadius: number,
+  ) {
+    if (this.overallAlphaPos !== 1) {
+      this.overallAlphaPos = Math.min(
+        1,
+        this.overallAlphaPos + timeDelta / bgBlobsAlphaTime,
+      );
+    }
+    for (const bgBlob of this.bgBlobs) {
+      bgBlob.blob.advance(timeDelta);
+      let dist = Math.hypot(bgBlob.x - targetX, bgBlob.y - targetY);
+      bgBlob.rotatePos = (bgBlob.rotatePos + timeDelta / bgBlob.spinTime) % 1;
+
+      if (dist < 10) {
+        // Move the circle out to a random edge
+        switch (Math.floor(Math.random() * 4)) {
+          case 0: // top
+            bgBlob.x = Math.random() * bounds.width;
+            bgBlob.y = -(bgBlob.radius * (1 + maxPointDistance));
+            break;
+          case 1: // left
+            bgBlob.x = -(bgBlob.radius * (1 + maxPointDistance));
+            bgBlob.y = Math.random() * bounds.height;
+            break;
+          case 2: // bottom
+            bgBlob.x = Math.random() * bounds.width;
+            bgBlob.y = bounds.height + bgBlob.radius * (1 + maxPointDistance);
+            break;
+          case 3: // right
+            bgBlob.x = bounds.width + bgBlob.radius * (1 + maxPointDistance);
+            bgBlob.y = Math.random() * bounds.height;
+            break;
+        }
+      }
+      dist = Math.hypot(bgBlob.x - targetX, bgBlob.y - targetY);
+      const velocity =
+        dist > gravityStartDistance
+          ? bgBlob.velocity
+          : ((1 - dist / gravityStartDistance) *
+              (gravityVelocityMultiplier - 1) +
+              1) *
+            bgBlob.velocity;
+      const shiftDist = velocity * timeDelta;
+      const direction = Math.atan2(targetX - bgBlob.x, targetY - bgBlob.y);
+      const xShift = Math.sin(direction) * shiftDist;
+      const yShift = Math.cos(direction) * shiftDist;
+      bgBlob.x += xShift;
+      bgBlob.y += yShift;
+      bgBlob.alphaMultiplier = Math.min(dist / targetRadius, 1);
+    }
+  }
+
+  draw(ctx: CanvasRenderingContext2D) {
+    const overallAlpha = easeInOutQuad(this.overallAlphaPos);
+
+    for (const bgBlob of this.bgBlobs) {
+      ctx.save();
+      ctx.globalAlpha = bgBlob.alpha * bgBlob.alphaMultiplier * overallAlpha;
+      ctx.translate(bgBlob.x, bgBlob.y);
+      ctx.scale(bgBlob.radius, bgBlob.radius);
+      ctx.rotate(Math.PI * 2 * bgBlob.rotatePos);
+      bgBlob.blob.draw(ctx);
+      ctx.restore();
+    }
+  }
+}
+
+const deltaMultiplierStep = 0.01;
+
+export function startBlobAnim(canvas: HTMLCanvasElement) {
+  let lastTime: number;
+  const ctx = canvas.getContext('2d')!;
+  const centralBlobs = new CentralBlobs();
+  let backgroundBlobs: BackgroundBlobs;
+  const loadImgEl = document.querySelector('.' + style.loadImg)!;
+  let hasFocus = document.hasFocus();
+  let deltaMultiplier = hasFocus ? 1 : 0;
+  let animating = true;
+
+  const visibilityListener = () => {
+    // 'Pause time' while page is hidden
+    if (document.visibilityState === 'visible') lastTime = performance.now();
+  };
+  const focusListener = () => {
+    hasFocus = true;
+    if (!animating) startAnim();
+  };
+  const blurListener = () => {
+    hasFocus = false;
+  };
+
+  new ResizeObserver(() => {
+    // Redraw for new canvas size
+    if (!animating) drawFrame(0);
+  }).observe(canvas);
+
+  addEventListener('focus', focusListener);
+  addEventListener('blur', blurListener);
+  document.addEventListener('visibilitychange', visibilityListener);
+
+  function destruct() {
+    removeEventListener('focus', focusListener);
+    removeEventListener('blur', blurListener);
+    document.removeEventListener('visibilitychange', visibilityListener);
+  }
+
+  function drawFrame(delta: number) {
+    const canvasBounds = canvas.getBoundingClientRect();
+    canvas.width = canvasBounds.width * devicePixelRatio;
+    canvas.height = canvasBounds.height * devicePixelRatio;
+    const loadImgBounds = loadImgEl.getBoundingClientRect();
+    const computedStyles = getComputedStyle(canvas);
+    const blobPink = computedStyles.getPropertyValue('--blob-pink');
+    const loadImgCenterX =
+      loadImgBounds.left - canvasBounds.left + loadImgBounds.width / 2;
+    const loadImgCenterY =
+      loadImgBounds.top - canvasBounds.top + loadImgBounds.height / 2;
+    const loadImgRadius = loadImgBounds.height / 2 / (1 + maxPointDistance);
+
+    ctx.scale(devicePixelRatio, devicePixelRatio);
+
+    if (!backgroundBlobs) backgroundBlobs = new BackgroundBlobs(canvasBounds);
+    backgroundBlobs.advance(
+      delta,
+      canvasBounds,
+      loadImgCenterX,
+      loadImgCenterY,
+      loadImgRadius,
+    );
+    centralBlobs.advance(delta);
+
+    ctx.globalAlpha = Number(
+      computedStyles.getPropertyValue('--center-blob-opacity'),
+    );
+    ctx.fillStyle = blobPink;
+
+    backgroundBlobs.draw(ctx);
+    centralBlobs.draw(ctx, loadImgCenterX, loadImgCenterY, loadImgRadius);
+  }
+
+  function frame(time: number) {
+    // Stop the loop if the canvas is gone
+    if (!canvas.isConnected) {
+      destruct();
+      return;
+    }
+
+    // Be kind: If the window isn't focused, bring the animation to a stop.
+    if (!hasFocus) {
+      // Bring the anim to a slow stop
+      deltaMultiplier = Math.max(0, deltaMultiplier - deltaMultiplierStep);
+      if (deltaMultiplier === 0) {
+        animating = false;
+        return;
+      }
+    } else if (deltaMultiplier !== 1) {
+      deltaMultiplier = Math.min(1, deltaMultiplier + deltaMultiplierStep);
+    }
+
+    const delta = (time - lastTime) * deltaMultiplier;
+    lastTime = time;
+
+    drawFrame(delta);
+
+    requestAnimationFrame(frame);
+  }
+
+  function startAnim() {
+    animating = true;
+    requestAnimationFrame((time: number) => {
+      lastTime = time;
+      frame(time);
+    });
+  }
+
+  startAnim();
+}

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

@@ -0,0 +1,41 @@
+import type { BlobPoint } from '.';
+
+/** Start points, for the shape we use in prerender */
+export const startBlobs: BlobPoint[][] = [
+  [
+    [-0.232, -1.029, 0.073, -1.029, 0.377, -1.029],
+    [0.565, -1.098, 0.755, -0.86, 0.945, -0.622],
+    [0.917, -0.01, 0.849, 0.286, 0.782, 0.583],
+    [0.85, 0.687, 0.576, 0.819, 0.302, 0.951],
+    [-0.198, 1.009, -0.472, 0.877, -0.746, 0.745],
+    [-0.98, 0.513, -1.048, 0.216, -1.116, -0.08],
+    [-0.964, -0.395, -0.774, -0.633, -0.584, -0.871],
+  ],
+  [
+    [-0.505, -1.109, -0.201, -1.109, 0.104, -1.109],
+    [0.641, -0.684, 0.831, -0.446, 1.02, -0.208],
+    [1.041, 0.034, 0.973, 0.331, 0.905, 0.628],
+    [0.734, 0.794, 0.46, 0.926, 0.186, 1.058],
+    [-0.135, 0.809, -0.409, 0.677, -0.684, 0.545],
+    [-0.935, 0.404, -1.002, 0.108, -1.07, -0.189],
+    [-0.883, -0.402, -0.693, -0.64, -0.503, -0.878],
+  ],
+  [
+    [-0.376, -1.168, -0.071, -1.168, 0.233, -1.168],
+    [0.732, -0.956, 0.922, -0.718, 1.112, -0.48],
+    [1.173, 0.027, 1.105, 0.324, 1.038, 0.621],
+    [0.707, 0.81, 0.433, 0.943, 0.159, 1.075],
+    [-0.096, 1.135, -0.37, 1.003, -0.644, 0.871],
+    [-0.86, 0.457, -0.927, 0.161, -0.995, -0.136],
+    [-0.87, -0.516, -0.68, -0.754, -0.49, -0.992],
+  ],
+  [
+    [-0.309, -0.998, -0.004, -0.998, 0.3, -0.998],
+    [0.535, -0.852, 0.725, -0.614, 0.915, -0.376],
+    [1.05, -0.09, 0.982, 0.207, 0.915, 0.504],
+    [0.659, 0.807, 0.385, 0.939, 0.111, 1.071],
+    [-0.178, 1.048, -0.452, 0.916, -0.727, 0.784],
+    [-0.942, 0.582, -1.009, 0.285, -1.077, -0.011],
+    [-1.141, -0.335, -0.951, -0.573, -0.761, -0.811],
+  ],
+];

src/shared/prerendered-app/Intro/imgs/github-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.34 28.61"><path fill="#838383" d="M14.67 0a14.67 14.67 0 00-4.64 28.59c.74.13 1-.32 1-.7l-.02-2.74c-4.08.89-4.94-1.73-4.94-1.73a3.88 3.88 0 00-1.63-2.14c-1.33-.91.1-.9.1-.9A3.08 3.08 0 016.8 21.9a3.12 3.12 0 004.27 1.22 3.12 3.12 0 01.93-1.96c-3.26-.37-6.68-1.63-6.68-7.25a5.68 5.68 0 011.5-3.94 5.27 5.27 0 01.15-3.9S8.2 5.7 11 7.58a13.9 13.9 0 017.34 0c2.8-1.9 4.03-1.5 4.03-1.5a5.27 5.27 0 01.15 3.9 5.67 5.67 0 011.5 3.93c0 5.63-3.42 6.87-6.7 7.24a3.5 3.5 0 011 2.71l-.01 4.03c0 .39.26.85 1 .7A14.67 14.67 0 0014.67 0z"/></svg>

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

@@ -0,0 +1,372 @@
+import { h, Component } from 'preact';
+
+import { linkRef } from 'shared/prerendered-app/util';
+import '../../custom-els/loading-spinner';
+import logo from 'url:./imgs/logo.svg';
+import githubLogo from 'url:./imgs/github-logo.svg';
+import largePhoto from 'url:./imgs/demos/demo-large-photo.jpg';
+import artwork from 'url:./imgs/demos/demo-artwork.jpg';
+import deviceScreen from 'url:./imgs/demos/demo-device-screen.png';
+import largePhotoIcon from 'url:./imgs/demos/icon-demo-large-photo.jpg';
+import artworkIcon from 'url:./imgs/demos/icon-demo-artwork.jpg';
+import deviceScreenIcon from 'url:./imgs/demos/icon-demo-device-screen.jpg';
+import logoIcon from 'url:./imgs/demos/icon-demo-logo.png';
+import logoWithText from 'url:./imgs/logo-with-text.svg';
+import * as style from './style.css';
+import type SnackBarElement from 'shared/custom-els/snack-bar';
+import 'shared/custom-els/snack-bar';
+import { startBlobs } from './blob-anim/meta';
+
+const demos = [
+  {
+    description: 'Large photo',
+    size: '2.8mb',
+    filename: 'photo.jpg',
+    url: largePhoto,
+    iconUrl: largePhotoIcon,
+  },
+  {
+    description: 'Artwork',
+    size: '2.9mb',
+    filename: 'art.jpg',
+    url: artwork,
+    iconUrl: artworkIcon,
+  },
+  {
+    description: 'Device screen',
+    size: '1.6mb',
+    filename: 'pixel3.png',
+    url: deviceScreen,
+    iconUrl: deviceScreenIcon,
+  },
+  {
+    description: 'SVG icon',
+    size: '13k',
+    filename: 'squoosh.svg',
+    url: logo,
+    iconUrl: logoIcon,
+  },
+];
+
+const blobAnimImport =
+  !__PRERENDER__ && matchMedia('(prefers-reduced-motion: reduce)').matches
+    ? undefined
+    : import('./blob-anim');
+const installButtonSource = 'introInstallButton-Purple';
+const supportsClipboardAPI =
+  !__PRERENDER__ && navigator.clipboard && navigator.clipboard.read;
+
+async function getImageClipboardItem(
+  items: ClipboardItem[],
+): Promise<undefined | Blob> {
+  for (const item of items) {
+    const type = item.types.find((type) => type.startsWith('image/'));
+    if (type) return item.getType(type);
+  }
+}
+
+interface Props {
+  onFile?: (file: File) => void;
+  showSnack?: SnackBarElement['showSnackbar'];
+}
+interface State {
+  fetchingDemoIndex?: number;
+  beforeInstallEvent?: BeforeInstallPromptEvent;
+  showBlobSVG: boolean;
+}
+
+export default class Intro extends Component<Props, State> {
+  state: State = {
+    showBlobSVG: true,
+  };
+  private fileInput?: HTMLInputElement;
+  private blobCanvas?: HTMLCanvasElement;
+  private installingViaButton = false;
+
+  componentDidMount() {
+    // Listen for beforeinstallprompt events, indicating Squoosh is installable.
+    window.addEventListener(
+      'beforeinstallprompt',
+      this.onBeforeInstallPromptEvent,
+    );
+
+    // Listen for the appinstalled event, indicating Squoosh has been installed.
+    window.addEventListener('appinstalled', this.onAppInstalled);
+
+    if (blobAnimImport) {
+      blobAnimImport.then((module) => {
+        this.setState(
+          {
+            showBlobSVG: false,
+          },
+          () => module.startBlobAnim(this.blobCanvas!),
+        );
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener(
+      'beforeinstallprompt',
+      this.onBeforeInstallPromptEvent,
+    );
+    window.removeEventListener('appinstalled', this.onAppInstalled);
+  }
+
+  private onFileChange = (event: Event): void => {
+    const fileInput = event.target as HTMLInputElement;
+    const file = fileInput.files && fileInput.files[0];
+    if (!file) return;
+    this.fileInput!.value = '';
+    this.props.onFile!(file);
+  };
+
+  private onOpenClick = () => {
+    this.fileInput!.click();
+  };
+
+  private onDemoClick = async (index: number, event: Event) => {
+    try {
+      this.setState({ fetchingDemoIndex: index });
+      const demo = demos[index];
+      const blob = await fetch(demo.url).then((r) => r.blob());
+      const file = new File([blob], demo.filename, { type: blob.type });
+      this.props.onFile!(file);
+    } catch (err) {
+      this.setState({ fetchingDemoIndex: undefined });
+      this.props.showSnack!("Couldn't fetch demo image");
+    }
+  };
+
+  private onBeforeInstallPromptEvent = (event: BeforeInstallPromptEvent) => {
+    // Don't show the mini-infobar on mobile
+    event.preventDefault();
+
+    // Save the beforeinstallprompt event so it can be called later.
+    this.setState({ beforeInstallEvent: event });
+
+    // Log the event.
+    const gaEventInfo = {
+      eventCategory: 'pwa-install',
+      eventAction: 'promo-shown',
+      nonInteraction: true,
+    };
+    ga('send', 'event', gaEventInfo);
+  };
+
+  private onInstallClick = async (event: Event) => {
+    // Get the deferred beforeinstallprompt event
+    const beforeInstallEvent = this.state.beforeInstallEvent;
+    // If there's no deferred prompt, bail.
+    if (!beforeInstallEvent) return;
+
+    this.installingViaButton = true;
+
+    // Show the browser install prompt
+    beforeInstallEvent.prompt();
+
+    // Wait for the user to accept or dismiss the install prompt
+    const { outcome } = await beforeInstallEvent.userChoice;
+    // Send the analytics data
+    const gaEventInfo = {
+      eventCategory: 'pwa-install',
+      eventAction: 'promo-clicked',
+      eventLabel: installButtonSource,
+      eventValue: outcome === 'accepted' ? 1 : 0,
+    };
+    ga('send', 'event', gaEventInfo);
+
+    // If the prompt was dismissed, we aren't going to install via the button.
+    if (outcome === 'dismissed') {
+      this.installingViaButton = false;
+    }
+  };
+
+  private onAppInstalled = () => {
+    // We don't need the install button, if it's shown
+    this.setState({ beforeInstallEvent: undefined });
+
+    // Don't log analytics if page is not visible
+    if (document.hidden) return;
+
+    // Try to get the install, if it's not set, use 'browser'
+    const source = this.installingViaButton ? installButtonSource : 'browser';
+    ga('send', 'event', 'pwa-install', 'installed', source);
+
+    // Clear the install method property
+    this.installingViaButton = false;
+  };
+
+  private onPasteClick = async () => {
+    let clipboardItems: ClipboardItem[];
+
+    try {
+      clipboardItems = await navigator.clipboard.read();
+    } catch (err) {
+      this.props.showSnack!(`No permission to access clipboard`);
+      return;
+    }
+
+    const blob = await getImageClipboardItem(clipboardItems);
+
+    if (!blob) {
+      this.props.showSnack!(`No image found in the clipboard`);
+      return;
+    }
+
+    this.props.onFile!(new File([blob], 'image.unknown'));
+  };
+
+  render(
+    {}: Props,
+    { fetchingDemoIndex, beforeInstallEvent, showBlobSVG }: State,
+  ) {
+    return (
+      <div class={style.intro}>
+        <input
+          class={style.hide}
+          ref={linkRef(this, 'fileInput')}
+          type="file"
+          onChange={this.onFileChange}
+        />
+        <div class={style.main}>
+          {!__PRERENDER__ && (
+            <canvas
+              ref={linkRef(this, 'blobCanvas')}
+              class={style.blobCanvas}
+            />
+          )}
+          <h1 class={style.logoContainer}>
+            <img
+              class={style.logo}
+              src={logoWithText}
+              alt="Squoosh"
+              width="539"
+              height="162"
+            />
+          </h1>
+          <div class={style.loadImg}>
+            {showBlobSVG && (
+              <svg
+                class={style.blobSvg}
+                viewBox="-1.25 -1.25 2.5 2.5"
+                preserveAspectRatio="xMidYMid slice"
+              >
+                {startBlobs.map((points) => (
+                  <path
+                    d={points
+                      .map((point, i) => {
+                        const nextI = i === points.length - 1 ? 0 : i + 1;
+                        let d = '';
+                        if (i === 0) {
+                          d += `M${point[2]} ${point[3]}`;
+                        }
+                        return (
+                          d +
+                          `C${point[4]} ${point[5]} ${points[nextI][0]} ${points[nextI][1]} ${points[nextI][2]} ${points[nextI][3]}`
+                        );
+                      })
+                      .join('')}
+                  />
+                ))}
+              </svg>
+            )}
+            <div
+              class={style.loadImgContent}
+              style={{ visibility: __PRERENDER__ ? 'hidden' : '' }}
+            >
+              <button class={style.loadBtn} onClick={this.onOpenClick}>
+                <svg viewBox="0 0 24 24" class={style.loadIcon}>
+                  <path d="M19 7v3h-2V7h-3V5h3V2h2v3h3v2h-3zm-3 4V8h-3V5H5a2 2 0 00-2 2v12c0 1.1.9 2 2 2h12a2 2 0 002-2v-8h-3zM5 19l3-4 2 3 3-4 4 5H5z" />
+                </svg>
+              </button>
+              <div>
+                <span class={style.dropText}>Drop </span>OR{' '}
+                {supportsClipboardAPI ? (
+                  <button class={style.pasteBtn} onClick={this.onPasteClick}>
+                    Paste
+                  </button>
+                ) : (
+                  'Paste'
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class={style.demosContainer}>
+          <svg viewBox="0 0 1920 140" class={style.topWave}>
+            <path
+              d="M1920 0l-107 28c-106 29-320 85-533 93-213 7-427-36-640-50s-427 0-533 7L0 85v171h1920z"
+              class={style.subWave}
+            />
+            <path
+              d="M0 129l64-26c64-27 192-81 320-75 128 5 256 69 384 64 128-6 256-80 384-91s256 43 384 70c128 26 256 26 320 26h64v96H0z"
+              class={style.mainWave}
+            />
+          </svg>
+          <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}>
+            <path
+              d="M0 59l64-11c64-11 192-34 320-43s256-5 384 4 256 23 384 34 256 21 384 14 256-30 320-41l64-11v94H0z"
+              class={style.footerWave}
+            />
+          </svg>
+          <div class={style.contentPadding}>
+            <footer class={style.footerItems}>
+              <a
+                class={style.footerLink}
+                href="https://github.com/GoogleChromeLabs/squoosh/blob/dev/README.md#privacy"
+              >
+                Privacy
+              </a>
+              <a
+                class={style.footerLinkWithLogo}
+                href="https://github.com/GoogleChromeLabs/squoosh"
+              >
+                <img src={githubLogo} alt="" width="10" height="10" />
+                Source on Github
+              </a>
+            </footer>
+          </div>
+        </div>
+        {beforeInstallEvent && (
+          <button class={style.installBtn} onClick={this.onInstallClick}>
+            Install
+          </button>
+        )}
+      </div>
+    );
+  }
+}

src/shared/prerendered-app/Intro/missing-types.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The BeforeInstallPromptEvent is fired at the Window.onbeforeinstallprompt handler
+ * before a user is prompted to "install" a web site to a home screen on mobile.
+ */
+interface BeforeInstallPromptEvent extends Event {
+  /**
+   * Returns an array of DOMString items containing the platforms on which the event was dispatched.
+   * This is provided for user agents that want to present a choice of versions to the user such as,
+   * for example, "web" or "play" which would allow the user to chose between a web version or
+   * an Android version.
+   */
+  readonly platforms: Array<string>;
+
+  /**
+   * Returns a Promise that resolves to a DOMString containing either "accepted" or "dismissed".
+   */
+  readonly userChoice: Promise<{
+    outcome: 'accepted' | 'dismissed';
+    platform: string;
+  }>;
+
+  /**
+   * Allows a developer to show the install prompt at a time of their own choosing.
+   * This method returns a Promise.
+   */
+  prompt(): Promise<void>;
+}
+
+interface WindowEventMap {
+  beforeinstallprompt: BeforeInstallPromptEvent;
+}
+
+interface ClipboardItem {
+  types: string[];
+  getType(type: string): Promise<Blob>;
+}
+
+interface Clipboard {
+  read(): Promise<ClipboardItem[]>;
+}

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

@@ -0,0 +1,243 @@
+.intro {
+  composes: abs-fill from global;
+  -webkit-overflow-scrolling: touch;
+  overflow: auto;
+  overscroll-behavior: contain;
+  display: grid;
+  grid-template-rows: 1fr max-content max-content;
+  font-size: 1.2rem;
+  color: var(--dark-text);
+}
+
+.blob-canvas {
+  composes: abs-fill from global;
+  width: 100%;
+  height: 100%;
+}
+
+.hide {
+  display: none;
+}
+
+.main {
+  min-height: 541px;
+  display: grid;
+  grid-template-rows: max-content max-content;
+  justify-items: center;
+  position: relative;
+  --blob-pink: var(--hot-pink);
+  --center-blob-opacity: 0.3;
+
+  @media (min-width: 600px) {
+    min-height: 688px;
+  }
+}
+
+.logo-container {
+  margin: 5rem 0 1rem;
+}
+
+.logo {
+  transform: translate(-1%, 0);
+  width: 189px;
+  height: auto;
+}
+
+.load-img {
+  position: relative;
+  color: var(--white);
+  font-style: italic;
+  font-size: 1.2rem;
+}
+
+.blob-svg {
+  composes: abs-fill from global;
+  width: 100%;
+  height: 100%;
+  fill: var(--blob-pink);
+
+  & path {
+    opacity: var(--center-blob-opacity);
+  }
+}
+
+.load-img-content {
+  position: relative;
+  --size: 29rem;
+  max-width: var(--size);
+  width: 100vw;
+  height: var(--size);
+  display: grid;
+  grid-template-rows: max-content max-content;
+  justify-items: center;
+  align-content: center;
+  gap: 0.7rem;
+
+  @media (min-width: 600px) {
+    --size: 36rem;
+  }
+}
+
+.load-btn {
+  composes: unbutton from global;
+}
+
+.load-icon {
+  --size: 5rem;
+  width: var(--size);
+  height: var(--size);
+  fill: var(--white);
+  transform: translate(4.3%, -1%);
+}
+
+.paste-btn {
+  composes: unbutton from global;
+  text-decoration: underline;
+  font: inherit;
+  color: inherit;
+}
+
+.demos-container {
+  position: relative;
+  background: var(--deep-blue);
+  padding-bottom: 5.2vw;
+}
+
+.top-wave {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+}
+
+.main-wave {
+  fill: var(--deep-blue);
+}
+
+.sub-wave {
+  fill: var(--light-blue);
+}
+
+.footer {
+  position: relative;
+  background: var(--light-gray);
+}
+
+.footer-wave {
+  fill: var(--light-gray);
+}
+
+.content-padding {
+  padding: 2rem;
+}
+
+.footer-items {
+  display: grid;
+  justify-content: end;
+  grid-auto-columns: max-content;
+  grid-auto-flow: column;
+  align-items: center;
+  gap: 4rem;
+}
+
+.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;
+  gap: 0.6em;
+
+  img {
+    width: 100%;
+    height: auto;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+.install-btn {
+  composes: unbutton from global;
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: var(--deep-blue);
+  border-radius: 0.4em;
+  color: var(--white);
+  padding: 0.5em 1em;
+  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: 3rem;
+  justify-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 3rem auto;
+  --demo-size: 80px;
+  grid-template-columns: repeat(auto-fit, var(--demo-size));
+
+  @media (min-width: 740px) {
+    --demo-size: 100px;
+    gap: 6rem;
+  }
+
+  & > 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 {
+  border-radius: var(--demo-size);
+  position: relative;
+  overflow: hidden;
+}
+.demo-icon {
+  width: var(--demo-size);
+  height: var(--demo-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);
+  }
+}
+
+.drop-text {
+  @media (max-width: 599px) {
+    display: none;
+  }
+}