Prettier! More images, parallax, and subtle borders

src/main.ts

@@ -1,4 +1,3 @@
-import "./style.css";
 import backwalkgeorge from "/backwalkgeorge.jpg";
 import georgetoilet from "/georgetoilet.png";
 import klinefloor from "/klinefloor.jpeg";
@@ -8,28 +7,130 @@ import klinetrain from "/klinetrain.jpeg";
 import sashaklineburrito from "/sashaklineburrito.jpeg";
 import sashaklinecar from "/sashaklinecar.jpeg";
 import sunsetkline from "/sunsetkline.png";
+import georgerasp from "/georgerasp.gif";
+import sunsetfourteenth from "/14thstsunrise.gif";
+import solderkitty from "/solderkitty.jpeg";
+import ducklings from "/ducklings.gif";
+import fieldnotes from "/fieldnotes.gif";
+import lamp from "/lamp.gif";
+import ohio from "/ohio.jpeg";
+import heron from "/heron.jpeg";
+import flowers from "/flowers.jpeg";
+import mirror from "/mirror.jpeg";
 
-let app = document.getElementById("app")!;
+let background = document.getElementById("background")!;
+
+let prefersReducedMotion = window.matchMedia(
+  "(prefers-reduced-motion: reduce)",
+);
 
 let setImages = () => {
-  let images = [
-    backwalkgeorge,
-    georgetoilet,
-    klinefloor,
-    klinemirror,
-    klineoutside,
-    klinetrain,
-    sashaklineburrito,
-    sashaklinecar,
-    sunsetkline,
-  ];
+  let images: string[] = [];
+  if (prefersReducedMotion.matches) {
+    images = [
+      backwalkgeorge,
+      georgetoilet,
+      klinefloor,
+      klinemirror,
+      klineoutside,
+      klinetrain,
+      sashaklineburrito,
+      sashaklinecar,
+      sunsetkline,
+      // georgerasp,
+      // sunsetfourteenth,
+      solderkitty,
+      // ducklings,
+      fieldnotes,
+      // lamp,
+      ohio,
+      heron,
+      flowers,
+      mirror,
+    ];
+  } else {
+    images = [
+      backwalkgeorge,
+      georgetoilet,
+      klinefloor,
+      klinemirror,
+      klineoutside,
+      klinetrain,
+      sashaklineburrito,
+      sashaklinecar,
+      sunsetkline,
+      georgerasp,
+      sunsetfourteenth,
+      solderkitty,
+      ducklings,
+      fieldnotes,
+      lamp,
+      ohio,
+      heron,
+      flowers,
+      mirror,
+    ];
+  }
+  const randn_bm = (mean = 0, stdev = 0.4) => {
+    const u = 1 - Math.random();
+    const v = Math.random();
+    const z = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
+    return z * stdev + mean;
+  };
+
+  const randNums = (count: number, minDistance: number): number[] => {
+    const numbers: number[] = [];
+
+    function isFarEnough(num: number): boolean {
+      for (const n of numbers) {
+        if (Math.abs(num - n) < minDistance) {
+          return false;
+        }
+      }
+      return true;
+    }
+
+    while (numbers.length < count) {
+      const newNumber = randn_bm();
+      if (isFarEnough(newNumber)) {
+        numbers.push(newNumber);
+      }
+    }
+
+    return numbers;
+  };
+
+  const lefts = randNums(images.length, 0.05);
+  const tops = randNums(images.length, 0.05);
   for (let index in images) {
     let img = document.createElement("img");
     img.setAttribute("src", images[index]);
-    img.style.setProperty("left", (Math.random() * 100).toString() + "%");
-    img.style.setProperty("top", (Math.random() * 100).toString() + "%");
-    app.append(img);
+    // let left = randn_bm();
+    // let top = randn_bm();
+    let left = lefts[index];
+    let top = tops[index];
+    let z = (Math.abs(left) + Math.abs(top)) / 2;
+    let range = { x: window.innerWidth * 0.7, y: window.innerHeight * 0.7 };
+    img.style.setProperty(
+      "left",
+      `${left * range.x + window.innerWidth / 2}px`,
+    );
+    img.style.setProperty("top", `${top * range.y + window.innerHeight / 2}px`);
+    img.style.setProperty("--translate-z", `${z * 3000}px`);
+    img.setAttribute("data-group", `${Math.floor(Math.random() * 3)}`);
+    background.append(img);
   }
 };
 
+const root = document.documentElement;
+
+const onMove = (ev: MouseEvent) => {
+  let rotateY = `${(ev.clientX - window.innerWidth / 2) * 0.001}deg`;
+  let rotateX = `${(ev.clientY - window.innerHeight / 2) * 0.001}deg`;
+  root.style.setProperty("--rotate-x", rotateX);
+  root.style.setProperty("--rotate-y", rotateY);
+};
+
+document.addEventListener("mousemove", onMove);
+
 setImages();

src/style.css

@@ -1,77 +0,0 @@
-:root {
-    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-    line-height: 1.5;
-    font-weight: 400;
-    color: var(--text-color);
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    --link-color: oklch(68% .1707 0);
-    --text-color: black
-}
-
-body,
-html {
-    inline-size: 100%;
-    block-size: 100%;
-    margin: 0;
-    padding: 0;
-    overflow: hidden
-}
-
-#app {
-    inline-size: 100%;
-    block-size: 100%;
-    display: flex;
-    margin: 0;
-    padding: 0;
-    position: relative;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    overflow: hidden
-}
-
-h1 {
-    font-size: 1.5rem;
-    margin-block: .5rem
-}
-
-p {
-    font-size: 1.5rem;
-    margin: 0;
-    text-align: justify;
-    inline-size: 100%
-}
-
-a {
-    color: var(--link-color);
-    text-decoration: none;
-    transition: .2s text-shadow, .2s transform;
-    display: inline-block
-}
-
-a:hover {
-    text-shadow: 0rem 0rem 1rem var(--link-color);
-    transform: rotate(-3deg)
-}
-
-img {
-    transform: translate(-50%, -50%);
-    position: absolute;
-    inline-size: 10%;
-    z-index: -1;
-    min-inline-size: 10rem
-}
-
-.text {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background: #fff;
-    border: 1px solid black;
-    box-shadow: 0 0 1.5rem #fff;
-    padding: .8rem 1.6rem;
-    inline-size: clamp(20rem, 30%, 40rem)
-}